Stíny pod elementy pomocí CSS3 ve všech prohlížečích

Středa, Září 21, 2011
Stín pod elementem

Stín pod elementem

Dnes se opět budeme věnovat možnostem CSS3 a knihovně PIE. V minlých článcích jsme si pověděli jak vytvořit kulaté rohy, na co si dát u knihovny PIE pozor a jak vytvářet lineární přechody. Dnes si povíme jak na stíny pod blokovými elementy.

Dříve se pro vytvoření stínů využívaly obrázky na pozadí, které vypadaly jako stín. Poměrně obtížně se tak řešily případy, kdy na pozadí byl přechod nebo nějaký vzorek. Zjednodušení přinesly PNG obrázky a jejich poloprůhlednost, se kterou však byly vždy problémy v internet exploreru. V CSS3 je možné vytvořit stín pod blokovým elementem jednoduchým příkazem:

box-shadow: #666 0px 2px 3px;

Jednotlivé části příkazu znamenají následující:

box-shadow: barva-stínu posunutí-ve-směru-x posunutí-ve-směru-y šířka-rozmazání;

Stejně jako tomu bylo u definice kulatých rohů i u lineárního přechodu na pozadí, tak ani zde není tato vlastnost standardně podporována a je nutno využít vendor prefixy jednotlivých prohlížečů. V případě internet exploreru opět využijeme knihovnu PIE. Celý zápis fungující ve všech webových prohlížečích bude vypadat takto:

-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);

Soubor PIE.htc si můžete stáhnout na oficiálních stránkách a musí být umístěn v kořenovém adresáři daného webu. Jak na knihovnu PIE se můžete dočíst v článku o kulatých rozích nebo v dalších článcích o PIE zde.

Vykreslení stínu, kulatých rohů a přechodu na pozadí je samozřejmě možné libovolně kombinovat. V případě problémů si zkuste přečíst článek na co si dát u PIE pozor.

 

Napsat komentář