kutu Gölge
CSS3 ile gölge efektleri oluşturabilirsiniz!
CSS3 Gölge Etkisi
CSS3 ile metne ve öğelere gölge ekleyebilir.
Bu bölümde aşağıdaki özellikleri hakkında öğreneceksiniz:
-
text-shadow -
box-shadow
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit- veya -moz- bir önek ile çalıştığım ilk versiyonunu belirtir.
| özellik | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3 Metin Gölge
CSS3 text-shadow mülkiyet metne gölge uygular.
En basit kullanım, yalnızca yatay gölge belirtmek (2px) ve dikey gölge (2px) :
Metin gölge efekti!
Daha sonra, gölge bir renk eklemek:
Metin gölge efekti!
Ardından, gölge bulanıklık efekti ekleyin:
Metin gölge efekti!
Aşağıdaki örnek siyah gölge beyaz metin gösterir:
Metin gölge efekti!
Aşağıdaki örnek kırmızı neon parıltı gölge gösterir:
Metin gölge efekti!
Birden Gölgeler
metne birden fazla gölge eklemek için, gölgelerin virgülle ayrılmış liste ekleyebilirsiniz.
Aşağıdaki örnek, bir kırmızı ve mavi neon parıltı gölge gösterir:
Metin gölge efekti!
Aşağıdaki örnek, siyah, mavi ve lacivert gölge beyaz metin gösterir:
Metin gölge efekti!
Örnek
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Kendin dene " CSS3 box-shadow Mülkiyet
CSS3 box-shadow mülkiyet elemanlarına gölgeyi uygular.
En basit kullanım, yalnızca yatay gölge ve dikey gölge belirtin:
Daha sonra, gölge bir renk eklemek:
Daha sonra, gölge bir bulanıklık efekti ekleyin:
Ayrıca gölgeler ekleyebilir :: sözde sınıfları sonra, ilginç bir etki yaratmak için :: öncesi ve:
Örnek
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} Kendin dene " Kartlar
Kullanımına bir örnek box-shadow kağıt benzeri kartları oluşturmak için özellik:
1
1 Ocak 2016
Hardanger, Norveç
Örnek
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Deneyin (Text Card) » Deneyin (Image Card) » Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »
CSS3 Gölge Özellikleri
Aşağıdaki tabloda CSS3 gölge özelliklerini listeler:
| özellik | Açıklama |
|---|---|
| box-shadow | bir elemanın bir veya daha fazla gölgeler ekler |
| text-shadow | Bir metne bir veya birden fazla gölgeler ekler |