Css İle Gölge Yapımı

Css’in geçerliliği her geçen gün artarken kullanım alanı da genişlemeye ve çeşitlenmeye başladı. Css ile gölge yapımı da buna güzel bir örnek. İster tablolarınıza(table), ister div’lere, isterseniz de fotoğraflarınıza gölge vermek maksadıyla bu teknikten faydalanabilirsin.

Sitenizde gölgelendirmek istediğiniz nesneyi aşağıdaki kodların arasına yazmalısınız. Örnekte “Bu yazi css ile gölgelendirilmiştir.” yazısını bir çerçeve içine alarak gölgelendiriyoruz.

<div id="shadow-container">
        <div class="shadow1">
            <div class="shadow2">
                <div class="shadow3">
                    <div class="container">
Bu yaziya css ile gölgelendirilmiştir.
</div>
                </div>
            </div>
        </div>
    </div>

Css kodu da şu şekilde.

#shadow-container {
    position: relative;
    left: 3px;
    top: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
}

#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
    position: relative;
    left: -1px;
    top: -1px;
}

    #shadow-container .shadow1 {
        background: #F1F0F1;
    }

    #shadow-container .shadow2 {
        background: #DBDADB;
    }

    #shadow-container .shadow3 {
        background: #B8B6B8;
    }

    #shadow-container .container {
        background: #ffffff;
        border: 1px solid #848284;
        padding: 10px;
    }

Yukarıdaki örneğimizin çıktısı şöyle olacaktır.

Gölge

Yukarıda bir örnek sundum size. Google’da da Css ile gölge yapımı derseniz de bir çok örneğe ulaşabilirsiniz. Bu konuyu sizinle paylaşırken şuradan faydalnadığımı da belirtmek isterim.

Benzer Yazılar

yakuter

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Bu Yazıya Ait Yorumlar

Ahmet Küçükoğlu

Ahmet Küçükoğlu
19 Haziran 2007

İnşallah css3 geldiğinde bu kadar uğraşmayacağız. Tabi birde tarayıcı destekleme sorunu var.

ergin

ergin
20 Ekim 2007

yaşasın CSS :)

Ogalican

Ogalican
08 Aralık 2007

Yapacağımız şeye göre bayağı uzun bir kod yığını bence. CSS3 gelsede kurtulsak gerçekten..

Ayrıca web tarayıcılarına kafam girsin.

Saygılar.

Keman Kursu

Keman Kursu
20 Mart 2009

css ile ben de çalışmaya başladım.
çok güzel metinler var sizde.

cssci

cssci
10 Temmuz 2009

merhaba,
ben bi resim galerisi yapmaya çalışıyorum ve resimler farklı boyuttalar. bütün resimlerin aynı boyuttaki çerçevelerde görünmesi için bu kodları ne şekilde değiştirmeliyim.
teşekkürler

cumalitatli

cumalitatli
24 Şubat 2011

selam bu acılan wordpress hesabını tekrar kapatamıyormuyuz?
burda css lerden bahsediliyor ama ne style dosyası var nede css.
ayrıca sitemin sag bölümünde ''yazılar'' baslıgının altında konu ekledim ama 2. bi yazı eklenmiyor altına.
kısaca sogudum birden. bu yüzden iptal etmek istiyorum.
varmı böyle bi secenek?

ali

ali
08 Nisan 2011

bir iframe kodunun altina bu sekilde bir gölgelendirme yapamazmiyiz?

Peki ya sizin düşünceleriniz?

Facebook Grubumuz Twitter Wordpress Linked in Google Friendfeed RSS Beslemesi Feedburner RSS

Yakuter web tasarım, yazılım geliştirme, IPhone uygulamaları gibi konular da Üreticy'yi öneriyor.

TAMindir.com - Yeni Programlar

Ashampoo ClipFinder HD - Windows

ClipFinder HD, en ünlü 15 video paylaşım sitesi üzerinden video arayıp indiren ve format dönüştüren ...

G Data TotalCare - Windows

G Data TotalCare bilgisayarınızda sağladığı tam kapsamlı güvenlik yanında optimizasyon araçlarıyla s...

G Data InternetSecurity - Windows

G Data InternetSecurity anti-virüs, anti-casus, anti-spam anti-rootkit korumalarının yanında progra...

G Data AntiVirus - Windows

Performans problemi yaşamadan virüslerden korunmanızı sağlayan G Data AntiVirus, bilgisayarın aktif ...

Xfire - Windows

Multiplayer oyun severlerin en çok ihtiyaç duydukları iletişim araçlarını içinde bulunduran ve onlin...

Abonelik

Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.

yakuter.com © 2006-2010 Erhan Yakut. Site tasarım Cenk Akyıldız - (Tema Bilgisi).
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.