yakuter » Css İle Gölge Yapımı

POPÜLER ARAMALAR: reklam, pazarlama, iş,
kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog

29 Kasım 2006

Css İle Gölge Yapımı

Etiketler: Css, gölge, Web
Kategori Css, Web |

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.

Duz Metin

<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.

Duz Metin

#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.

Ekle Bunu »

“Css İle Gölge Yapımı” için 3 Yorum

1 Ahmet Küçükoğlu
19 Haziran 2007, 21:00

İnşallah css3 geldiğinde bu kadar uğraşmayacağız. Tabi birde tarayıcı destekleme sorunu var.
2 ergin
20 Ekim 2007, 02:42

yaşasın CSS :)
3 Ogalican
08 Aralık 2007, 17:51

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.