Web, işletme ve inovasyon hakkında bir takım yazılar İletişim için Form

Defocuyu takip etmek isteyenlere, RSS - FeedBurnerSanal Alemde Ben, Friendfeed - Flickr - Twitter - Vimeo


Css İle Gölge Yapımı

css_ile_golgelerTarayıcılar yeni versiyonları ile CSS3 kodlarını kullanmamıza imkan tanıyor. Bu yeni kodlarsa tasarım yaparken işlerimizi oldukça kolaylaştırıyor. Bunlardan en sevdiğim bir kaçıda yazı ve kutularımıza gölge vermemizi sağlayan kodlar. Örneğin yanda gördüğünüz görüntüyü elde etmek artık bir ka satırlık bir css koduyla mümkün.

Yandaki resmi incelediğinizde, yazı ve kutulara gölge verdiğimizi görmektesiniz. Yanlız ikinci sıradaki "Yan Başlık" yazısına dikkat ederseniz, diğerlerinden farklı olarak yazıya iki ayrı renkte gölge verdiğimizi göreceksiniz. Bu yapıyla bir yazıya 2-3 ayrı renkte gölge vererek, yazılarınıza sanki Photosop'ta hazırlamışcasına buz ve ateş efektleri verebilirsiniz. Örneğin kodlarını inceleyip, örnek dosyayı aşağıdan indirebilirsiniz.

HTML:
  1. <h1>Ana Başlık</h1>
  2.  
  3. <h2>Yan Başlık</h2>
  4.  
  5. <div id="golgeli_kutu">Evet, gölgeli kutu benim</div>

CSS:
  1. h1{
  2.     text-shadow: -1px 4px 10px #000;
  3.     color:#FFF;
  4. }
  5.  
  6. h2{
  7.     text-shadow: -1px 2px 10px #3F0, -5px 10px 25px #C39;
  8.     color:#FFF;
  9. }
  10.  
  11. #golgeli_kutu{
  12.     width: 200px;
  13.     height: 100px;
  14.     box-shadow: 2px 10px 10px #F60;
  15.     -webkit-box-shadow: 2px 10px 10px #F60;
  16.     -moz-box-shadow: 2px 10px 10px #F60;
  17.     background:#FC0;
  18. }

Örnek dosyayı buradan indirebilirsiniz.

Ağustos 19th, 2009 Etiketler: , ,
| Kategori: CSS & XHTML | Yorum Yap » Yazar: abdullah