Issuu on Google+

Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / CSS i l e After E ffects’e Ya kı n G eçi ş #1

CSS ile After Effects’e Yakın Geçiş #1 Vatanay Özbeyli tarafından 24 Kasım 2012 tarihinde yazıldı. ~ Yorum Yok + Değiştir

CSS ile görsellere verilen geçiş efektlerinden daha önce bahsetmiştik. Şimdi yavaş yavaş detaylandırıyoruz. Bu makalede sadece bir adet teknikten bahsedeceğim. Bu tekniği iki ayrı görsel tipi üzerinde uygulayıp sonuçları sizinle paylaşacağım. İlk olarak örneği görüntülemenizi öneririm.

Uygulama Tekniği kendi görselleriniz üzerine uygulamak için aşağıdaki kod satırlarını kullanmanız yeterli. İki geçiş tipini de bir arada paylaşıyorum. CSS Kodları 1 2 3 4

5 6 7 8 9 10 11 12 13 14 15 16 17 18

.kare-gorsel { width: 300px; height: 250px; background: url('http://www.adobewordpress.com/ads/300x250.jpg') no-repeat; background-position: 50% 50%; display: inline-block; border-width: 50px; border-color: rgba(0,0,0,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: .5s ease; -moz-transition: .5s ease; -ms-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; }


19 20 21 22

23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

.oval-gorsel { width: 80px; height: 80px; background: url('http://www.gravatar.com/avatar/bb8f102578e3143d28162b02ed96a81f.pn no-repeat; background-position: 50% 50%; display: inline-block; border-width: 40px; border-radius:100%; border-color: rgba(0,0,0,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: .5s ease; -moz-transition: .5s ease; -ms-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .kare-gorsel:hover,.oval-gorsel:hover { border-width: 0; border-color: rgba(0, 0, 0, 0.5); } .keskinlik{border-style: solid;}

HTML Kodları 1 <a href="#" class="kare-gorsel keskinlik"></a> 2 3 <a href="#" class="oval-gorsel keskinlik"></a>

Notlar border-width değeri height ve width değerinin yarısından daha az olursa görselin normal halinde taşmalar gözükür. Bu yüzden height,width>=2xborder-width diye bir denklem kurabiliriz. box-sizing ve transition alanına tarayıcı uyumu için moz web-kit gibi satırları da ekledim. İsteğe ve cesarete bağlı olarak kaldırabilirsiniz. border-color’ın son değeri (0,5) opacity alanıdır. İsteğe bağlı olarak değişebilir.

Benzer Konular: HTML5 ve CSS3 ile Yaprak Menü CSS ile Toogle Menü


Web Sayfanıza Etkileyici Giriş Paneli CSS ile Mükemmel Twitter Buttonu CSS3 ile Geçiş Efekti (Transition) Kullanarak Windows 8…

Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : awesome , css , CSS3 , efekt , efekti , effect , geçiş , görsel , html5 , image , kaliteli , super , transition


Css ile after effects'e yakın geçiş #1