Mustafa Yılmaz
Kullanıcı
Acemi üye
365-Gündür-Beraberiz!
Acemi Yatırımcı
Çaylak Üye
5 Yıldır Beraberiz
Bronz Üye
10 Yıldır Beraberiz
Doğrulanmamış Hesap
Silver Üye
Gold Üye
1
- Katılım
- 29 Eyl 2012
- Mesajlar
- 1,022
- Tepkime puanı
- 0
Çalışma Prensibi
Örnek Kod : box-shadow: 10px 10px 5px #888;
Gölge kod sisteminin nasıl çalıştığına dair temel örneklerle başlayalım.
Klasik Gölge (Drop Shadow)
Dahili Gölge (Inner Shadow)
Tek Taraflı Gölge (One Side Shadow)
Dışa Dağılım (Outer Glow)
Örnek Kod : box-shadow: 10px 10px 5px #888;
- Yatay uzantı gölgenin sağ tarafa doğru uzanmasını sağlar. Negatif değerler kullanmanız sol kısma doğru eğim sağlar.
- Dikey uzantı aşağıya doğru gölgelendirme yapar. Negatif değerler yukarıya doğru eğim sağlar.
- Bulanıklık (opsiyonel), eğer 0 olarak ayarlarsanız gölge çok sert olur. Gölgenin yumuşaklığını belirtiyoruz.
- Yayılış (opsiyonel), gölgenin yayılış miktarını belirler./li>
- Renklendirme ile de gölgeyi renklendiriyoruz.
Gölge kod sisteminin nasıl çalıştığına dair temel örneklerle başlayalım.
Klasik Gölge (Drop Shadow)
- CSS Kodu
1
div{
2
-moz-box-shadow:5px 5px 15px 3px #666;
3
-webkit-box-shadow: 5px 5px 15px 3px #666;
4
box-shadow: 5px 5px 15px 3px #666;
5
}
- HTML Kodu
1
<div>Klasik Gölge</div>
Dahili Gölge (Inner Shadow)
- CSS Kodu
1
div {
2
-moz-box-shadow:inset 0 0 20px #000000;
3
-webkit-box-shadow: inset 0 0 20px #000000;
4
box-shadow: inset 0 0 20px #000000;
5
}
- HTML Kodu
1
<div>Dahili Gölge</div>
Tek Taraflı Gölge (One Side Shadow)
- CSS Kodu
1
div {
2
-webkit-box-shadow: 0 11px 8px -6px #666;
3
-moz-box-shadow: 0 11px 8px -6px #666;
4
box-shadow: 0 11px 8px -6px #666;
5
}
- HTML Kodu
1
<div>Tek Taraflı Gölge</div>
Dışa Dağılım (Outer Glow)
- CSS Kodu
1
div {
2
-webkit-box-shadow: 0 0 6px 4px #666;
3
-moz-box-shadow: 0 0 6px 4px #666;
4
box-shadow: 0 0 6px 4px #666;
5
}
- HTML Kodu
1
<div>Dışa Dağılım</div>
adobewordpress.com dan alıntıdır.
