CSS ile After Effects’e Yakın Geçiş #1

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.

ÖRNEĞİ GÖRÜNTÜLE

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ı

.kare-gorsel {
width: 300px;
height: 250px;
background: url('https://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;
}

.oval-gorsel {
width: 80px;
height: 80px;
background: url('https://www.gravatar.com/avatar/bb8f102578e3143d28162b02ed96a81f.png') 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ı

<a href="#" class="kare-gorsel keskinlik"></a>

<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.