DERS : Css Metin Gölgelendirme.
Not : Css ders kategorisine ekledim hata verdi burdan faydalanırsınız. Kendi anlatımımdır.
-------------------------------------------------------------------------------
S.a
Merhaba arkdaşlar Css'in nimetlerinden yararlanarak çok kısa , öz ve yararlı bir bilgi paylaşmak isterim. Css kullanarak metinlerimize Gölge Kazandırabilir ve Derinlik Verebiliriz. Belki Bir çoğumuz Bu özelliğin Farkında Değildir. Dilerseniz Bir kaç Ufak örnekle izah edeyim...
ilk önce <body></body> Taglarımzın arasına 4 farklı p etiketi ile yazı ekleyeceğiz ve bu yazılarımıza text-shadow özelliğini uygulayarak gölge kazandıracağız..
<p class="saf">Örnek Kod - Css Text Shadow Özelliği</div>
Üstteki yazımızda Saf bir şekilde normal yazı kodlarımızı yerleştirdik hemen aşağıda Css kodlarını verelim.
.saf{
padding :20px;
background-color :#ccc;
border :1px solid #999;
width :320px;
font-family :Trebuched MS;
font-weight :bold;
color :#000;
font-size :19px;
}
RESİM
ikinci örneğimizde beyaz yazımıza Çok hafiften bir gölge kazandırıyoruz.
Html Code:
<p class="ornek_1"> Örnek Kod - Css Text Shadow Özelliği</p>
Css Code :
.ornek_1{
padding :20px;
background-color :#ccc;
border :1px solid #999;
width :320px;
font-family :Trebuched MS;
font-weight :bold;
color :#fff;
font-size :19px;
/*text shadow özelliği */
text-shadow: #666 1px 1px;
*/
}
RESİM
Üçüncü Örnekte Koyu gri arkaplan'da siyah yazımıza beyaz gölge efekti uygulayalım.
Html Code:
<p class="ornek_2"> Örnek Kod - Css Text Shadow Özelliği</p>
Css Code :
.ornek_2{
padding :20px;
background-color :#666;
border :1px solid #999;
width :320px;
font-family :Trebuched MS;
font-weight :bold;
color :#000;
font-size :19px;
/*text shadow özelliği */
text-shadow: #fff 1px 1px;
*/
}
RESİM
Dördüncü ve son örnekte Siyah Gölgemizi Kaydırarak nasıl bir efekt oluştuğunu görüyorsunuz.
Html Code :
<p class="ornek_3"> Örnek Kod - Css Text Shadow Özelliği</p>
Css Code :
.ornek_3{
padding :20px;
background-color :#ccc;
border :1px solid #999;
width :320px;
font-family :Trebuched MS;
font-weight :bold;
color :#000;
font-size :19px;
/*text shadow özelliği */
text-shadow: #666 -1px 4px;
*/
RESİM
Ve Son Hali
Görüldüğü Üzere Çok Basit Bir okadarda faydalı bir yöntem korkulacak birşey yok kolay gelsin.
Örneğe Altta Verdiğim Linkten Göz Atabilirsiniz
Dosya indir : csstextshadow.zip
Php
#golge{text-shadow: 1px 1px 1px #666;}
text shadow üç değerlede yapılabilir
veya
#golge{text-shadow: 1px 1px #666;} iki değerlede yapılabilir
