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