Css box shadow özelliği ile kutulara resimlere vs gölge efekti verme

box-shadow özelliği ile oluşturduğumuz resim , kutu gibi nesnelere gölge verebiliriz. Tarayıcalarda farklı türde çalışır.


Opera ve Internet Explorer 9+ için 

.gölge { box-shadow: 5px 5px 5px #000; }


Chrome ve Safari için 

.gölge { -webkit-box-shadow: 5px 5px 5px #000; }


Firefox için

.gölge { -moz-box-shadow: 5px 5px 5px #000; }

 

Explorer için

  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=155, Color= #000000 )";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=155, Color= #000000 );

 


box-shadow:  5px 5px 8px  #555;
box-shadow:  sol sağ | Yukarı Alt | Gölge Derinliği | renk ;

şeklinde kullanılır.

<style>
.golge{
    border:1px solid #009;
    width:360px;
    height:30px;
    color:#003;
    text-align:center;
    line-height:30px;
    padding-left:30px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
background-color:#096;
    
    }
</style>

<div class="golge">Boz-shadow (GÖLGE) ÖZELLİĞİ </div>

Programın Çıktısı

Box-shadow (GÖLGE) ÖZELLİĞİ

Mesaj ve Yorumlar

Yorum Sayısı (0)

ÜYE YORUMLARI

Çevrimiçi :
11
Günlük :
81
Haftalık :
321
Aylık :
1110
Copyright © 2010 İşbara Alp Sönmez – Programlama Örnekleri. Her hakkı saklıdır. www.alpsonmez.com Bu sitedeki herhangi bir içeriğin, "herhangi bir sitede veya forumda" iznim dışında paylaşım yapılması durumunda hukuki dava açacağımı tarafınıza arz ederim. "Öğrenciler dilediği gibi kullanabilir."