text shadow – co i po co

text-shadow pozwala realizować prosto te sprawy, które od dawna szykowali graficy, a których implementacja na stronie, wymagała użycia grafik, bądź też rozwiązań javascriptowych, albo dublowania tekstu wraz z użyciem przemyślnego(no dobra, prostego) stylu opartego na pozycjonowaniu absolutnym. Czyli mowa o cieniu pod tekstem. Ponieważ jednak, sam cień w sobie nie ma wartości informacyjnych a estetyczne, był on też po prostu często ignorowany przez koderów. Obecnie jednak rynek przeglądarek wygląda tak, że większość userów może zobaczyć już cienie dodawane z poziomu CSS, a reszta będzie mogła je podziwiać niedługo wraz z premierą IE 9( choć patrząc na tabelę obsługiwanych właściwości, zapis przy text-shadow nie nastraja optymistycznie). Wydaje mi się, że można więc porzucić wszelkie zastępcze techniki i zacząć stosować najzwyklejsze w świecie text-shadow.

Jak to działa ?

Najprostszy przykład cienia

Kod CSS:

span{
 text-shadow: 1px 2px 3px #fff;
}

Pierwszy parametr(1px) to przesunięcie cienia względem tekstu po osi X, drugi(2px) po osi Y, trzeci(3px) to rozmycie(blur), a czwarty(#fff) to kolor cienia. O ile inne są dość zrozumiałe, to z blurem trzeba poeksperymentować, żeby zobaczyć jakie efekty można uzyskać.

Kolejną możliwością są tak zwane multi cienie(Multiple shadows), czyli definiowanie kilku cieni dla jednego elementu. Tu posłużę się przykładem z css3.info :

Multiple shadows a po polsku multi cienie :-)

Kod CSS:

span{
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

Prawda, że piękne i genialne ? I jakie proste. Jedna sprawa odnośnie multi cieni: najbardziej na wierzchu jest cień zdefiniowany jako pierwszy, każdy kolejny ma niższy priorytet, czy jak kto woli z-index.
Teraz mały przykład odnośnie pseudoklasy :hover i cienia:

Multiple shadows i :hover

Chyba nie o to nam chodziło, ale i tak kod CSS:

span{
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33;
}
span:hover{
 text-shadow: -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

Żadne dopisywanie cieni na :hover nie ma miejsca. Normalnie trzeba zapisać całą linię dla text-shadow od nowa, czyli tak:

span{
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33;
}
span:hover{
 text-shadow:  0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

aby uzyskać:

Multiple shadows i :hover

Animowanie i jQuery a text-shadow

Mówiąc krótko nie ma obsługi dla animowania text-shadow w jQuery. Możliwe, że jest to spowodowane tym, że właściwość text-shadow dopuszcza definiowanie wielu cieni, albo nie jest to coś co powinno być obsługiwane domyślnie. Problemem jest też niemożność rozczłonkowania text-shadow na poszczególne składowe(text-shadow-blur, text-shadow-x, text-shadow-y, text-shadow-color), ale to ponownie wiąże się z multi cieniami, bo jakby to wtedy miałoby być zapisane? Jakkolwiek framework UIZE poradził sobie z tym zadaniem całkiem ładnie, co można sprawdzić tu.

Co jednak w tym temacie ma do powiedzenia jQuery?

Wraz z jQuery 1.4.3 pojawiły się cssHooks. Co to i jak to działa to sprawa na osobny artykuł, ważne że umożliwia rozbudowywanie funkcjonalności dostępnych przez .css() i.animate() poprzez napisanie odpowiednich pluginów. Tak się szczęśliwie składa, że znalazła się ekipa, która takie pluginy już szykuje. Na tej stronie dostępne są ich najnowsze pluginy umożliwiające animacje wielu właściwości css, w tym właśnie text-shadow. Przykład poniżej:

Animujemy Cienie <- klinij tu

aby ten przykład zadziałał tak jak działa, potrzebne są pluginy color.js i textshadow.js (muszą być załączane w tej kolejności) z ww. strony oraz poniższy kod:

$("#ex5 span").click(function(){
  $(this)
  .animate({ textShadowX: 88 }, 1000)
  .animate({ textShadowY: 18 }, 1000)
  .animate({ textShadowColor: 'rgb(255, 0, 0)' }, 1000)
  .animate({ textShadowBlur: 13 }, 300);
 });

Niestety, nie działa to multi cienie, ale może coś jeszcze zmieni się w tej kwestii. Co do animacji pojedynczego cienia, to oczywiście można wykonywać wszystkie ruchy naraz, o tak:

Animujemy Cienie <- klinij tu

Kod do tego:

$("#ex6 span").click(function(){
 $(this)
  .animate({ 	textShadowX: 88,
   textShadowY: 18,
   textShadowColor: 'rgb(255, 0, 0)',
   textShadowBlur: 13  }
  , 1000);
});

Hura! Czyli udało nam się animować text-shadow w jQuery. Wielkie propsy dla pulgino twórców ;-)

PS. To, że cały wpis nie wywiera wrażenia na IE to zrozumiałe, ale nie bardzo rozumiem dlaczego Opera 10.63 ma problemy i z multi cieniami i z animacją. Tajemnicza sprawa.