Bulanık Erdal Bakkal :)

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.

CSS Kodları


body{padding:0px;margin:0px;}

.erdaliye{
background:url(erdal-bakkal-normal.jpg) no-repeat;
width:690px;
height:257px;
}

.adobewordpress {
background: url(erdal-bakkal-blur.jpg) no-repeat fixed;
width:240px;height:80px;
position:absolute;
margin:75px 0 0 370px;
border-radius:15px;
box-shadow: 0 0 0 3px black, 0 0 0 6px white;
padding:20px;
font:1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.adobewordpress span{
color:#b52c2c;
}

HTML Kodları

Çay içeceksen Erdal Bakkal, web tasarımı öğreneceksen AdobeWordPress.com

Eğlenceli bir anlatım oldu sanırım :)

Bu tekniği canlı test etmek için aşağıdaki kaynak linkini ziyaret edin!

Kaynak : http://www.adobewordpress.com/css-ile-bulanik-arka-plan/

CSS3 Tekniklerinde BLUR'u şu şekilde yapabilirsin.

filter: blur(1.5px);
-moz-filter: blur(1.5px);
-webkit-filter: blur(1.5px);

1.5 Yazan yerleri kendinize göre ayarlarsanız blur artacaktır :)

Kodlarını kullanarak Erdal Bakkalı CSS3 Tekniğiyle Aşağıdaki hale getirebilirsin :)

Makaleyi okumadığın aşikar :) Alttaki bölümü okursan sevinirim

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.

CSS'in filter taglarını hiçbir tasarımcı an itibariyle tavsiye etmez. Daha erken. Ayrıca düzgün görsel optimizasyonu ile bu anlattığım teknik çok daha etkilidir. Özellikle büyük boy görsellerde.

Sadece üst kısmı okudum :rolleyes: Fakat tarif ettiğin şekil çok farklı bir şekil benim tarif ettiğim ise daha fakrlı bir şekil. Senin tarif ettiğin ile farklı bir sonuç elde ettim.

Zaten en üst kısımda yazıyordu :) Evet tabii ki farklı teknikler. Ben an itibariyle en az performans isteyen teknikleri konu alıyorum. Old School diyip geçebiliriz. Yoksa sizin yazdığınız filtre kodu da çalışacaktır.

Şöyle test edebilirsiniz. Sitenize 5-10 tane bulanıklık filtresi koyun. Sitenize giren firefox kullanıcıları %20 oranında en az düşecektir. Çünkü ya fatal yerler, ya da tarayıcıları yavaşlar :) Benim bu tekniği anlatma sebebimde buydu. Neyse bana müsade.

Size de alternatif paylaşımınız için teşekkür ederim.

hangi browser lar destekliyor bunu ?