CSS3 Box-Shadow Kullanımı
Merhaba Arkadaşlar,
Bu makalede sizlere CSS3 ile hayatımıza giren yeniliklerden box-shadow ‘u anlatacağım. CSS3 öncesi tasarım dünyasında değişik yöntemler kullanarak hayata geçirdiğimiz kutu gölgelendirmesi işlemi artık kısa bir kod yapısı olan ” box-shadow ” ile tam olarak istediğimiz düzeyde gerçekleştirilebilir duruma gelmiştir. Yatay ve dikey pozisyonları , kutu gölgelendirmesinin bulanıklık düzeyinin belirlendiği ve gölgenin renk tonunun belirlenebildiği bu özellik bizi bu tarz işlemler için resim kullanımından bir hayli uzaklaştıracaktır.
Uygulamamıza geçtiğimizde ” Anasayfa ” , ” Hakkımızda ” , ” Galeri ” ve ” İletişim ” seçeneklerinden oluşan yatay bir menünün bizim işimize yarayacağını düşünüyorum. İlk işlem olarak iki adet sayfa oluşturuyoruz. İsimleri ” index.html ” ve ” stil.css ” olacak olan sayfaların kod bölümlerini açalım. İlk olarak ” index.html ” sayfamıza aşşağıdaki kodları yazıyoruz..
<html>
<head>
<title>BilgiSayaci.Org - CSS3 Box-Shadow Kullanımı Uygulaması</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>
Bu kodları yazıp sayfamızı çalıştırdığımızda ortaya çıkacak görüntü dikey listelenmiş bir menü şeklinde olacaktır. Hemen ana tasarım görüntümüzü oluşturmak adına ” stil.css ” sayfamız içerisine giriyoruz ve ilk olarak menümüzü ” float ” özelliği ile yatay konuma getiriyoruz , ” margin ” özelliği ile aralarını açıyoruz , ” padding ” özelliği ile iç boşluklarını veriyoruz , ” border-radius ” ile köşelerdeki eğimlerini veriyoruz , ve son olarakta renk ve arka plan renklerini veriyoruz.
.menu ul{list-style-type: none;}
.menu li a{float: left; margin-right: 40px; color: #bbb; padding: 10px; background-color: #eee; border-radius: 10px; text-decoration: none;}
Kod blogunun hemen üstünde yazdığım özelliklerini gerçekleşti ise ( border-radius özelliği gerçekleşmemiş olabilir. Bunu düzeltmek için ” CSS3 Border-Radius Kullanımı ” konusuna bakmanızı öneririm ) menü bileşenlerimize ” box-shadow ” özelliğini kazandırıyoruz. Makale başında belirttiğim düzende ” box-shadow ” özelliğini kazandırdığımızda stil sayfamızın son görünümü şu şekilde olmaktadır..
.menu ul{list-style-type: none;}
.menu li a{float: left; margin-right: 40px; color: #bbb; padding: 10px; background-color: #eee; border-radius: 10px; text-decoration: none; box-shadow: 3px 3px 4px #000; -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000;}
Gördüğünüz gibi kısa bir kod eklemesi ile bu işlemi tamamlamış olduk. ” -moz- ” ve ” -webkit ” başlıklı ” box-shadow ” kodları da eski tarayıcılar kullanma olasılığınıza karşın yazılmış kodlardır 🙂 .
” box-shadow: 3px 3px 4px #000 ” şeklinde yazdığımız bölümü ele alırsak ilk değer olan 3px ‘lik kısım yatay eksende (x) büyüklüğünü göstermektedir. İkinci değer olan 3px ‘lik kısım ise dikey eksende (y) büyüklüğünü göstermektedir. 4px ‘lik kısım bulanıklık değerini verirken #000 ise gölgenin renk tonunu göstermektedir ve son görüntüyü bu hale getirmektedir.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 11 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar