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> |
Ş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> |
