New Post has been published on adobewordpress ~ güncel tasarım okulu
New Post has been published on http://www.adobewordpress.com/css-ile-linklerinize-animasyonlu-hover
CSS ile Linklerinize Animasyonlu Hover
Klasik altı çizgili yazıları animatif hale getirmeye ne dersiniz? CSS3’ün after tanımlamasıyla birlikte bu işlemi yapmak mümkün.
Bu dersimizde linklerimiz için şık bir hover efekti hazırlayacağız.
ÖRNEĞİ GÖRÜNTÜLE
Linklere animatif altı çizgili efekti nasıl verilir?
Sadece CSS kodu yazacağız. HTML tarafında yapmamız gereken bir düzenleme yok.
CSS Kodları
İlk olarak linklerimize satır yüksekliği, inline-block yapısı tanımlayalım.
a line-height: 1; display: inline-block; color:#ffeb3b; text-decoration:none;
Daha sonra varsayılan after tanımını düzenleyelim. Burada çizgiyi 0 piksel yapalım ki hover olmadığı sürece gözükmesin. Ayrıca geçiş efektini (transition) de bur kısımda tanımlayacağız.
a:after display: block; content: ""; height: 2px; width: 0%; background-color: #ffeb3b; transition: width .3s ease-in-out;
Şimdi de üzerine gelindiğinde veya focus olunduğunda çizgiyi 100% genişliğe uzatalım.
a:hover:after, a:focus:after width: 100%;
Bu kadar basit.
×Kapat a:after içerisindeki yükseklik ve a’ya verdiğimiz line-height yazı boyutunuza göre değişiklik gösterebilir.
İyi çalışmalar.
