Ad Clicks : Ad Views : Ad Clicks : Ad Views :
Cześć

Zmień ustawienia blokowania reklam !!! Rozwój bloga finansowany jest dzięki reklamie - wspieraj wolny internet.

img
Strona główna / Marketing / Dekoracja tekstu CSS – text- shadow

Dekoracja tekstu CSS – text- shadow

/

Raczej często i dość nagminnie graficy w swoich pracach wyróżniają nagłówki na stronach poprzez nałożenie na tekst gradientu lub delikatnego cienia. Z Bogiem sprawa jeżeli jest to strona statyczna i właściciel nie będzie dokładał kolejnych zakładek nowymi nagłówkami, wtedy zrobimy sobie kilka ilustracji z tekstem nagłówka. Ale problem pojawia się w przypadku cięcia np.: sklepów. Wraz ze zmianą nazwy kategorii lub nazwy produktu nagłówek powinien prezentować się równie okazale co w poprzedniej wersji. I co wtedy? Moja propozycja to użycie w arkuszu css polecenia „text-shadow”. Podając kolejne wartości definiujemy odstępy i kolor cienia.

Dekoracja tekstu css

<h3 style="text-shadow:1px 1px 0px #000;">Dekoracja tekstu css</h3>

Zwiększając pierwszą wartość zwiększamy odstęp z lewej strony:

Dekoracja tekstu css

<h3 style="text-shadow:2px 1px 0px #000;">Dekoracja tekstu css</h3>

Zwiększając drugą wartość zwiększamy dolny odstęp:

Dekoracja tekstu css

<h3 style="text-shadow:2px 3px 0px #000;">Dekoracja tekstu css</h3>

I teraz najciekawsze zwiększając trzecią wartość uzyskujemy efekt rozmycia:

Dekoracja tekstu css

<h3 style="text-shadow:2px 3px 2px #000;">Dekoracja tekstu css</h3>

I ostatni element to kolor:

Dekoracja tekstu css

<h3 style="text-shadow:1px 2px 1px #000">Dekoracja tekstu css</h3>

Stosując to rozwiązanie możemy wzbogacić naszą stronę co ciekawie wyglądające nagłówki, ale nie ma róży bez kolców. O ile większość nowych przeglądarek radzi sobie z prezentowaniem text- shadow, to (fuck) IE ^ ma problem i takiej dekoracji nam nie pokarze ale to problem tych, którzy tej przeglądarki używają.

Jak użyteczny był ten post?

Kliknij gwiazdkę, aby ocenić wpis!

Średnia ocena / 5. Liczba głosów:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Wysokość ta DIV wymagane do włączenia lepki pasek boczny