05-02-2011 Saat: 01:24
Merhabalar;
Photoshop kullanananlar “drop shadow” efektini bilirler. Bilmeyenler için örnek olarak şu görseli sunabiliriz. Bunu yazılarımızda ve görsellerimizde kullanmak artık CSS3 ile çok basit bir hale geldi. Hemen başlayalım.
Öncelikle elimizde herhangi bir editör olması şart tabii ki
Bu özelliği destekleyen tarayıcılar ise şöyle;
Firefox 3.5+
Safari 3+
Google Chrome
Opera 10.50
Internet Explorer 5.5
Standart olarak kodumuz alttaki gibi. Yani bu kodu eklediğinizde Firefox’ta etkisini görebilirsiniz.
Açıklama: margin ve padding’ten aşina olduğumuz kullanım box-shadow elementinde de mevcuttur. Yani sırasıyla verilen değerler x-offset (3px) y-offset (3px) bulanıklık (blur) (4px) gölgenin kaç px boyutunda olacağını belirtmektedir. En sondaki #000 değeri ise gölgenin rengini gösterir. isterseniz #fff ve ya #252525 gibi değerler kullanabilirsiniz.
XHTML kullanımı ise;
Alttaki kullanımda ise x ve y offset değerleri belirlenip uygulamaya geçeceğiz. x ve y değerleri eksi değerleride alabilir. Örnek olarak
XHTML kullanımı:
Bu kod Firefox, Safari, Chrome ve Opera için geçerlidir.
Peki Internet Explorer ?
Benim gibi çoğu arayüz geliştiricinin ortak derdi Internet Explorer’dır. Çünkü yıllardır motorunu zerre kadar geliştirmediği için yeni nesil CSS3 ve HTML5 gibi teknolojileri tam anlamıyla desteklememekte. Explorer için ise çözüm yolumuz şu şekilde olacak.
XHTML kullanımı:
Bu da tamam peki tam uyumluluk nasıl olacak ?
Her tarayıcı için kullanabileceğimiz kod tüm kodların birleşimi aslında ancak herhangi bir hataya mahal vermemek için birleştirmekte fayda var.
XHTML kullanımı:
Şu an istediğiniz ayarları yaparak istediğiniz tarayıcıda uyum kaygısı olmadan kullanabilirsiniz.
Photoshop kullanananlar “drop shadow” efektini bilirler. Bilmeyenler için örnek olarak şu görseli sunabiliriz. Bunu yazılarımızda ve görsellerimizde kullanmak artık CSS3 ile çok basit bir hale geldi. Hemen başlayalım.
Öncelikle elimizde herhangi bir editör olması şart tabii ki
Bu özelliği destekleyen tarayıcılar ise şöyle;
Firefox 3.5+
Safari 3+
Google Chrome
Opera 10.50
Internet Explorer 5.5
Standart olarak kodumuz alttaki gibi. Yani bu kodu eklediğinizde Firefox’ta etkisini görebilirsiniz.
Kod:
.standartgolge {
box-shadow: 3px 3px 4px #000;
}XHTML kullanımı ise;
Kod:
<div class="standartgolge"> buraya yazı ya da görsel gelebilir</div>Alttaki kullanımda ise x ve y offset değerleri belirlenip uygulamaya geçeceğiz. x ve y değerleri eksi değerleride alabilir. Örnek olarak
Kod:
.gelismisgolge {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}Kod:
<div class="gelismisgolge"> buraya yazı ya da görsel gelebilir </div>Peki Internet Explorer ?
Benim gibi çoğu arayüz geliştiricinin ortak derdi Internet Explorer’dır. Çünkü yıllardır motorunu zerre kadar geliştirmediği için yeni nesil CSS3 ve HTML5 gibi teknolojileri tam anlamıyla desteklememekte. Explorer için ise çözüm yolumuz şu şekilde olacak.
Kod:
.explorergolge {
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}Kod:
<div class="explorergolge">buraya yazı ya da görsel gelebilir</div>Her tarayıcı için kullanabileceğimiz kod tüm kodların birleşimi aslında ancak herhangi bir hataya mahal vermemek için birleştirmekte fayda var.
Kod:
.tamuyumlugolge {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For I E 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For I E 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}Kod:
<div class="tamuyumlugolge">buraya yazı ya da görsel gelebilir</div>Şu an istediğiniz ayarları yaparak istediğiniz tarayıcıda uyum kaygısı olmadan kullanabilirsiniz.