Yazılarınıza gölge katın, CSS yazı gölge nasıl yapılır ?

Web site sahiplerinin, sitelerini kendi istekleri doğrultusunda dizayn etmeleri tabii ki doğal bir durum. Hayalgücünün çalıştığı zamanlarda çok çok kaliteli işlerin ortaya çıktığını söyleyebilirim, ancak bazen hayalgücü kaliteli işlerin ortaya çıkması için yeterli olamayabiliyor.

Bizim de amacımız kendi bilgilerimiz doğrultusunda kısmen de olsa katkıda bulunabilmek. Bu yazıda ise CSS ile yazılarınıza nasıl gölge efekti verebileceğinizden bahsetmek istiyorum. Ayrıca bu örnekleri sadece gölge amaçlı değil, yine hayal gücünüzü kullanarak farklı şekillerde de kullanabilirsiniz.

Not: Belirteceğim kodları kısmen açıklamak gerekirse,

1. değer = X (yatay uzaklığı)
2. değer = Y (dikey uzaklığı)
3. değer = Blur derecesi
4. değer = Gölge rengi

Yani

1px 2px 3px #ffffff

değerinde 1px’lik yatak uzaklık, 2px’lik dikey uzaklık, 3px’lik blur derecesi ve #ffffff gölge rengi.

İşte kullanabileceğiniz bir kaç gölge ve blur etkisi, hemen altlarında ise kodları.

kenancanol.com gölge CSS kodları
text-shadow: 2px 2px 3px #000;
kenancanol.com gölge CSS kodları
text-shadow: 2px 2px #000;
kenancanol.com gölge CSS kodları
text-shadow: 2px -2px 3px #000;
kenancanol.com gölge CSS kodları
text-shadow: 2px 2px 2px #ff3300;
kenancanol.com gölge CSS kodları
text-shadow: 0px 1px 1px #fff;
kenancanol.com gölge CSS kodları
text-shadow: 0px 1px 0px #ccc;
kenancanol.com gölge CSS kodları
text-shadow: 0px 1px 1px #000;
kenancanol.com gölge CSS kodları
text-shadow: 1px 1px 6px #fff;
kenancanol.com gölge CSS kodları
text-shadow: 0px 0px 3px #fff;
kenancanol.com gölge CSS kodları
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Kenan CANOL

Google sayfama göz atabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir