CSS 3.0 ile gölgelendirme

Author: Kaan, Posted: 2011-02-08 15:06 GMT.

CSS 3.0 ile g?lgelendirme

CSS 3.0 ile gelen ?zellikler hepimizin g?zlerini kama?t?r?yor. Her ge?en g?n CSS ?zerine yazanlardan yeni bir?eyler ??reniyoruz. Bunlardan bir tanesi de Firefox 3.0'da rastlayamad???m?z ?zelliklerden bir tanesi olan g?lgeli yaz? yap?m?. Tabii ki bu ?zellik kendi javascript motorunu kullanan taray?c?lardan olan Mozilla Firefox (-moz), Safari ve Google'?n Chrome'unda (-web-kit-) d?zg?n ?al??abiliyor. Internet Explorer'?n yeni nesil taray?c?lara ula?abilmesi i?in 40 f?r?n ekmek yemesi gerekiyor.

?imdi ?rne?imize ge?elim;

Kod:

text-shadow: 1px 1px 1px #000;

Yaz? g?lgelendirme kodumuzu uygulad?k. ?imdi de bu koddaki de?erlerin a??klamas?n? yapal?m. ?lk vermi? oldu?umuz de?er, yaz? i?in ekledi?imiz g?lgeyi sa?a-sola hizalamak i?in kullan?l?yor. Sonraki de?er a?a??-yukar? hizalamak i?in ve son de?er ise g?lge kal?nl???n? ayarlamak i?in kullan?l?yor.

Yaz?ya g?lge verebildi?imiz gibi tabloya ya da farkl? bir elemente de g?lgelendirme ekleyebiliyoruz. ?al??ma mant??? ?stteki ile ayn? ?ekildedir.

Kod:

-moz-box-shadow: 2px 3px 5px #ccc;
-webkit-box-shadow: 2px 3px 5px #ccc;

Tekrar hat?rlatmakta fayda var. Bu ?zellik yaln?zca Firefox 3.5, Apple Safari ve Google Chrome taray?c?lar?nda ?al??maktad?r. Internet Explorer hen?z b?yle bir ?zelli?i desteklememektedir.