piątek, 5 października 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 ↓
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
Brak komentarzy:
Prześlij komentarz
W razie pytań/pomocy przy pobranym szablonie: tworczynotatnik@gmail.com