czwartek, 18 kwietnia 2013

Własność text-shadow // Efekt 3D za pomocą CSS

Element: różne
Stopień trudności: xxxx
Czas wykonywania: 5 minut
Dodając szablon "3D Effect" już miałam zamysł, aby pokazać Wam co i jak z tym efektem. Oczywiście nie jest on tak zadowalający jak w przypadku tworzenia tego typu tekstów w programach graficznych, ale może być na pewno ciut prostszy i na swój sposób również ciekawy.
Wierzcie mi, roboty dużo z tym nie ma. 

Dzisiaj będziemy się obchodzić z jedną właściwością (cechą) - text-shadow
To właśnie ona zagwarantuje nam powstanie danego efektu. Jej zastosowanie opisuje się jako tworzenie cieniowanego tekstu, a tego właśnie potrzebujemy.
Jednak zanim przejdziemy do instrukcji dowiemy się czegoś więcej o tejże właściwości.

Wiemy już jakie jest jej zastosowanie, teraz dowiemy się jak rozpisać prawidłowy kod. 
selektor { text-shadow: 2px 2px 1px red;} 
Powyżej widzicie przykład efektu po zastosowaniu cechy text-shadow. Pozostaje jednak pytanie za co odpowiadają poszczególne wartości.

selektor { text-shadow: cień poziomy, cień pionowy, rozmycie, kolor } 
  1. Jak widzicie pierwsza wartość odpowiada za przesunięcie cienia w poziomie. Dodatnie wartości przesuną nasz cień w prawo, a ujemne w lewo.
  2. Druga wartość to cień poziomy; wartość dodatnia odpowiada za przesunięcie do dołu, a ujemne do góry.
  3. Rozmycie - określamy poziom rozmycia, jednak jest to wartość niekonieczna, można ją swobodnie pominąć.
  4. Kolor efektu; możemy pisać podstawowe barwy jak red, blue, yellow; jak również możemy podać #fff, #f8f8f8 czy #000 
Nam chodzi o dwa efekty - czerwony i niebieskie, a żeby zastosować na tekście dwa w tym samym czasie rozdzielamy je przecinkiem. 

Zaczynamy!
Najpierw efekt czerwony, czyli
efekt 3D { text-shadow: 1px 0 0.5px #FF0000;}
efekt 3D { text-shadow: -1px 0 0.5px #00F1F5;}
W czerwonym cieniu mamy przesunięcie poziomie 1px, a w niebieskim -1px. Stosuje się to po to, aby efekty nie zasłaniały jeden drugiego. Czerwony przesuwa się w prawo, a niebieski w lewo, co po połączeniu da nam pełny efekt 3D.

No cóż, połowa pracy już za nami, wystarczy połączyć oba efekty, rozdzielając je przecinkiem, jak napisałam wyżej.

efekt 3D {text-shadow: 2px 0 0.5px #FF0000, -2px 0 0.5px #00F1F5;}
Im wyższa wartość przy wielkości czcionki tym większe powinno być przesunięcie poziomie. 
Np. Stosując efekt dla tekstu 60px, powinniśmy dać 3/5px przesunięcia! 

Panie i panowie!
Przedstawiam Wam efekt 3D za pomocą kodów CSS! :>


źródło text-shadow // źródło 3D effect

1 komentarz:

  1. dodaję do elity :)
    świetne wskazówki dotyczące cssa

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler