CSS3 Görüntü Yansıması [CSS3 İpuçları]
Şimdiye kadar, birçok yeni özelliği tartıştık. CSS3. Bunun ötesinde, aslında şu anda denenmeye değer, CSS3 resmi şartnamelerine dahil edilmeyen birkaç özellik daha var. kutu yansıtmak tarafından başlatılan mülk Webkit. Bu özellik belirtilen nesnelere yansıtabilir.
Temel yansıma
Temel uygulama oldukça sezgiseldir; Diyelim ki, gerçek nesnenin altındaki yansımayı istiyoruz. Yazabiliriz:
img -webkit-box-reflect: aşağıda;
Bu örnek bir görüntüyü nasıl yansıttığımızı gösterir altında (pozisyon) nesne. Ancak, bu durumda, biz de yansıması tutabilir sağ, ayrıldı, ve yukarıdaki.
Yansıma Ofseti
dengelemek yansıma ile yansıtılan gerçek nesne arasındaki boşluğu tanımlamak için kullanılır. Aşağıdaki kod parçacığını görelim;
img -webkit-box-reflect: 10 pikselin altında;
Yukarıdaki kodda, yansımayı gerçek nesneden ayırdık. 10px;
- Demoyu Gör
Degradelerle Maskeleme
Yaygın olarak gördüğümüz yansıma etkisi, alttaki solma ve gerçek nesnenin yalnızca yarısını veya daha azını gösteren görüntüdür. Bu tür bir etkiyi çoğaltmak için uygulayabiliriz. CSS3 Degradeleri nesneyi maskelemek, bunun gibi;
-webkit-box-reflect: 0px -webkit gradientinin altında (doğrusal, sol üst, sol alt, (saydam), ila (rgba (250, 250, 250, 0.1)));
Bu kod aşağıdaki sunumla sonuçlanacaktır;
Biz de kullanabilirsiniz Renk-stop geçişleri kontrol etmek ve yansımayı daha güzel göstermek için:
img -webkit-box-reflect: altında 0px -webkit-gradyan (doğrusal, sol üst, sol alt, (saydam), renk durması (% 70, saydam), ila (rgba (250, 250, 250, 0,1) )));
- Demoyu Gör
Firefox için alternatifler
Ancak bu özellik şu anda yalnızca Webkit tarayıcılarında (Safari ve Chrome anlamına gelir) çalışmaktadır. Aynı efekti Firefox’ta sunmak için başka bir rotaya ihtiyacınız var: -Moz-elemanın () işlevi. Bu işlev esas olarak içeriği belirli HTML öğelerinden üretecek veya çoğaltacaktır. Aşağıdaki örneğe bir göz atalım;
Sarılmış bir görüntümüz var Ve, yansıma tutmak için kullanacağız Ne yazık ki, hala oluşturmak için kolay bir yol yoktur Güzel Firefox'ta bu uygulamayı kullanarak yansıma etkisi. Yukarıdaki kod, solma efekti olmadan basitçe yansıma yaratacaktır.moz-yansıtacak İD;
:sonra sözde eleman, aşağıdaki gibi; # moz-reflect: after content: ""; Ekran bloğu; background: -moz-element (# moz-reflect) no-tekrar; genişlik: otomatik; yükseklik: 375px; marj-alt: 100 piksel; -moz-dönüşümü: ölçek Y (-1);
-Moz-transform Negatif ölçek ile oluşturulan nesneyi baş aşağı çevirmek için kullanılır. Ayrıca, emin olun yükseklik gerçek nesnenin yeterince hassas yükseklik yansımayı konumlandırmak için gereksiz fazladan satırları önlemek için.Diğer Referanslar
