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