CSS ‘te :Hover & :Focus Kullanımı
Merhaba Arkadaşlar,
Bu makalede sizlere CSS yardımıyla yaptığımız tasarımlarda asli görevlerin dışında işin süsleme kısmına geçtiğimizde özellikle formlarda kullandığımız ” :hover ” ve ” :focus ” bileşenlerini anlatacağım.
:hover bileşeni, bu özelliği kazandırdığımız form elemanı, text , image gibi site içerisinde bulunan nesnelerin üzerine fare imleci ile geldiğimizde yapılacak işlemlerin belirlendiği bölüme verilen isimdir. Örneğin class ‘ı ” uyg1 ” olan bir form elemanına uygulamak istediğimizde ” .uyg1:hover{} ” şeklinde bir satır başlangıcının ardından yapılacak işlemleri köşeli parantezler içerisine yazarak tamamlıyoruz. Ve sayfamızı çalıştırdığımızda bu işlemi uygulattığımız nesnenin üzerine geldiğimizde stil dosyamızda verilen değerlerin uygulandığını görüyoruz.
:focus bileşeni ise :hover ‘dan biraz farklı bir işlemi yürütmektedir. Az önce anlatığım gibi ” :hover ” kullandığımızda nesnenin üzerine gelindiğinde değişimler gözlemlenebilirken ” :focus ” kullandığımızda nesneyi seçmemiz gerekir. Örnek vermek gerekirse bir form elemanı için ” :focus ” özelliğini kullandığımız takdirde fare imleci ile bu elemanın üzerine gelip tıklamamız gerekmektedir. Class ‘ı ” uyg2 ” olan bir form elemanına ” focus ” özelliğini uygulamak istediğimizde ” .uyg2:focus{} ” şeklinde bir satır başlangıcının ardından yapılacak işlemleri köşeli parantezler içerisine yazmamız gerekmektedir.
Uygulamamıza geçtiğimizde bu iki özelliğin en çok kullanıldığı yer olan form elemanlarını ele alıyoruz ve bir giriş formu üzerinden anlatımımızı yapıyoruz. İki adet sayfa oluşturuyoruz ve isimlerini ” index.html ” ve ” stil.css ” koyuyoruz. index sayfamızın kodlarını yazarak formumuzu oluşturuyoruz.
<html>
<head>
<title>BilgiSayaci.Org - CSS :hover & :focus Kullanımı</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<div class="uygulama">
<form action="" method="post" >
<ul>
<li><input type="text" name="kadi" placeholder="Kullanıcı Adınız..." class="yazi" /></li>
<li><input type="password" name="pass" placeholder="Parolanız..." class="yazi" /></li>
<li><input type="submit" name="giris" value="Giriş Yap" class="buton" /></li>
</ul>
</form>
</div>
</body>
</html>
Daha sonra stil sayfamıza geçiyoruz ve önce form elemanlarına atadığımız class ‘ların düzenlemesini yaparak şık bir form görünümü elde ediyoruz.
.uygulama li{list-style-type: none; margin-bottom: 10px;}
.yazi{width: 350px; height: 45px; padding: 10px; border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -webkit-border-radius: 20px; -ms-border-radius: 20px;}
.buton{width: 150px; height: 40px; border-radius: 5px; border: 2px solid #ddd; color: #a1a1a1; font-size: 16px; cursor: pointer; }
Bu işlemleri de tamamladıktan sonra index sayfamızı çalıştırdığımızda stil sayfamızda belirlediğimiz özelliklere göre düzenlenmiş bir üye giriş formu önümüze gelecektir.
Şimdi ise sıra bu makaleyi yazma sebebimiz olan ana iki özelliğe..
Buton a uygulamak istemediğim bu özelliği form içerisinde bulunan iki adet text alanına uygulayacağım. ” index.html ” kodlarımız içerisine baktığımızda her iki text alanı içinde ” yazi ” isimli class ‘ı kullanmıştım. Bu nedenle bu özelliğe önce :hover ve daha sonra da :focus özelliğini uyguluyorum ve stil sayfamın son görünümü şu hali alıyor:
.uygulama li{list-style-type: none; margin-bottom: 10px;}
.yazi{width: 350px; height: 45px; padding: 10px; border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -webkit-border-radius: 20px; -ms-border-radius: 20px;}
.buton{width: 150px; height: 40px; border-radius: 5px; border: 2px solid #ddd; color: #a1a1a1; font-size: 16px; cursor: pointer; }
.yazi:hover{border: 2px solid #000;}
.yazi:focus{background-color: #ddd;}
Şimdi bu kodları da yazarak işlemimizi tamamladıysak index sayfamızı çalıştırıyoruz ve text alanlarının üzerine geldiğimizde border ‘ların siyah olduğunu görüyoruz. Şimdi border ‘ların 2 piksel ve siyah olduğunu diyeceğim ama o da biraz kod ‘a bakarak konuşmak olacağından çok derinleşmek istemiyorum 🙂 . Her neyse bu görüntüyü gördüysek şimdi diğer özelliğimizi de kavrayabilmek adına iki text alanından herhangi birinin yazı yazmak için kullandığımız bölümüne tıklıyoruz. Bu sefer border ‘lar da bir hareketlilik olmadı fakat arka plan renginin koyu bir gri renk aldığını görüyoruz..
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 10 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar