CSS3 ile Geçiş Efekti (Transition) Kullanarak Windows 8 Tarzında Kutucuklar Hazırlamak

Her geçen gün JavaScript pastasından bir ısırık daha alan CSS gelişimini sürdürüyor. Bu makalemde ise CSS’in öne çıkan elementlerinden olan geçişleri (transitions) konuşacağız.

Bu yeni kod sistemi sayesinde iki renk, boyut, ölçeklendirme gibi birimler arasında geçiş sağlayabiliyoruz.

Özellikle son günlerde herkesin beğenisini kazanan Windows 8 benzeri menü örnekleri de konumuzun bir parçası.

Makalemize önemli örneklerle ve incelenmesi gereken kaynaklarla devam edelim :

ÖRNEĞİ GÖRÜNTÜLE

 

Örnek 1 : Fiziksel Büyüme Örneği Test Et

CSS ile bir kutu hazırlıyoruz. Ve transition sayesinde kutunun üzerine gelince büyümesini sağlıyoruz.

#aw_table1{
width:100px;
height:100px;
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
background:#666;
}

#aw_table1:hover{width:300px;}

Yukarıdaki kodları CSS dosyamızda veya <style type=”text/css”>BURAYA</style> tagları arasına yazıyoruz.

<div id="aw_table1"></div>

Yukarıdaki kodları ise <body>BURAYA</body> tagları arasına yazıyoruz.

 

Örnek 2 : Şekil Değiştirme / Dönme Test Et 

CSS ile bir kutu hazırlıyoruz. Ve transition sayesinde kutunun üzerine gelince büyümesini ve dönmesini sağlıyoruz.

#aw_table2{
width:100px;
height:100px;
background:#666;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, -o-transform 2s;
}

#aw_table2:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
}

Yukarıdaki kodları CSS dosyamızda veya <style type=”text/css”>BURAYA</style> tagları arasına yazıyoruz.

<div id="aw_table2"></div>

Yukarıdaki kodları ise <body>BURAYA</body> tagları arasına yazıyoruz.

 

Örnek 3 : Renklendirme Test Et

CSS ile bir kutu hazırlıyoruz. Ve transition sayesinde kutunun üzerine gelince renk değiştirmesini sağlıyoruz.

#aw_table3 a{
transition:background .3s ease,background .3s linear;
-moz-transition:background .3s ease,background .3s linear;
-o-transition:background .3s ease,background .3s linear;
-webkit-transition:background .3s ease,background .3s linear;
-ms-transition:background .3s ease .3s
}

#aw_table3 a{font:bold 12px Arial, Helvetica, sans-serif; background-color:#666; color:white; padding:15px 50px 15px 50px;margin:0px; text-decoration:none;}
<span style="font-family: Consolas, Monaco, monospace;">
</span>#aw_table3 a.birinci:hover{background-color:#d93d4a;}
#aw_table3 a.ikinci:hover{background-color:#3d69d9;}
#aw_table3 a.ucuncu:hover{background-color:#3dd96d;}
#aw_table3 a.dorduncu:hover{background-color:#d9ba3d;}

Yukarıdaki kodları CSS dosyamızda veya <style type=”text/css”>BURAYA</style> tagları arasına yazıyoruz.

<div id="aw_table3">
<a href="#" class="birinci">Link 1</a><a href="#" class="ikinci">Link 2</a><a href="#" class="ucuncu">Link 3</a><a href="#" class="dorduncu">Link 4</a>
</div>

Yukarıdaki kodları ise <body>BURAYA</body> tagları arasına yazıyoruz.

 

Örnek 4 : Kayarak Gelen İkon Test Et

CSS ile bir kutu hazırlıyoruz. Ve transition sayesinde kutunun içinde tanıtım ikonunun kaymasını sağlıyoruz.

#aw_table4 a{
font:bold 14px Arial, Helvetica, sans-serif; background-color:#666; color:white; padding:15px 50px 15px 50px;margin:0px; text-decoration:none;
transition:background .3s ease,background .3s linear;
-moz-transition:background .3s ease,background .3s linear;
-o-transition:background .3s ease,background .3s linear;
-webkit-transition:background .3s ease,background .3s linear;
-ms-transition:background .3s ease .3s
}

#aw_table4 a:hover{background:#548e63 url(http://www.adobewordpress.com/wp-content/uploads/2012/10/mask-photoshop-icon.png) 95% 50% no-repeat;}

Yukarıdaki kodları CSS dosyamızda veya <style type=”text/css”>BURAYA</style> tagları arasına yazıyoruz.

<div id="aw_table4"><a href="#">Link</a></div>

Yukarıdaki kodları ise <body>BURAYA</body> tagları arasına yazıyoruz.

 

Bu da ilginizi çekebilir  Yatay <li> Elemanlarını Nasıl Ortalarız?

Örnek 5 : Görsel Büyütme ve Geçiş Test Et

CSS ile bir kutu hazırlıyoruz. Ve transition sayesinde kutunun içindeki görseli büyütüp renklendiriyoruz. Burada birden fazla resim kullandığımıza dikkat!

#aw_table5{
background:url(http://www.adobewordpress.com/wp-content/themes/themolio/images/footer_logo.png) 100% 100% no-repeat;
width:140px;
height:62px;
margin:0 auto;
transition:background .3s ease,background .3s linear;
-moz-transition:background .3s ease,background .3s linear;
-o-transition:background .3s ease,background .3s linear;
-webkit-transition:background .3s ease,background .3s linear;
-ms-transition:background .3s ease .3s
}

#aw_table5:hover{
background:url(http://www.adobewordpress.com/wp-content/themes/themolio/images/logo.png) 100% 100% no-repeat;
width:192px;
height:85px;}

Yukarıdaki kodları CSS dosyamızda veya <style type=”text/css”>BURAYA</style> tagları arasına yazıyoruz.

<div id="aw_table5"></div>

Yukarıdaki kodları ise <body>BURAYA</body> tagları arasına yazıyoruz.

 

Örnek 6 : Windows 8 Kutucukları Test Et

CSS ile bir kutu hazırlıyoruz. Ve transition sayesinde Windows 8 kutucukları hazırlıyoruz.

#aw_table6{
font:bold 14px Arial, Helvetica, sans-serif;
background:#666 url(http://www.adobewordpress.com/wp-content/themes/themolio/images/footer_logo.png) 50% 60% no-repeat;
color:white;
width:200px;
height:100px;
padding:10px;
text-decoration:none;
transition:background .3s ease,background .3s linear;
-moz-transition:background .3s ease,background .3s linear;
-o-transition:background .3s ease,background .3s linear;
-webkit-transition:background .3s ease,background .3s linear;
-ms-transition:background .3s ease .3s
}

#aw_table6:hover{background:#548e63 url(http://www.adobewordpress.com/wp-content/themes/themolio/images/logo_smaller.png) 50% 60% no-repeat;}

Yukarıdaki kodları CSS dosyamızda veya <style type=”text/css”>BURAYA</style> tagları arasına yazıyoruz.

<div id="aw_table6">AdobeWordPress.com</div>

Yukarıdaki kodları ise <body>BURAYA</body> tagları arasına yazıyoruz.

 

Örnek 7 : Yanyana Dizilen Menü Test Et
Ali Başak isimli arkadaşımızın isteği üzerine ;

HTML Kodlarımız

<ul>
<li>Adobe Programları</li><li>WordPress</li><li>CSS3 Dersleri</li><li>HTML5 Dersleri</li><li>Tasarım Unsurları</li>
</ul>

CSS Kodlarımız

li{
margin:0 auto;
position: relative;
display: inline-block;
font:bold 14px Arial, Helvetica, sans-serif;
background:#666 url(http://www.adobewordpress.com/wp-content/themes/themolio/images/footer_logo.png) 50% 60% no-repeat;
color:white;
width:150px;
height:90px;
padding:3px;
text-decoration:none;
transition:background .3s ease,background .3s linear;
-moz-transition:background .3s ease,background .3s linear;
-o-transition:background .3s ease,background .3s linear;
-webkit-transition:background .3s ease,background .3s linear;
-ms-transition:background .3s ease .3s
}

li:hover{background:#548e63 url(http://www.adobewordpress.com/wp-content/themes/themolio/images/logo_smaller.png) 50% 60% no-repeat;}

Önemli Notlar

  • CSS Transition’ın time fonksiyonu ile birlikte çalıştığını unutmayın. Bu fonksiyonu tam olarak anlamak için burayı okuyun. Diliniz yeterli değilse bile örneği görüntüleyin yeter. http://www.the-art-of-web.com/css/timing-function/
  • Buradan W3 kaynağı üzerinden genel açıklamaları ve çalışma prensiplerini görüntüleyebilirsiniz. http://www.w3.org/TR/css3-transitions/
  • Geçişler için sorun yaratan browserların başında Internet Explorer geliyor. Eğer profesyonel bilgisayar kullanıcısına hitap etmeyen web sayfalarınız varsa transition ve filter terimlerinden uzak durmanızı öneririm.
  • W3Schools ‘da yayınlanan makaleye ise buradan erişebilirsiniz : http://www.w3schools.com/css3/css3_transitions.asp

CSS Transitions ile kullanılabilecek terimler : background-color, background-position , border-bottom-color , border-bottom-width , border-left-color , border-left-width , border-right-color , border-right-width , border-spacing , border-top-color , border-top-width , bottom , clip , color , font-size , font-weight , height , left , letter-spacing , line-height , margin-bottom , margin-left , margin-right , margin-top , max-height , max-width , min-height , min-width , opacity , outline-color , outline-offset , outline-width , padding-bottom , padding-left , padding-right , padding-top , right , text-indent , text-shadow , top , vertical-align , visibility , width , word-spacing , z-index



  • Ali Başak

    Merhabalar öncelikle paylaşımlarınız için teşekürler ve okadar çok uğraştım ki başım döndü gerçekten :)) css konusunda kötü olunca böyle oluyo sanırım 🙂 sizinde paylaştığınız resimdeki gibi bir kategori alanı yapmak istiyorum ve bunun için 6 numaralı kodları kullanmak istedim wp ye entegre ediyorum fakat bu kutuları nasıl çoğaltıp link vericez yani resimdede olduğuğu gibi farklı iconlar ekleyip kategori isimleri vericem ve renk kodlarını değiştiricem ama birtürlü çözemedim :S yardımcı olursanız gerçekten sevinirim.

    • 6.örneğin kodlarını alıp üzerinde çalışmanız gerekiyor. Kodların içerisinde ek görsellerin URL adresleri de mevcut. Fakat bu işlemler için az da olsa html ve css bilgisi gerekiyor.

      • Ali Başak

        Öncelikle cevabınız için teşekürler fakat takıldığım nokta zaten görseller kısmı değil onları değiştirip boyutunuda istediğim şekle getiririm anca onları yapacak kadar bilgi var zaten :)) Sıkıntılı olan kısım sürekli aynı css kodunu farklı farklı kaydetip bunu yapmak heralde saçmalık olurdu 🙂 o yüzden size yazma gereği duydum fazla css bilgim olmadığı için temel html bilgisi var ama css e biraz yabancıyım malesef. Kısaca 6 numaralı konuyu 3 numaralı gibi nasıl çoğaltıcaz biraz daha yardımcı olabilmeniz mümkünmü acaba ? 🙂

  • Ali Başak

    Hocam başınızı ağrıtıyorum ama her saat hatta dk da bir bakıyorum desem yeridir yani kaç gündür yardımcı olup olmuyacağınızı söyleseniz, o şekilde 2 li bi örnek yapsanız ben çoğaltırım zaten. konuyu biraz daha açsanız yani 🙂 Veya şuan vaktiniz yoksada uğraşamıyorsanız söyleyin bakmıyım her saat 😀 Yani denemediğim şey kalmadı kodlarla 🙂

    • 7. bir örnek daha hazırladım. Onu da test adresine ekledim. Umarım doğru anlamışımdır.

      • Ali Başak

        Çok Teşekürler Şuan telden giriyorum cevabınızı görünce sevindim gerçekten 🙂 Deneyip yine yorum olarak son durumuda paylaşırım 🙂

  • Codegene

    Eyvallah Kardeşim İşime Yaradı Teşekkür Ederim.