Jeżeli wcześniej nie zaznajomiłeś się z artykułem Jak zrobić kontener na banner to zapraszam do zapoznania się. Będziemy bazować na przygotowanym wcześniej kodzie aby utworzyć prosty, responsywny tekst nagłówkowy na naszym bannerze.
A o to co dzisiaj będziemy robić, nie zapomnij zmniejszyć szerokości przeglądarki aby zobaczyć jak będzie prezentować się strona na urządzeniach przenośnych.
See the Pen responsive text banner by Tomasz Wikło (@studioleopard) on CodePen.19725
Zmniejsz rozmiar okna, aby zobaczyć efekt końcowy.
Czcionka dla całej strony
Na samym początku zmieniłem domyślną czcionkę dla strony na Roboto Slab z repozytorium Google Fonts.
See the Pen responsive text banner by Tomasz Wikło (@studioleopard) on CodePen.19725
Dodałem odpowiednią regułę importującą @import do kodu CSS a następnie ustawiłem font-family: ‘Roboto Slab’, serif; dla elementu body.
Struktura HTML
Do wcześniejszego kodu dopisałem jedynie diva z klasą banner-text. Wewnątrz umieściłem dwa nagłówki.
See the Pen responsive text banner by Tomasz Wikło (@studioleopard) on CodePen.19725
Przejdźmy do ciekawszej rzeczy…
Pozycjonowanie elementów z CSS
Chcę aby nasz napis wyświetlał się mniej orientacyjnie na środku bannera, dlatego zacząłem od pozycjonowania elementów z klasą banner-text względem jego najbliższego pozycjonowanego elementu. Zwróć uwagę, że w naszym przypadku najbliższym pozycjonowanym rodzicem będzie element body. Mogłoby się wydawać, że powinien nim być .banner-container ale zwróć uwagę, że jest on pozycjonowany absolutnie (position: absolute;). A jak dobrze wiesz elementy takie są tak jakby wyciągane z normalnego położenia elementów i nie można względem nich pozycjonować dalszych elementów.
See the Pen responsive text banner by Tomasz Wikło (@studioleopard) on CodePen.19725
Aby nasz kontener na nagłówki zachował swoje położenie, zastosowałem tutaj identyczną sztuczkę jak z paddingiem w artykule Jak zrobić kontener na banner. Tak samo jak w przypadku padding, gdy dla margin-top lub margin-bottom określimy wartość w procentach, to margines jaki ma zostać wstawiony obliczany jest automatycznie na podstawie szerokości kontenera w jakim znajduje się element. Dzięki takiemu zachowaniu, za pomocą margin-top: 22%; cały kontener na nagłówki względem zdjęcia będzie na środku. Pozostałe właściwości są głownie dekoracyjnie: text-transform: uppercase; wyświetla wszystko z dużych liter, text-align: center; wyśrodkowuje a font-weight: bold; pogrubia tekst.
Jak dotąd wszystko dobrze, trzeba jeszcze sformatować nagłówki. Domyślnie nagłówki h1 i h2 są elementami blokowy, w związku z tym rozciągają się na całą swoją szerokość. Docelowo chciałem, aby nasze nagłówki nie rozciągały się na całą szerokość w rozdzielczościach desktopowcyh. Dlatego ustawiłem display: inline-block;. Dzięki temu automatycznie nasze element h1 i h2 skurczyły się, tak jak domyślnie dzieje się to z elementami śródliniowymi (inline). Jednak tutaj może pojawić się kolejny problem. Skoro są to elementy inline, to oznacza, że gdy będzie wystarczająco dużo miejsca to elementy będą obok siebie – a nie jedno pod drugim. Dlatego dla drugiego elementu h2 zastosowałem display: table;, dzięki temu nasz element zachowuje się jak tabela i automatycznie przechodzi do nowego wiersza. Jeżeli do tak ustawionej tabeli dodamy margin-right: auto; i margin-left: auto; to zostanie ona wyśrodkowana.
Od teraz wydawałoby się, że jest wszystko dobrze, jednak gdybyśmy zmniejszyli szerokość przeglądarki to wszystko by się rozjechało tak jak na zdjęciu.
Jak widać na zrzucie, wymiary kontenera dla nagłówka się popsuły, oprócz tego czcionka jest za duża jak na powyższą szerokość. W pewnym momencie tekst wyjechałby całkiem poza widoczny obszar.
Klucz do responsywnych nagłówków
I tutaj wkracza nasz bohater – jednostka vierport width (vw). Jest to jednostka, która automatycznie dostosowuje rozmiar elementu na podstawie szerokości “viewport” – czyli widocznego obszaru, tego, w którym wyświetlana jest strona.
1vw w przeliczeniu na piksele, to zawsze 1% szerokości obszaru, w którym wyświetlana jest strona. Czyli gdyby nasza strona wyświetlała się na ekranie 1000px szerokości, to przykładowo 3.5vw wynosiłoby 35px. Jak to jest obliczane? Wystarczy przemnożyć 3.5vw * 1% * 1000px i otrzymamy 35px. Dokładnie taką wielkość miałby nasz nagłówek przy 1000px szerokości przeglądarki.
Bardzo podobną jednostką jest vh, gdzie rozmiar w pikselach obliczany jest na podstawie dostępnej wysokości – a nie jak w przypadku vh szerokości. 1vh to 1% wysokości obszaru, w którym wyświetlana jest strona.
I aby wyczerpać temat jednostek viewport to chcę jeszcze wspomnieć o dwóch bardzo przydatnych: vmin oraz vmax. Ich działanie jest bardzo proste, przeliczają wysokość i szerokość a następnie używają odpowiednio mniejszej, lub większej wartości. Czyli gdyby widoczny obszar miał 1000px szerokości i 600px wysokości, to 3.5vmin wynosiłby 21px a vmax 35px.
Są to bardzo przydane jednostki podczas tworzenia stron responsywnych. Wymienione w artykule jednostki są obecnie wspierane przez wszystkie najważniejsze przeglądarki internetowe.
Na sam koniec, w zapytaniach @media, dla mniejszych rozdzielczości ustawiłem jeszcze tło nagłówków na cała szerokość przeglądarki. Dla mniejszych rozdzielczości na moje oko tak jest ładniej.
I na koniec jeszcze raz efekt końcowy.
See the Pen responsive text banner by Tomasz Wikło (@studioleopard) on CodePen.19725
Zmniejsz rozmiar okna, aby zobaczyć efekt końcowy.
A Tobie jak się podoba?
Opublikowano 14 listopada 2016 w kategorii blog, css, html, poradnik.
