Şimdi Ara

Bulanık Erdal Bakkal :)

Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
5 sn
1
Cevap
0
Favori
347
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  •  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.

     Bulanık Erdal Bakkal :)


    İ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ç :

     Bulanık Erdal Bakkal :)


    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ı

    <div class="erdaliye"><div class="adobewordpress">Çay içeceksen <span>Erdal Bakkal</span>, web tasarımı öğreneceksen <span>AdobeWordPress.com</span></div></div>


    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/







  • Yapay Zeka’dan İlgili Konular
    Daha Fazla Göster
    
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.