CSS3 sayesinde gölge vermek için Photoshop'a gerek kalmadı. Çoklu gölge efekleri ile çeşitli görünümler elde edebilirsiniz.
Her ne kadar Text Shadows CSS2 den beri var olsada bu fonksiyonu destekleyen bir Safari tarayıcısı vardı. Günümüzde hemen hemen tüm tarayıcılar bu özelliği desteklemektedir. Internet Explorer ise son sürümlerinde bu özelliği destekler hale gelmiştir.
İlk önce standart html sayfamızı oluşturalım:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<title> CSS3 İle 3D Yazı</title>
</head>
<body>
<div id="wrapper">
<h1>3D Yazı</h1><hr />
<p>Internet Explorer eski sürümleri hariç çoğu tarayıcıda çalışır.</p>
</div>
</body>
</html>
Daha sonra head etiketi içine style etiketi ve css kodlarımızı yazıyoruz. Bu kodlar id si wrapper olan div içindeki h1 ve p etkiketlerine bir kaç gölge efekti verecek.
Css Kodlarımız:
<style>
body{
background:#d5d5d5;
}
#wrapper{
width:960px;
min-height:500px;
padding:50px 10px 0 10px;
margin:0 auto;
text-align:center;
}
#wrapper h1{
font:normal 60pt Arial;
color:#FFFFFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
#wrapper p{
font:normal 40pt Arial;
color:#FFFFFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
Çıktımız ile şu şekilde olacaktır:
Düzenle Kullanıcı Tarafından 10 Eylül 2015 Perşembe 12:02:25(UTC)
| Sebep: Sebep Bildirilmesi
