• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

CSS3 ile hover yavaşlatma özelliği

Konuyu Okuyan Kişiler (0)

Katılım
6 Mar 2013
Mesajlar
169
Beğeniler
0
#1
Css 3 ile gelen yeniliklerden birisi de Hover Özelliğidir. Temalarınızda standart Hover verdiğiniz ikonların yerine Yavaşlatılmış Hover vermek daha şık durmasını sağlayacaktır.

Hover kodunu Cssde sık sık kullanırız. Gerek menü yapımlarında tıklanıldığı zaman arka plan değişmesi, fontun değişmesi, gölge vermek, linklerin üzerine gelindiğinde renk değiştirmesi gibi bir çok işlevde bize yardımcı olur. Bu dersimizde ise Css3 ile gelen bir özelliği tanıtacağım. Hover Yavaşlatma Özelliği Standart Hover uygulamasından çok daha şık durduğu kesin.

HTML
Kod:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Css3 İle Hover Özelliği</title>
<link rel="stylesheet" type="text/css" href="Css Kodunuzun Adresi" media="all" />
</head>
<body>
<div class="hover">
<img src="Görselinizin Adresi" width="250" height="250" alt="Hover Özelliği MKoseoglu.com" />
</div>
</body>
</html>
CSS
Kod:
/*Hover Classımıza Kodlarımızı Atıyoruz.*/
.hover img{
opacity:0.2;
-moz-opacity: 0.2;
-khtml-opacity: 0.2;
/*Normal Durumda Topumuza 0.2 Değerinde Hover Efekti Uyguladık. */
}
.hover img:hover{
opacity:1.0;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
/*Mause İle Üzerine Gelindiğinde 1 Değerinde Hover Efekti Uyguladık.*/
}
/*Buraya Kadar Standart Hover Özelliğini Kullandık. Şimdi İse Yavaşlatalım.*/
.hover img, .hover img:before, .hover img:after{
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
/*Buradaki 1s Değeri Yavaşlatma Süremiz.*/
}
Demo ve Kaynak
 

Medyakum

webmaster.tc
Katılım
21 Ağu 2013
Mesajlar
10
Beğeniler
0
#6
artık şu css3'e kafa yormam gerekiyor. eski kafada kaldık. paylaşım için teşekkürler