CSS gölge verme kodu (text-shadow)

27 Şubat, 2018
CSS gölge verme kodu
CSS gölge verme kodu
CSS metin gölge kodu nedir? CSS ile metinlere nasıl gölge verilir? CSS gölge verme kodu (text-shadow) nedir, nasıl yapılır?

Özellikle tasarımcıların ya da web sayfalarına ufak dokunuşlar yapmak isteyenlerin kullanmak isteyecekleri bir koda, bir konuya yer vermek istedim bu yazımda, CSS ile metinlere gölge verme. Bu tür basit kodlar bazen tasarım konusunda gerçekten hayat kurtarabiliyor.

Gölgelendirme işlemleri genelde görsellerle yapılırdı dostlarım. Photoshop ile gölgelendirme görüntüsü verdiğimiz görselleri metinlerin arkasına yerleştirerek sonuca ulaşırdık. Ama artık bu yöntemin pek tercih edilmediği kanaatimdeyim. Çünkü görseller site hızını yavaşlatabilir. Bu da arama sonuçlarını etkiler. A kullanan var tabi hala ama kesinlikle uğraşmaya değmez. Çünkü gelişen CSS yapısıyla birlikte basit kodlarla metinlere gölge vermek çok daha basit.

Peki metinlere nasıl gölge veririz?

Oldukça basit bir işelmdir bu. Gölge vermek istediğimiz metinlerin CSS kodlarına ulaşarak aşağıdaki kodları eklememiz yeterli.
text-shadow: 2px 3px 8px #111;
Görüntü itibariyle şöyle bir sonuç elde etmemiz gerekir:
.text {
    text-shadow: 2px 3px 8px #111;
{
Bu şekilde bir değer girildiğinde metin artık gölgeli bir hal alacaktır. Tabi düzenleme yapabilmek için neyin ne işe yaradığını bilmek gerekir.

2px değeri ile yapacağımız düzenlemede gölge yatay olarak konum değiştirecektir. 3px değeri ise gölgenin dikey olarak konumunu belirleyecektir. 8px değeri ise gölgenin daha bulanık ya da daha keskin olmasını sağlayacaktır. Tabi en son kısımda yer alan ise gölgenin renginin belirtildiği kısımdır. Yukarıdaki kodlarla hemen canlı bir örnek vermek gerekirse:
Blog Tecrübem
Böyle bir örnek yeterli olur sanırım.😉
Blog Tecrübem
Bu örnekteki gibi birden fazla gölge vermek isterseniz,
text-shadow: 2px 2px 8px #111, 2px 2px 8px #3cafe0;
Bu koddaki gibi ekleme yapabilirsiniz. Konuyla ilgili sorularınız olursa yorum yaparak bildirebilirsiniz.

2 yorum:

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.