Bugün sizlerle HTML5 ile gelen figure ve figcaption tanımlarını CSS3’ün animasyon öğeleriyle süsleyerek şık resim açıklamaları oluşturacağız. Bu işlemi daha önce, HTML5 öğeleri olmadan benzer yollarla “CSS ile SEO ve performans dostu harika resim açıklamaları” başlığı altında hazırlamıştık. Eski makalemizi güncellemektense bu süreçte gelişen teknolojinin nimetlerinden yararlanarak yenisini hazırlamaya karar verdik.
HTML5 ve CSS3 kullanarak resim açıklamaları nasıl hazırlanır?
Öncelikle ‘niye HTML5 tanımları?’ sorusunun cevabını hatırlayalım. Birçok arama motoru öncesinde ALT ve TITLE açıklamaları için gösterdiği dikkati artık figür öğeleri için de göstermekte. Bu yüzden figure ve figcaption kullanmak faydalı.
Hazırlanışında ise temel mantık figcaption içerisindeki resim açıklamasını varsayılan seçeneklerde gizlemek. Üzerine gelindiğinde (hover) göstermek. Ayrıca yine hover işlemi için de ilgili resmin büyümesi gibi bir aksiyon da yapacağız. Bu da tasarımımıza hem etkileşim hem de şık bir görüntü katacak.
CSS Kodları
İlk olarak figure içerisinde bulunan tüm öğelere geçiş efektlerini ekleyelim. Bildiğiniz gibi * işaretini selectorun içerisinde kullanarak figure içerisindeki tüm öğeleri seçebiliyoruz.
figure *, figure *::before, figure *::after
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
Daha sonra üzerine figure için bir tanımda bulunalım. Burada görselin boyutlarını da belirtmemiz gerekiyor. Ayrıca overflow tanımlaması sayesinde kaydırma çubuklarını görünmez yapıyoruz. Bu da, üzerine gelince büyüyen görselin kaydırma çubuğu oluşturmasını engelliyor.
figure
width: 500px;
height: 281px;
overflow: hidden;
position: relative;
border: 3px solid black;
Şimdi figcaption öğeleri için genel bir stil atayalım. Absolute pozisyonlama ile onu bağlı olduğu öğenin üzerine yayıyoruz.
figcaption
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
text-align: center;
width: 100%;
height: 100%;
display: table;
Şimdi de figcaption içerisine oluşturduğumuz div’i şekillendirelim. Bu div aslında kalın bir çizgi çekmemizi sağlayacak. Üzerine gelindiğinde ve after tanımı için de birkaç satır kod ekliyoruz.
figcaption div
display: table-cell;
vertical-align: middle;
position: relative;
top: 20px;
opacity: 0;
color: white;
figcaption div:after
position: absolute;
content: "";
left: 0; right: 0;
bottom: 40%;
text-align: center;
margin: auto;
width: 0%;
height: 3px;
background: white;
figcaption:hover div
opacity: 1;
top: 0;
figcaption:hover div:after
width: 50%;
Şimdi de görselimizi yönetelim. Scale3d ile üzerine gelince 1.3 oranında büyümesini sağlayalım.
figure img
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
figure:hover img
-webkit-transform: scale3d(1.3, 1.3, 1);
transform: scale3d(1.3, 1.3, 1);
Son olarak figure’ün üzerine gelindiğinde figcaptionların siyah ve transparan bir arkaplan ile kaplanmasını sağlayalım.
figure:hover figcaption
background: rgba(1,1,1,.5);
HTML Kodları
Şimdi de klasik HTML5 görsel tanımlarını kullanarak resmimizi ekleyelim.
<figure>
<img src="http://www.adobewordpress.com/wp-content/uploads/2014/02/wallpaper-thumb-991.jpg"/>
<figcaption><div>adobewordpress.com</div></figcation>
</figure>
İyi çalışmalar.
HTML5 ve CSS3 ile Resim Açıklamaları
Hiç yorum yok:
Yorum Gönder