CSS3 backface-visibility Özelliği

CSS3 backface-visibility

Css backface-visibility özelliği ile döndürülmüş bir div kutusunun arka yüzünün görünürlüğü kontrol edilebilir.

Örnek:

Bu örnekte iki tane div kutusu y ekseninde 180 derece döndürülmüştür. Birine visible diğerine ise hidden değeri uygulanmıştır.Özelliğin etkisini öğrenmek için kendiniz deneyin tuşuna tıklayınız.

div { backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ }

CSS3 backface-visibility nedir nasıl kullanılır

transform özelliği uygulanan div kutularının arka kısımlarının görünürlüğünü düzenleyen bir özelliktir.
CSS backface-visibility CSS backface-visibility özellikleri  
Varsayılan Değer: visible  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS3  
JavaScript backface-visibility: object.style.backfaceVisibility="hidden"

CSS3 backface-visibility Tarayıcı Desteği

CSS Kodu:
backface-visibility 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-

CSS3 backface-visibility Değerleri

backface-visibility:paused|running|initial|inherit;

CSS3 backface-visibility özelliği değerleri

CSS backface-visibility values CSS backface-visibility değerleri tanımları CSS Örnek Uygulamalar
visible Visible değeri kutuların veya html elemanının arka yüzünün görünmesini sağlar.
hidden Hidden değeri kutuların veya html elemanının arka yüzünün görünmemesini sağlar.
initial Başlangıç varsayılan değerini taşımasını sağlar  
inherit Eğer kalıtsal özelliği var ise soy bağından değeri uygulayan değerdir.  

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML details Etiketi

<details> Etiketi Örnek <details> elementinin kullanımı: < details >   < summary > Copyright 2015 < /summary >   < p > Tüm hakları saklıdır. < /p >   < p > İçeriğin izinsiz olarak veya kaynak gösterilmeden alıntılanması yasaktır. < /p > < /details > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <body> <details> <summary>Copyright 2015</summary> <p>Tüm hakları saklıdır.</p> <p>Sitedeki içeriklerin ve görsellerin izinsiz olarak veya kaynak gösterilmeden alıntılanması yasaktır.</p> </details> <p><b>Not:</b>
Devamı Oku »

HTML em Etiketi

<em> Etiketi Örnek <em> etiketi ile metni vurgulama: < em > Vurgulanmış yazı < /em > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <body> <em>Vurgulanmış metin</em> <br /> <strong>Önemli metin</strong> <br /> <code>Bilgisayar kodları</code> <br /> <samp>Bir bilgisayar programının örnek çıktısı</samp> <br /> <kbd>Klavye girişi</kbd> <br /> <var>Değişkenler (Variables)</var> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegi
Devamı Oku »

Linklerin Renklerini Değiştirme Örnek

<!DOCTYPE html> <html> <head> <style> a:link { color: green; background-color: transparent; text-decoration: none } a:visited { color: brown; background-color: transparent; text-decoration: none } a:hover { color: red; background-color: transparent; text-decoration: underline } a:active { color: orange; background-color: transparent; text-decoration: underline } </style> </head> <body> <p>Linklerin varsayılan renklerini değiştirebilirsiniz.</p> <a href="http://htmlvecssegitimi.blogspot.com/2016/01/html-link-rengi-degistirme-ornek.html" target="_blank">HTML Link Rengi Değiştirme Örneği</a> </body> </html>
Devamı Oku »

HTML center Etiketi

<center> Etiketi Örnek Bir HTML sayfasında ortaya hizalanmış metin: < center > Bu yazı ortaya hizalanacaktır. < /center > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <body> <p>Bu bir yazıdır.</p> <center>Bu yazı ortaya hizalanacaktır.</center> <p>Bu bir yazıdır.</p> <p>Center elementi HTML5'te desteklenmiyor. Yerine CSS kullanabilirsiniz.</p> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <center> Tanımı ve Kullanımı HTML 5'te desteklenmiyor.Ye
Devamı Oku »

HTML dir Etiketi

<dir> Etiketi Örnek Bir dizin listesi: < dir >    < li > HTML < /li >    < li > XHTML < /li >    < li > CSS < /li > < /dir > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <body> <dir> <li>HTML</li> <li>XHTML</li> <li>CSS</li> </dir> <p><b>Not:</b> dir elementi HTML5'te desteklenmiyor. Yerine CSS kullanın.</p> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <dir> Tanımı ve Kul
Devamı Oku »

HTML canvas Etiketi

<canvas> Etiketi Örnek canvas etiketleri arasına mavi bir kare çizimi: < canvas id= "myCanvas">< /canvas > < script > var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#3059D6"; ctx.fillRect(0, 0, 80, 100); < /script > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <body> <canvas id="myCanvas">Tarayıcınız HTML5 canvas elementini desteklemiyor.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#3059D6";
Devamı Oku »

CSS content Özelliği

CSS content Css content özelliğini sayfaya seçilen elemandan önce veya sonrasında içerik eklemek için kullanılabilir. Örnek: Bu örnekte bir linkin title değerini linkten önce yazmak için content özelliği uygulanmıştır. a:before { content: " (" attr(title) ")"; color: red; font-size: 1.1em; } Kendiniz deneyin » CSS content nedir nasıl kullanılır Css content ile seçilen html elemanından önce veya sonrasında bir url ,resim, içerik, tırnak işareti gibi elemanlar eklenebilir. CSS content CSS content özellikleri   Varsayılan Değer: normal   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS2   JavaScript content: Açıklama Oynat CSS content Tarayıcı Desteği Tablodaki sayılar özelliği tam destekleyen ilk tarayıcı sü
Devamı Oku »

HTML Element Referansları

HTML Etiketleri Kategorilere Göre Aşağıdaki tablolarda HTML etiketleri nin tamamını kullanım alanı kategorilerine göre düzenlenmiş şekilde inceleyebilirsiniz. HTML 5 ile birlikte yeni gelen etiketler ve HTML 5'te desteklenmeyen etiketler de tablolara dahildir. = HTML5'te yeni. HTML Temel Etiketleri Etiket Tanım <!DOCTYPE> Belge türü bildirimini ifade eder <html> HTML belgesi olduğunu ifade eder <title> Belge için başlığı ifade eder <body> Belgenin gövdesini ifade eder <h1> - <h6> HTML başlıklarnı ifade eder <p> Paragrafı ifade eder <br> Satır sonunu ifade eder <hr> Konu sonu anlamına gelen yatay çizgiyi ifade eder <!--...--> Kaynak kodundaki bir yorumu ifade eder Biçimlendirme Etiketleri Etiket Tanım <acronym> HTML 5&#
Devamı Oku »