Skip to content
Menu
Beytullah Güneş
  • Ana Sayfa
  • Kitap
    • Modern Zorbalıklar
  • Dersler
    • 4. Sınıf Matematik
  • Araçlar
    • SEO Analizi Yap
    • En Yeni SEO Analizleri
    • Domain Yaşı Sorgula
    • Google Önbellek Analiz
    • Yapılandırılmış Veri Aracı
  • Blog
    • Bilgisayar
    • Dijital Pazarlama
    • Google
    • Güvenlik
    • İnternet
    • Oyun
    • SEO
    • Sosyal Medya
    • Teknoloji ve Bilim
    • Yapay Zeka
    • Yazılım Tasarım Kodlama
  • Hakkında
    • Hakkında
    • Referanslar
    • Sıkça Sorulan Sorular
    • İletişim
Beytullah Güneş

CSS ile Görsel Bulanıklaştırma Efekti – CSS Image Blur Effect

Yazar: Beytullah Güneş | Yayın Tarihi: 22 Mayıs 2016
Tasarlanan sayfalarda bulanıklaştırma efekti genellikle z,yaretçilerin dikkatini belli bir noktaya çekmek istediğimizde kullanırız. Örneğin bir bir sliderde yer alan görsel ve alt açıklama metinleri iç içe girmemesi için alt açıklama metinlerine arkaplan eklemek bir yöntem olabilir. Ancak “hover effect” dediğimiz maus ile ziyaretçi görselin üzerine geldiğinde resmin otomatik bulanıklaşması bu alt metnin daha da ön plana çıkmasını sağlarken sitenizde hoş bir detay olacaktır. Aşağıdaki görselde 1 ve 2 numaralı önizlemelerde farkı açıkça görebilirsiniz.

 

Birde örnek ile uygulaması için “blur pic” div grubu içinde verilen bir görsel için örneğin HTML yerleşimi
plane

 

şeklinde oldun bu görsele Blur Effect özelliğini sağlama için div gurubunu ilgili css satırları
/*BLUR*/.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur img:hover {
-webkit-filter: blur(5px);
}

 

şeklinde olmalıdır.
ilgili konu  Yerli arama motoru geliyoo incelemesi detaylı

Bir yanıt yazın Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

  • Black Desert Online 2025'te Oynamaya Değer mi? Detaylı İnceleme
    Black Desert Online 2025 te Oynamaya Değer mi? Detaylı İnceleme
  • WorldBox İnceleme Kuralsız Tanrıcılık Oyunu
    WorldBox İnceleme Kuralsız Tanrıcılık Oyunu
  • Knight Online Bırakılır mı?
    Knight Online Bırakılır mı?
  • 4. Sınıf Matematik Üçgenleri Kenar Uzunluklarına Göre Sınıflandırma
    4. Sınıf Matematik Üçgenleri Kenar Uzunluklarına Göre Sınıflandırma
  • 4. Sınıf Matematik Kare ve Dikdörtgenin Kenar Özelliklerini Belirleme
    4. Sınıf Matematik Kare ve Dikdörtgenin Kenar Özelliklerini Belirleme

SEO ARAÇLARI

  • SEO Analizi Yap
  • En Yeni SEO Analizleri
  • Domain Yaşı Sorgula
  • Google Önbellek Analiz
  • Yapılandırılmış Veri Aracı

KATEGORİLER

  • Bilgisayar
  • Dijital Pazarlama
  • Google
  • Güvenlik
  • İnternet
  • Oyun
  • SEO
  • Sosyal Medya
  • Teknoloji ve Bilim
  • Yapay Zeka
  • Yazılım Tasarım Kodlama

Başlıca

  • Ana Sayfa
  • Bilgisayar
  • Dijital Pazarlama
  • Google
  • Güvenlik
  • İnternet
  • SEO

Kurumsal

  • Beytullah Güneş Hakkında
  • Sıkça Sorulan Sorular
  • Kullanım Koşulları
  • Çerez Politikası
  • Gizlilik politikası
  • KVKK
  • Beytullah Güneş İletişim

Sosyal

  • Facebook
  • X
  • Instagram
  • Linkedin
  • YouTube

Beytullah Güneş İletişim

[email protected]

Beytullah Güneş, BTK onaylı bir yer sağlayıcı olarak içerikleri kontrol etme ya da araştırma yükümlülüğü yoktur. Hukuka aykırı olduğunu düşündüğünüz içerikleri lütfen bize BURADAN bildiriniz.

Copyright © 2012 Beytullah Güneş by GNSnetwork. All Rights Reserved