CSS3 kodlama dilinde kullanılabilen bir özellik olan opacity sayesinde, resimlerinize (tablo) veya yazılarınıza renk atamak yerine, opacity ayarı sayesinde onları biraz daha soyut hale getirerek renklerini değiştirebilirsiniz.
Başta Opacity kullanımını anlattıktan sonra bu özelliği Hover özelliği ile birleştirerek güzel bir CSS3 tasarımı oluşturabileceğinizi anlatacağım.Nasıl Kullanılır?Opacity özelliğinin kendine ait bir kodu vardır. Bu kod diğerlerinden farklıdır. Normalde bu tarz kodların sonuna ‘px‘ yazmamız gerekirken bu özellikte yazmayız.
opacity:0.6;
Üstte verdiğim kod sayesinde her hangi bir resime, tabloya veya yazıya 0.6 değerinde bir opaklık verebiliriz. Farkındaysanız bu kodun sonunda px yazmıyor. Tabii her tarayıcı ile uyumlu olmadığı için İnternet Explorer’da gözükebilmesi için ayrı bir kod gerekli. O kod;
filter:alpha(opacity=60);
Bu kod sayesinde de CSS belgemizde yer alan Opacity komutunu İnternet Explorer’a da tanıtmış oluyoruz. Şimdi gel gelelim bu özelliği hover özelliği ile birleştirmeye.Hover ve OpacityHover özelliğini geniş olarak şuradaki yazımda sizlere anlattım. Bilmeyenler oraya bakabilir.CSS belgemizde yer alan bir koda hover özelliği verelim. Örneğin logomuza.
.logo {background-image: url(images/logo.png); width: 400px; height: 80px;}
Logomuzun kodunu oluşturduk. Şimdi hover efekti katalım:
.logo:hover {opacity:0.6;}
Üstteki kod sayesinde logomuzun üzerine gelindiği zaman logonun opaklık ayarının biraz daha düşmesini sağladık. Yani daha saydam bir görünüm alacak. İşte bu işi Opacity kodu sayesinde yaptık. Biraz daha şekillendirmek ve yavaş yavaş opak bir hale gelmesini isterseniz şu ‘CSS3 Hover Effects‘ olarak arama yaptığınızda istediğiniz konu karşınıza gelecektir.
Kaynak: Enes Çakmak | CSS3: Opacity ve Hover Birleşmesi
