CSS Shadow (Gölge) Efekti Verme
CSS ile metne ve öğelere gölge ekleyebilirsiniz.
Bu bölümde aşağıdaki özellikleri öğreneceksiniz:
text-shadowbox-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> |
Ş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> |
Ş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> |
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> |
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> |
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> |
Aşağıdaki örnekte siyah, mavi ve koyu mavi 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 |
<!DOCTYPE html> <html> <head> <style> h1 { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } </style> </head> <body> <h1>CSS Text-shadow Ekleme</h1> </body> </html> |
Text-shadow özelliğini, bazı metinlerin etrafında düz bir kenarlık oluşturmak için de kullanabilirsiniz (gölgesiz):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <style> h1 { color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } </style> </head> <body> <h1>CSS Text-shadow Ekleme</h1> </body> </html> |
CSS box-shadow Özelliği Ekleme
CSS kutu gölge özelliği, öğelere gölge uygular.
Bakınız: CSS box-shadow örnekleri
En basit kullanımında, yalnızca yatay gölgeyi ve dikey gölgeyi belirtirsiniz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px; } </style> </head> <body> <h1>CSS box-shadow Özelliği</h1> <div>Bu box-shadow uygulanmış bir kutudur.</div> </body> </html> |
Şimdide gölgeye gri renk uygulayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px grey; } </style> </head> <body> <h1>CSS box-shadow Özelliği</h1> <div>Bu box-shadow uygulanmış bir kutudur.</div> </body> </html> |
Şimdi de gri renkli gölgemize blur efekti verelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px 5px grey; } </style> </head> <body> <h1>CSS box-shadow Özelliği</h1> <div>Bu box-shadow uygulanmış bir kutudur.</div> </body> </html> |
Örnek: Örneğimizde resim ve açıklamadan oluşan bir card oluşturarak, oluşturduğumuz bu card için box-shadow ve text-shadow özelliğini birlikte uygulayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> .resim{ margin: 100px; width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; } .yazi{ padding: 10px; } img{ width: 100%; } p{ color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } </style> </head> <body> <div class="resim"> <img src="uzungol.jpg" alt="Uzungöl"> <div class="yazi"> <p>Uzungöl, Trabzon</p> </div> </div> </body> </html> |
