DERS : Css Metin Gölgelendirme

GoldenBoy Nebi Kara

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

 

22-06-2011 13:34 Edit:22-06-2011 13:40

    Php

    fatihkeskin nedencicom

     #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

    08-09-2013 01:13 Edit:06-04-2014 10:11

      www.Phpkodlari.com © 2009 Herkes Php öğrenecek
      Web tasarım ve eğitim kaynağınız.