CSS3 columns animasyon

Aralık 09, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #kutu-1 { border: 1px solid gray; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; } @-webkit-keyframes animasyonismi { 50% {-webkit-columns: 80px 3;} } @-keyframes animasyonismi { 50% { -moz-columns: 80px 3; columns: 80px 3; } } </style> </head> <body> <strong>css columns animasyon</strong> <div id="kutu-1"> CSS columns özelliği ile birlikte sütular arası genişlik ve sütunların adeti belirtilerek makaleyi hızlı bir şekilde çok sütunlu yapıya kavuşturabiliriz.CSS columns özelliği ile birlikte sütular arası genişlik ve sütunların adeti belirtilerek makaleyi hızlı bir şekilde çok sütunlu yapıya kavuşturabiliriz. Bu örnekte <code>columns: 80px 3;</code> değerikullanılmıştır. </div> <mark>css columns</mark> özelliği, sütunların genişliğini ve sayısını belirtmek için kullanılır. <p> <em style="color:red;font-weight:bold;">css columns özelliğinin animasyon özelliği vardır.</em> <br /> <strong> CSS Animasyonları</strong> Internet Explorer 9 ve önceki versiyonlarında çalışmıyor..</p> <p>CSS columns özelliğini Firefox Desteklemiyor!</p> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    #kutu-1 {
        border: 1px solid gray;
        -webkit-animation: animasyonismi 4s infinite; 
        animation: animasyonismi 4s infinite;
    }
    
    @-webkit-keyframes animasyonismi {
        50% {-webkit-columns: 80px 3;}
    }
    
    @-keyframes animasyonismi {
        50% {
            -moz-columns: 80px 3; 
            columns: 80px 3;
        }
    }
  </style>
</head>

<body>
  <strong>css columns animasyon</strong>
  <div id="kutu-1">
    CSS columns özelliği ile birlikte sütular arası genişlik ve sütunların adeti belirtilerek makaleyi hızlı bir şekilde çok sütunlu yapıya kavuşturabiliriz.CSS columns özelliği ile birlikte sütular arası genişlik ve sütunların adeti belirtilerek makaleyi
    hızlı bir şekilde çok sütunlu yapıya kavuşturabiliriz. Bu örnekte <code>columns: 80px 3;</code> değerikullanılmıştır.

</div>
  <mark>css columns</mark> özelliği, sütunların genişliğini ve sayısını belirtmek için kullanılır.
  <p>
    <em style="color:red;font-weight:bold;">css columns özelliğinin animasyon özelliği vardır.</em>
    <br />
    <strong> CSS Animasyonları</strong> Internet Explorer 9 ve önceki versiyonlarında çalışmıyor..</p>
  <p>CSS columns özelliğini Firefox Desteklemiyor!</p>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS3 columns animasyon

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

İnternetten Para Kazanmanın Yolları -İnternetten Para Kazandıran Siteler -İnternetten Nasıl Para Kazanılır

HTML link Etiketi

HTML area Etiketi

HTML pre Etiketi

HTML i Etiketi

HTML Dersleri

HTML code Etiketi

HTML center Etiketi

HTML head Etiketi

HTML style Etiketi