CSS ile Shadow (Gölge) Efekti Verme

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0

CSS Shadow (Gölge) Efekti Verme​

CSS ile metne ve öğelere gölge ekleyebilirsiniz.


Bu bölümde aşağıdaki özellikleri öğreneceksiniz:

  • text-shadow
  • box-shadow


CSS Text Shadow​

CSS text-shadow özelliği, metne gölge uygular.

En basit kullanımında, yalnızca yatay gölgeyi (2px) ve dikey gölgeyi (2px) belirtirsiniz:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>text-shadow Efekti Verme</h1>

<p><b>Not:</b> Internet Explorer 9 ve önceki sürümleri, text-shadow özelliğini desteklemez.</p>

</body>
</html>
1608734507984.png
Şimdi de metnimize eklemiş olduğumuz text-shadow efektine bir renk verelim:




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>text-shadow Efekti Verme</h1>

<p><b>Not:</b> Internet Explorer 9 ve önceki sürümleri, text-shadow özelliğini desteklemez.</p>

</body>
</html>
1608734522882.png
Şimdi de gölgemize blur özelliği ekleyelim.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>text-shadow Efekti Verme</h1>

<p><b>Not:</b> Internet Explorer 9 ve önceki sürümleri, text-shadow özelliğini desteklemez.</p>

</body>
</html>

1608734535900.png
Aşağıdaki örnekte siyah gölgeli beyaz bir metin gösterilmektedir:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>CSS Text-shadow Ekleme</h1>



</body>
</html>
1608734549293.png
Aşağıdaki örnekte ise kırmızı neon ışıma gölgesi görülmektedir:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>

<h1>CSS Text-shadow Ekleme</h1>



</body>
</html>

1608734564070.png

CSS ile Birden Çok Gölge Ekleme​

Metne birden fazla gölge eklemek için virgülle ayrılmış bir gölge listesi ekleyebilirsiniz.

Aşağıdaki örnekte kırmızı ve mavi neon ışıma gölgesi görülmektedir:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>CSS Text-shadow Ekleme</h1>

</body>
</html>

1608734584974.png
 
Üst Alt