CSS’de nesnelere gölge efekti uygulamak için en sık kullanılan css özelliklerinden biridir. Bu makalemizde css box shadow özelliğini örnekli olarak sizlere anlatmaya çalışacağım.
İçerik
göster
CSS – Box-Shadow Özelliği
Syntax – Sözdizimi
1 | box-shadow: none|yatay-golge dikey-golge bulanıklık yayılma renk |inset|initial|inherit; |
Box-Shadow özellikleri
| Özellike | Açıklama |
|---|---|
| none | box-shadow özelliğinin olmayacağını belirtmek için kullanıyoruz |
| yatay-gogle | yatayda gölgenin nesneye olan uzaklığı |
| dikey-golge | dikeyde gölgenin nesneye olan uzaklığı |
| bulanıklık | gölgenin bulanıklık oranı |
| yayılma | gölgenin yayılma oranı |
| renk | gölgenin rengi(hex,rgba,safe colours, rgb, hsl, hsla) |
| inset | iç gölge oluşturmak için kullanılmalı |
| initial | |
| inherit |
Örnek
Örneğimizde bir p içerisine R yazdırıp p etiketi classına’da box-shadow’umuzun bulunduğu ornek-r adlı class’ımızı yazacağız sonucu ise Altta sonuc kısmında Result sekmesinden görebilirsiniz.
Html Kodu
1 | <p>R</p> |
Css Kodu
1 2 3 4 5 6 7 8 9 10 11 | /*Golge için yazılmış kodlar*/ -moz-box-shadow: 5px 5px black; -webkit-box-shadow: 5px 5px black; box-shadow: 5px 5px black; /*Görünüm için yazılmış kodlar*/ padding:10px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border: 1px solid gray; |
