Klucz do responsywnych nagłówków

Klucz do responsywnych nagłówków

Z dzisiejszego wpisu dowiesz się, jak w prosty sposób można stworzyć responsywny tekst bannerowy.

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 h1h2 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;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.

klucz_do_responsywnych_naglowkow_zrzut

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?

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.