Skip to content
Menu
Beytullah Güneş
  • Ana Sayfa
  • 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
    • Yazılım Tasarım Kodlama
  • Hakkında
    • Hakkında
    • İletişim
    • Referanslar
    • Sıkça Sorulan Sorular
Beytullah Güneş

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

Yayınlanma Tarihi 22 Mayıs 2016 | Kategori Yazılım Tasarım Kodlama
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  html sayfası yapımı

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Beytullah GÜNEŞ

Beytullah GÜNEŞ

GNSNetwork Founder

beytullahgunes.com ve GNSNetwork kurucusu. Aktif olarak 2002, profesyonel olarak 2012 yılından bu yana web tasarım, geliştirme ve SEO alanında hizmet vermekte. 2019 yılından bu yana hizmetlerini GNSNetwork üzerinden sunmayı sürdürmektedir.

Yeni Neler Var?

  • Yandex Sıralama Faktörleri Sızdı
  • WordPress Yönetici Arayüzü Kesinlikle Kötü
  • ChatGPT Web İçeriğinin Kullanımı Etik mi?
  • Google Güncellemeleri Akış Yönergeleri
  • Google Optimize Kullanımdan Kaldırıldı

SEO Araçları

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

Kategoriler

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

Başlıca

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

Kurumsal

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

Sosyal

  • Facebook
  • Twitter
  • Instagram
  • tumblr
  • Linkedin

Beytullah Güneş İletişim

[email protected]

Tuğçe Güneş |Mutfaktan Yemek Tarifi | Kullanıcı Yorumluyor | Güzel Anlamlı Sözler | Açıklanamayan Doğaüstü Olaylar

DMCA compliant image btk
GNS Network - SEO Tasarım Reklamcılık