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.
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; |