Jeżeli jeszcze nie zaznajomiłeś się z poprzednim wpisem, dotyczącym tworzonego szablonu to zapraszam do zapoznania się z artykułem Klucz do responsywnych nagłówków. Będziemy bazować na naszym szablonie aby utworzyć prostą, ale przejrzystą sekcję na treść.
See the Pen responsive text banner by Tomasz Wikło (@studioleopard) on CodePen.19725
Przewiń stronę do sekcji “Prosto z ogródka” i zmniejsz rozmiar okna, aby zobaczyć efekt końcowy.
Zacznijmy od struktury HTML. Do wcześniejszego artykułu, gdzie robiliśmy responsywne nagłówki na bannerze, dodaliśmy sekcję (section) z klasą .about oraz sekcję z klasą blog. Obie sekcje składają z 2 nagłówków wewnątrz diva z klasą header. W sekcji about dochodzi prosta galeria na zdjęcia, związana z treścią – dlatego tym razem zastosowaliśmy znacznik img a nie właściwość CSS background-image – i dwóch akapitów. Wszystko otoczone divem z klasą container.
See the Pen responsive text banner by Tomasz Wikło (@studioleopard) on CodePen.0
Zwróć uwagę, że obie sekcje wraz z nagłówkiem (wewnątrz którego jest menu i banner) są na tym samym poziomie w strukturze, to znaczy są dla siebie rodzeństwem (ang. siblings).
Skupimy się teraz głównie na sekcji z klasą about, która ma się składać głównie z treści tekstowej, przy okazji w minimalnym stopniu przygotowując następną sekcję z klasą blog.
Sekcja na treść
Nasza sekcja jest bardzo ogólna. Na tyle ogólna, że ostylowanie z tej części będę chciał wykorzystać w kolejnych. Z tego względu, stylowałem po nazwach znaczników, tam gdzie uważałem, że będzie to przydatne.
Dla section ustawiłem wyświetlanie elementu jako tabelowy za pomocą display: table; Zanim CSS w całości przejął rolę odpowiedzialną za wygląd strony, układy kolumnowe uzyskiwało się za pomocą tabel. Obecnie, gdzie nacisk przy tworzeniu stron położony jest na czytelność kodu oraz jego znaczenie semantyczne wygląd definiuje się jedynie głównie za pomocą CSS bez dodawania zbędnych znaczników do kodu HTML. Dlatego zastosowanie display: table; jest jak najbardziej bardzo dobrym rozwiązaniem. Nie dodajemy zbędnych znaczników do naszej struktury HTML a uzyskujemy funkcjonalność tradycyjnych tabel. Aby nasze sekcje były rozciągnięte na 100% szerokości przeglądarki, ustawiłem width: 100%;. Pozostałe właściwości dotyczą głównie wyglądu: koloru tła i czcionek oraz dolnego 3px obramowania, które ozdabia nasze sekcje.
Przejdźmy do section:nth-of-type(even). :nth-of-type(even) to tak zwana pseudoklasa, dzięki której, w naszym przypadku ustawiliśmy tło i kolor czcionki każdej parzystej(even to parzysty w angielskim) sekcji na kontrastujący z sekcją wcześniejszą. Nie ważne jak wiele sekcji byś dodał, to każdą miałbyś od tego momentu w naprzemiennych kontrastujących ze sobą kolorach. Zamiast even mógłbyś wpisać samą dwójkę, wtedy tylko druga sekcja byłaby ostylowana. Gdybyś wpisał 2n to otrzymałbyś takie zachowanie jak w przypadku even. Jeżeli chciałbyś odwrócić kolory w taki sposób, aby sekcja about była ciemniejsza, to wystarczyłoby wpisać 2n+1 ale równie dobrze mógłbyś angielskiego słówka nieparzysty – czyli odd – otrzymałbyś taki sam efekt. Jak widzisz, pseudoklasy są bardzo przydatne. Na pewno spotkałeś się z nimi wcześniej, :link czy :hover to też pseudoklasy. Jest ich znacznie więcej dlatego zachęcam Ciebie do przejrzenia ich na w3schools.com.
Element z klasą container zastosowałem aby wyśrodkować wszystko co znajduje się wewnątrz elementu z klasą container. Symbol > oznacza, że element z klasą .container musi być bezpośrednim dzieckiem elementu (w tym przypadku znacznika) section. Tylko w takim przypadku ostylowanie zadziała, czyli gdybyśmy mieli .container wewnątrz diva z klasą .gallery to ta reguła nie miałaby zastosowania.
Następnie ostylowałem wszystkie paragrafy w sekcji zwiększając rozmiar czcionki, ustawiając marginesy, wysokość linii i wyjustowanie. Nasze nagłówki są ostylowane dokładnie w taki sam sposób jak te z Klucz do responsywnych nagłówków dlatego jeszcze raz zachęcam do zapoznania się.
Aby nasze zdjęcia w galerii były responsywe, dla wszystkich elementów img ustawiłem height: auto; i width: 100%;. Dzięki takiemu ustawienia mamy pewność, że nasze zdjęcia nie wyjdą poza otaczający je kontener i będą poprawnie się skalować z zachowaniem swoich proporcji. W galerii zmniejszyłem szerokość każdego zdjęcia na 25%, dzięki temu wszystkie elementy automatycznie ustawiły się obok siebie w jednym rzędzie. Dodałem również białe obramowanie i lekko zwiększyłem boczne marginesy zwiększając tym odstępy pomiędzy zjdęciami.
Całą sekcje mamy skończoną, wygląda minimalistycznie i schludnie.
See the Pen responsive text banner by Tomasz Wikło (@studioleopard) on CodePen.19725
W wersji desktopowej strona wyświetla się poprawnie, jednak gdybyśmy na tym etapie zmniejszyli szerokość przeglądarki, to zdjęcia i nagłówki zaczęłyby się robić za małe. Dlatego w zapytaniach @media zwiększyłem rozmiar czcionki. Oprócz tego zwiększyłem szerokość zdjęć do 100% aby wyświetlały w osobnych wierszach. Otrzymałem 3 rzędy z obrazkami.
Jak dla mnie teraz na pierwszy plan wysunęły się zdjęcia, a miała być to treść. Dlatego w zapytaniach medialnych dodałem klasę .hide-respo {display: none;}. Po jej dodaniu do dwóch zdjęć, w wersji responsywnej wyświetlać się będzie tylko jedno zdjęcie. Na chwilę obecną to dobre rozwiązanie. W przyszłości zamienimy tę galerię w slajder.
Jak widzisz, sekcja z treścią w porównaniu np. do całego bannera i menu była prostym zadaniem.
See the Pen responsive text banner by Tomasz Wikło (@studioleopard) on CodePen.19725
Przewiń stronę do sekcji “Prosto z ogródka” i zmniejsz rozmiar okna, aby zobaczyć efekt końcowy.
Gdy dokończymy cały szablon to będziemy go szlifować dodając coraz bardziej zaawansowane elementy, włączając w to sekcję about.
Opublikowano 28 listopada 2016 w kategorii css, html, poradnik.
