CSS3 Gölgelendirmeler (Shadow)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 Gölgelendirmeler (Shadow)

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(2146)
RAPOR ET
CSS güzel özelliklerini anlatmaya devam diyom.Bu derste gölgeleri işleyecez.2 çeşit gölgemiz var biri nesneler için biride textler için.Nesneler için olandan başlayalım.

box-shadow :sağ-sol yukarı-aşağı blur renk;
4 tane parametre alıyor.
sağ solda +lı değer sağ - li değer sola kaydırıyo
yukarı aşağıda lı değer aşağı - li değer yukarı kaydırıyo
blur yani bulanıklaştırma gölgeyi yaymak için.
renk ise gölgemizin rengin. Bu her ikigölge için aynı.
Bir örnek yapalım

.logo{
box-shadow:0px 0px 15px #333;
-webkit-box-shadow:0px 0px 15px #333;
-moz-box-shadow:0px 0px 15px #333;
-o-box-shadow:0px 0px 15px #333;}


textler için gölgeye geçelim.
text-shadow :sağ-sol yukarı-aşağı blur renk;
Parametreler yuakardakiyle aynı.Hemen örneğe geçelim.

.yezi{
text-shadow:3px -5px 5px red;
-webkit-text-shadow:3px -5px 5px red;
-moz-text-shadow:3px -5px 5px red;
-o-text-shadow:3px -5px 5px red;
}


Gölgeler bu kadar basit.

NOT: -webkit- -moz- -o- tarayını uyumları için.

Genel Örnek:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kutu{width:150px;height:150px;background:#ddd;margin:50px;box-shadow:0px 10px 10px #333;-webkit-box-shadow:0px 10px 10px #333;-moz-box-shadow:0px 10px 10px #333;-o-box-shadow:0px 10px 10px #333;}
.text{text-shadow:2px -3px 3px #999;-webikt-text-shadow:2px -3px 3px #999;-moz-text-shadow:2px -3px 3px #999;-o-text-shadow:2px -3px 3px #999;}
</style>
</head>
<body>

<div class="kutu"></div>

<div class="text">cArleone</div>

</body>
</html>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol