CSS Görüntü Yansıması
Bu bölümde bir görüntüyü nasıl yansıtacağınızı öğreneceksiniz.
CSS Görüntü Yansımaları
Özellik box-reflect
, bir görüntü yansıması oluşturmak için kullanılır.
Özelliğin değeri box-reflect
şunlar olabilir: below
, above
,
left
veya right
.
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Örnekler
Örnek
Burada görüntünün altındaki yansımayı istiyoruz:
img {
-webkit-box-reflect: below;
}
Örnek
Burada görüntünün sağındaki yansımayı istiyoruz:
img {
-webkit-box-reflect: right;
}
CSS Yansıma Ofseti
Görüntü ve yansıma arasındaki boşluğu belirtmek için, boşluğun boyutunu box-reflect
özelliğe ekleyin.
Örnek
Burada, 20 piksellik bir ofset ile görüntünün altındaki yansımayı istiyoruz:
img {
-webkit-box-reflect: below 20px;
}
Gradyanlı CSS Yansıması
Yansıma üzerinde bir solma efekti de yaratabiliriz.
Örnek
Yansıma üzerinde bir solma efekti yaratın:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}