css ile gölge efekti

CSS ile Gölge Efekti

24 Nisan 2018 - HTML İpucu

CSS ile gölge efekti verme yazımda sizlere CSS ile yazılara ve kutulara (dive gölge) gölge efekti verme işlemlerini anlatmaya çalışacağım. Sizde “css ile gölge efekti nasıl yapılır” sorusunun cevabını arıyorsanız aşağıda anlattığım adımları izleyerek yazılara ve kutulara css ile gölge efekti verebilirsiniz.

CSS ile Gölge Efekti

Yazılara Gölge Efekti (text-shadow)

Css’te “text-shadow” etiketiyle yazılara gölge verebilirsiniz.

CSS:
---------------
.yazi{ text-shadow: 5px 3px 2px red; }
HTML:
---------------
<span class="yazi">Yazı buraya gelecek.</span>

Örnek;
Örnek yazı gölgesi.

5px: Gölgenin yazının sağına doğru gitmesini sağlar eksi – değer verilirse gölge sola kayar.
3px: Gölgenin yazının aşağına doğru gitmesini sağlar eksi – değer verilirse gölge yukarı kayar.
2px: Gölgenin blurluğunu yani bulanıklığını arttırır.
red: Gölgenin rengini belirler.

Yukarıdaki kod “yazi” class’ının içindeki tüm yazılara gölge verecektir. CSS kodunu direkt “style.css” dosyasına yazmanız gerekiyor. HTML bölümünü de yazının görünmesini istediğiniz yere yapıştırmanız gerekiyor.

Kutulara (Box) Gölge Efekti (box-shadow)

Css’te tüm div, span ve box’lara gölge efektini “box-shadow” etiketiyle verebilirsiniz.

CSS:
---------------
.kutu{ box-shadow: 3px 2px 4px blue; }
HTML:
---------------
<div class="kutu">Bu div gölgeli olacaktır.</div>

Örnek;
Bu div gölgeli olacaktır.

3px: Gölgenin kutunun sağına doğru gitmesini sağlar eksi – değer verilirse gölge sola kayar.
2px: Gölgenin kutunun aşağına doğru gitmesini sağlar eksi – değer verilirse gölge yukarı kayar.
4px: Gölgenin blurluğunu yani bulanıklığını arttırır.
blue: Gölgenin rengini belirler.

Yukarıdaki kod “kutu” class’ının bağlı olduğu kutuya gölge verecektir. CSS kodunu direkt “style.css” dosyasına yazmanız gerekiyor. HTML bölümünündeki class’ıda hangi kutunun gölgeli olmasını istiyorsanız ona vermeniz gerekiyor.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.