Merhaba arkadaşlar.Sizlerin de bildiği gibi CSS3 ile Filter yelpazesi fazlasıyla genişledi. Photoshop ve türevi programlarda kullandığımız Blur efekti CSS’e kod desteği ile birlikte geldi. Fakat an itibariyle tüm tarayıcılar bu yeniliği desteklememekte. Bu yüzden size kullandığım alternatif tekniği öğreteceğim.
Bu işlem için iki adet görsel kullanacağız. Biri keskin hatlara sahip normal hali. Diğeri ise Photoshop ile blur verilmiş hali. Hazırlayacağımız çalışmanın örneğini yukarıda görmektesiniz.
Photoshop safhası
Bu işlem için eliniz altında Photoshop türevi bir grafik düzenleme programı olmalı. Ben anlatımımı Photoshop üzerinden yapacağım. Aşağıdaki görsel üzerinde çalışacağım.
İlk olarak görseli Photoshop ile açıyoruz. Sonrasında Filter > Blur > Gaussian Blur alanına giderek 6px boyutunda bir blur efekti uyguluyoruz. Sonrasında ise Image > Adjustments > Hue Saturation (CTRL+U) alanına Lightness değerine +30 diyoruz.
Sonuç :
Normal halini ve bulanıklaştırılmış halini ayrı ayrı kaydediyoruz. erdal-bakkal-blur.jpg ve erdal-bakkal-normal.jpg adında kayıt ettim.
CSS ve HTML safhası
imdi en kolay kısma geldik. Burada bilmeniz gereken şu; iki adet div kullanacağız, birisi normal olan görseli yayınlayacağımız erdaliye classı, diğeri ise içersinde yazı yazdırdığım adobewordpress classı.
Önemli Not : Burada bu iki divi çevrelen ilk obje (muhtemelen body tagınız) margin ve padding 0 değerlerine sahip olmalı. Yoksa iç kısımdaki pencerede kaymalar olabilir.