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

HTML TEMELLERİ

HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)

HTML5
İLERİ SEVİYE

HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)

CSS TEMELİ

CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)

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

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

<p>Aşağıdaki görsel %50 oranında saydamlaştırıldı.</p>

</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ı: