Jak zrobić tekst z teksturą za pomocą CSS

05.10.2018


Ostatnio przeglądam dużo blogów - polskie i zagraniczne. Zauważyłam kilka rzeczy, ale dwie rzuciły mi się mocno w oczy. Pierwsza - zdecydowanie każdy idzie w minimalizm i "czystą formę" bloga i to jest ja najbardziej ok. Druga, która razi moje oczy, to nietypowe nagłówki gadżetów/inne elementy tekstowe. O ile sam sposób ich przedstawienia nie jest zły, tak sposób w jaki są zrobione już trochę mi przeszkadza (pod względem technicznym, a nie estetycznym).

Zazwyczaj te nagłówki/elementy tekstowe są grafikami. Pamiętam, że kiedyś sporo osób mnie prosiło o to, abym pokazała jak zrobić takie graficzne nagłówki. Dotarłam do tego wpisu robiąc aktualizację innych i szczerze nie byłam z tej metody zadowolona. Ten wpis nadal jest na blogu, ale bardziej w ramach ciekawostki (?).

Wyróżniające się nagłówki gadżetów, jako element dekoracyjny naszego bloga, mogą naprawdę dodać mu tego "czegoś", więc warto skorzystać z możliwości jakie daje nam nasz szablon i popracować nad tymi elementami, skoro zdecydowaliśmy, że to właśnie nasze nagłówki, czy inne elementy tekstowe mają być tymi wyróżniającymi się.

Dlatego, w dzisiejszym wpisie pokażę Wam, jak zrobić za pomocą CSS elementy tekstowe z teksturą np. w odcieniach złota, srebra czy tak słynnego w ostatnim czasie motywu marmuru :)

1. Jeśli chcemy użyć fontu, który nie występuję w zasobach Bloggera, skorzystaj z tego wpisu

Zobacz wpis o niestandardowych fontach na blogu

2. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS

W arkuszu CSS wklejamy poniższy kod:




Analiza kodu:



SELEKTOR - tutaj wpisujemy odpowiedni selektor
{font-family: Pacifico; - wpisujemy nazwę wybranego fontu font-size: 44px; - rozmiar naszego nagłówka/elementu tekstowegocolor: #000; - kolor tekstu background: url(LINK DO GRAFIKI) no-repeat center center;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 30px; - marginesy }


Wszystkie pogrubione wartości są zmienne. Poniżej kilka przykładów :)

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst


Zdjęcia tekstur, które zostały użyte do tej instrukcji pochodzą ze strony Unsplash
Tekstura z tekstu 1 | Tekstura z tekstu 2 | Tekstura z tekstu 3 | Tekstura z tekstu 4 | Tekstura z tekstu 5 | Tekstura z tekstu 6 
Udostępnij ten wpis:

Brak komentarzy:

Prześlij komentarz

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez My pastel life