HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css image opacity not text
css image opacity rgba
css image opacity background
css image opacity border
css opacity kullanımı
css image hover opacity color
css change image opacity on hover

CSS Image Opacity / Transparency(Opaklık/Saydamlık)

CSS Image Opacity / Transparency(Opaklık/Saydamlık)

Web Sitelerdeki görsel öğeler üzerinde her yerde rastladığınız bir css özelliğinden bahsedeceğim.Bu özellik pek çok amaç için kullanılıyor.Bu özellik ile görsellerinizin üzerine mouse ile geldiğinizde onu soluklaştırıp belirteç görevi gibi kullanabilirsiniz.Ya da tam tersi soluk bir görseli üzerine mouse ile gelindiğinde canlı bir şekilde gösterebilirsiniz.Bir başka şekilde ise görsellerinizi soluklaştırıp üzerine yazılar yazabilirsiniz. Böylece resminiz yazınızın arkasında bir arkaplan görevi görecektir.

Css
#opacity img {
opacity: 0.5;
}
Html
<div id="opacity">
<p>Aşağıdaki görsel %50 oranında saydamlaştırıldı.</p>
<img src="https://htmlcssdersleriogreniyorum.com/resimler/yol.jpg" alt="Forest" width="450" height="450">
</div>

1-Transparent Hover Effect(Üzerine Gelme Durumu)

Mouse ile görselin üzerine gelme durumu en çok iki şekilde kullanılır.İlki; Orjinal resme mouse ile üzerine gelindiğinde resmin soluklaşması ve tam tersi soluklaştırılmış resmin üzerine gelindiğinde resmin orjinal halinin görünmesi durumudur.

Kullanımı:

Css
.opacity_first img {
opacity: 0.5;
}
.opacity_first img:hover {
opacity: 1.0;
}
.opacity_second img:hover{
opacity: 0.5;
}
Html
<div style="float:left;" class="opacity_first">
<p>Soluktan Orjinaline</p>
<a href="https://htmlcssdersleriogreniyorum.com/resimler/yol.jpg" target="_blank"><img src="https://htmlcssdersleriogreniyorum.com/resimler/yol.jpg" alt="Yol Resmi" width="450" height="450"></a>
</div>
<div class="opacity_second">
<p>Orjinalinden soluğa</p>
<a href="https://htmlcssdersleriogreniyorum.com/resimler/yol.jpg" target="_blank"><img src="https://htmlcssdersleriogreniyorum.com/resimler/yol.jpg" alt="Yol Resmi 2" width="450" height="450"></a>
</div>

2-Transparent Box(Kutu Kullanımı)

İçeriklerinizin yer aldığı div etiketlerini özelleştirirken bu özellikten yararlanabilirsiniz.Aşağıdaki örnek div etiketlerini içeriğinizin içeriğine göre kullanabilirsiniz..

Kullanımı:

Css
#opacity div {
background-color: #1E90FF;
padding: 10px;
}
#opacity div.first {
opacity: 0.1;
}
#opacity div.second {
opacity: 0.3;
}
#opacity div.third {
opacity: 0.6;
}
Html
<div id="opacity">
<div class="first">
<p>opacity 0.1</p>
</div>
<div class="second">
<p>opacity 0.3</p>
</div>
<div class="third">
<p>opacity 0.6</p>
</div>
<div><p>opacity 1 (default)</p></div>
</div>

3-Text in Transparent Box(Saydam kutu üzerinde Yazı)

Yoğun arkaplanınızın üzerine yazının rahat okunabilmesi ve hoş görünmesi için bir yazı kutusu oluşturabilirsiniz.Bunu da yine opacity özelliği ile yapabilirsiniz..

Kullanımı:

Css
div.background {
background: url('http://htmlcssdersleriogreniyorum.com/resimler/orange.jpg') repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
}
Html
<div class="background">
<div class="transbox">
<p>Bu paragraf yoğun bir arkaplan üzerine oluşturulmuş yazı kutusuna yazılmıştır.</p>
</div>
</div>


Paylaş:

Enes KILIÇ
Webmaster