Herkese merhabalar. Bu başlıkta CSS’in muhteşem bir özelliği olan “hover” özelliğinden bahsedeceğim. Özellikle son yıllarda kreatif web tasarımlarının kaçınılmaz parçası olan hover özelliği, daha yaratıcı ve dinamik web siteleriniz için de kullanabileceğiniz oldukça basit bir özelliktir. Hiç vakit kaybetmeden hemen bakalım!
CSS Hover Ne İşe Yarar?
Hani bazen, bazı web sitelerinde gezinirken, mouse imleciyle bir görselin üzerine geldiğinizde görsel büyür, ya da bir butonun üzerine geldiğinizde buton renk değiştirir, parlamaya başlar, işte bu harika özelliği yapmamızı sağlayan sır, CSS’in hover özelliğidir.
CSS hover özelliği ile kullandığınız nesnelerin, medya ve objelerin, divlerin ve contentlerin üzerine gelince çeşitli değişik biçim ve stillere sahip olmasını sağlayabilir, daha dikkat çekici broşür ve butonlar hazırlayabilirsiniz.
CSS Hover Nasıl Kullanılır?
Dilerseniz hiç vakit kaybetmeden CSS hover özelliğine canlı bir örnekle beraber bakalım. Örneğin biz, web sitemizdeki “Kayıt Ol” butonu için daha dikkat çekici ve kreatif bir şeyler yapmak istiyoruz. Kullanıcı butonun üzerine geldiği zaman arka plan rengi ve yazı rengi değişsin istiyoruz. Hemen butonumuzu ekleyerek işe koyulalım!
<input type="button" class="butonum" value="Kayıt Ol">
Butonumuzu ekledik, şimdi biraz da butonumuza biçim verelim.
.butonum {
width: 80px;
height: 35px;
font-weight: bold;
font-family: Times;
background: #3a3a98;
color: white;
cursor: default;
border: solid 1px grey;
}
Harika! Butonumuzu hazırladık ve çıktısını yandaki gibi görebilirsiniz. Sıra geldi butonumuza hover özelliği eklemeye. Biz istiyoruz ki; kullanıcı mouse imlecini butonun üzerine getirdiği zaman butonumuzun arka planı beyaz olsun ve yazı rengi de bir önceki arka plan rengiyle aynı olsun. Yani renkler yer değiştirsin istiyoruz. Hemen kodlarımızı oluşturalım!
.butonum {
width: 80px;
height: 35px;
font-weight: bold;
font-family: Times;
background: #3a3a98;
color: white;
cursor: default;
border: solid 1px grey;
}
.butonum:hover {
background: white;
color: #3a3a98;
}
Harika! Hover özelliğimizi başarıyla ekledik ve yandaki gif üzerinde de görebileceğiniz gibi çalışıyor! Burada dikkat ettiyseniz sadece class’ımızın sonuna “:hover” yazdık. Yani hover edildiği, üzerine gelindiği zaman arkaplanımızı beyaz yap ve yazı rengimizi de bir önceki arka plan rengiyle aynı yap dedik.
Ancak burada bir şey dikkatinizi çekmiş olmalı. Hover özelliğimiz çok hızlı. Yani üzerine gelir gelmez biçimi değişiyor. Ancak biz belki de bunun daha yavaş olmasını istiyoruz. İşte bu noktada da “transition” özelliğinden faydalanacağız. Şimdi kodlarımıza şöyle bir ekleme yapacağım:
.butonum {
width: 80px;
height: 35px;
font-weight: bold;
font-family: Times;
background: #3a3a98;
color: white;
cursor: default;
border: solid 1px grey;
transition: all 1s;
}
.butonum:hover {
background: white;
color: #3a3a98;
}
Burada eklediğimiz “transition:” geçiş özelliği anlamına gelmektedir. Hemen yanında kullandığım all 1s ise bu nesnedeki tüm geçişleri 1 saniye gecikmeli yap demektir. Sizler bu kısımda dilerseniz “transition: background 1s;” diyerek sadece arkaplanı 1 saniyede geç diğerlerini hızlı geç de yapabilir veya kendi biçiminize göre düzenleyebilirsiniz. Ayrıca sadece hover için değil pek çok animasyon eklemeleri ve düzenlemelerinde de transition özelliği kullanılmaktadır. Hepsi bu kadar! Aklınıza takılan her şeyi bu başlık altında sorabilirsiniz! İyi çalışmalar dileriz! :)
