Css Text Shadow ( yazı gölge efekti )

 

Css ile yazı ya gölge efekti vermek ( css text shadow ) uygulamasını kısaca anlatmak istiyorum.

Css3 ile gelen özellliklerden biride Text shadow yani yazı gölge efekti dir.Site görünümünde doğru kullanıldığı zaman yazı ve başlıklarda  görsellik açısından oldukça güzel bir görünüm elde edebilirsiniz.


Kısaca  css text shadow kullanımını sizlerle paylasacagım aynı kodları kullanarak sizlerde css3 ile yazıya gölge efekti uygulayabilirsiniz.

ilk olarak css kodumuzu olusturuyoruz. Burada gördüğünüz üzere p etiketine text shadow niteliğini verdik , ve şimdi gelelim piksel değerlerine ; 

.p {text-shadow: 3px 1px white; } 

 ilk pixel imiz yatay eksene gölge verir.

• İkinci pixel imiz ise dikey eksene gölge efekti uygular.

• Üçüncü değerimiz ise renk efektidir.Siyah bir yazı üstüne ben beyaz rengi tercih ettim siz isterseniz yazıyla veya rgb , hex kodları kullanarak istediğiniz gibi bir renk atayabilirsiniz.

Eğer blur efekti uygulamak istiyorsanız eğer o zaman da  3 cü bir pixel değeri girmeniz gerekir.Blur efekti ni kullanarak gölgeyi bulanıklaştırabilirsiniz. Sonuç aşağıdaki gibidir.

Burak Emek Blogspot

 *internet explorer desteği yoktur.

Css Border Radius Oval Köşe Oluşturma

css 3 ile resim kullanmadan sadece css kodları kullanarak arka planlarınızın köşelerini border radius kullanarak ovalleştirebilir sitenizin görünümünü dahada zenginleştirebilirisiniz.

#kenar1 {width:90px;
                height:30px;
                              border-radius: 10px;
                           background: olive;
}

#kenar2 {width:90px;
                 height:30px;
                                border-radius: 10px;
                                   border: 3px solid blue;
}

 #kenar3 {width:70px;
                 height:70px;
                                             border-radius: 5px 20px 5px;
                           background: silver;
}
#kenar4 {width:70px;
                height:70px;
                                       border-radius: 10px 30px;
                          background: orange;
}

Kenar 1:

Kenar 2

Bu iki örnekte görüldüğü gibi bütün köşeler oval bir görünüm almıştır.Css ile köşeleri oval yapmadaki tek husus border radius kodu ' dur.

Kenar 3

Kenar 4

Mesela sadece sol üst tarafı ovalleştirmek isterseniz ; border-radius-top-left yada sadece sol alt tarafı ovalleştirmek isterseniz ; border-bottom-left-radius gibi kodları kullarak zenginleştirebilirsiniz.