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

CSS3 Opacity Özelliği Nasıl Kullanılır ? Detaylı Anlatım

Konuyu Okuyan Kişiler (0)

GüçNet

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
965
Beğeniler
0
Yaş
27
Konum
Akkapı
#1
Merhaba arkadaşlar,

Bugün sizlere bildiğim kadarı ile CSS3 ile gelen opacity özelliğini anlatacağım. Opacity özelliğini resimlerde, yazılarda, butonlarda kısacası her türlü her yerde kullanabilirsiniz. Kullanımı çok basit olmakla birlikte sizlere daha iyi tasarımlar ortaya çıkarmanız için güzel bir araç.

Biz bu dersimizde bir resime opacity özelliği vereceğiz.

Öncelikle Html ile resim kodumuzu yazıyoruz.

HTML:
<div class="opacity">


<img src="opacity.jpg" alt=""/>



</div>

<div class="opacityhover">

<img src="opacityhover.jpg" alt=""/>

</div>
Sonra Css kodlarımızı oluşturuyoruz.

Kod:
.opacity img { opacity:0.5; }

.opacityhover img:hover { opacity:0.5;}
Örnek Görünüm

Örnek Dosyaları İndir