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(https://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 CSS ile Grunge Yapıda Başlıklar

Ö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(https://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(https://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(https://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(https://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(https://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(https://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

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

Benzer Yazılar

Bağlantılar

Kategoriler