CSS Gölge efekti ile, resimlerimizi, yazılarımızı ve kutuları gölgelendirmek mümkün. Site içerisinde bulunan elemanlara gölge ekleyerek değişik bir hava oluşturabiliriz.
CSS ile gölgelendirme yaparken 2 farklı seçeneğimiz bulunmakta. Text-shadow ve box-shadow.
İsimlerinden de anlaşılacağı gibi text-shadow ile; metinlerimizde gölgelendirme yaparken, box-shadow ile; kutularda (div) gölgelendirme yapmaktayız.
Gölgelendirme yaparken, gölge etiketini kullandıktan sonra 4 adet parametre belirlememiz gerekmektedir.
box-shadow: 2px 25px 10px yellow;
– Birinci değerimiz olan 2px = gölgenin sağ/sol konumunu belirler.
– İkinci değerimiz olan 25px = gölgenin üst/alt konumunu belirler.
– Ücüncü değerimiz olan 10px = gölgenin bulanıklık değerini belirler.
– Dördüncü değerimizde ise renk belirtmekteyiz. HTML Renk kodları için buraya tıklayabilirsiniz.
Metin Gölgelendirme (text-shadow)
Metinlerimize gölge eklemek istersek text-shadow etiketini kullanmalıyız. Örnekler yardımıyla nasıl olduğunu inceleyelim.
Kod Kampüsü | CSS Gölge Efekti
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <style> p { text-shadow: 6px 6px 4px red; } </style> </head> <body> <p>Kod Kampüsü | CSS Gölge Efekti</p> </body> </html> |
Kod Kampüsü | CSS Gölge Efekti
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <style> p { text-shadow: 0px 0px 10px black; font-size: x-large; font-family: Comic Sans MS; color:green; } </style> </head> <body> <p>Kod Kampüsü | CSS Gölge Efekti</p> </body> </html> |
Kod Kampüsü | CSS Gölge Efekti
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <style> p { text-shadow: 5px -5px 10px magenta; font-size: x-large; font-family: Jokerman; color:blue; background-color: Beige; padding: 10px; margin: 25px; text-align: center; } </style> </head> <body> <p>Kod Kampüsü | CSS Gölge Efekti</p> </body> </html> |
Kod Kampüsü | CSS Gölge Efekti
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <style> p { text-shadow: 0px 0px 1px black, 1px 1px 2px DarkRed, 0 0 20px FireBrick, 0 0 5px Crimson; font-size: x-large; font-family: Impact; color: LightSalmon; } </style> </head> <body> <p>Kod Kampüsü | CSS Gölge Efekti</p> </body> </html> |
Kod Kampüsü | CSS Gölge Efekti
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 | <html> <head> <style> .p { text-shadow: 1px 1px 0px pink, 15px 15px 3px rgb(236, 157, 169), 25px 25px 3px rgb(255, 182, 193), 35px 35px 3px rgb(250, 197, 206); font-size: x-large; font-family: Impact; color: DeepPink; padding: 15px; margin: 15px; text-align: center; } </style> </head> <body> <div class="p"> <p>Kod Kampüsü | HTML-CSS Dersleri</p> </div> </body> </html> |
Kutu Gölgelendirme (box-shadow)
Metinlerde olduğu gibi aynı zamanda kutularda da gölgelendirme yapmaktayız. Örneklerle beraber inceleyelim.
Gölgemizi sağdan gölgeli yapmak için, birinci değerimiz üzerinden yapmamız gerekiyor. Birinci değerimiz bildiğiniz üzere gölgenin sağ/sol konumunu temsil ediyordu. + değer alırsa sağ, – değer alırsa sola doğru konumlandırma yapacaktır.
Biz sağ konumlu bir gölge yapmak istediğimiz için ilk değerimizi 10px olarak belirtiyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <style> .saggolgelikutu { box-shadow: 10px 0px 3px black; background-color: ForestGreen; height: 150px; width: 150px; } </style> </head> <body> <div class="saggolgelikutu"></div> </body> </html> |
Gölgemizi soldan gölgeli yapmak için, birinci değerimiz üzerinden yapmamız gerekiyor. Birinci değerimiz bildiğiniz üzere gölgenin sağ/sol konumunu temsil ediyordu. + değer alırsa sağ, – değer alırsa sola doğru konumlandırma yapacaktır.
Biz sol konumlu bir gölge yapmak istediğimiz için ilk değerimizi -10px olarak belirtiyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <style> .solgolgelikutu { box-shadow: -10px 0px 3px black; background-color: ForestGreen; height: 150px; width: 150px; } </style> </head> <body> <div class="solgolgelikutu"></div> </body> </html> |
Gölgemizi üstten gölgeli yapmak için, birinci değerimiz üzerinden yapmamız gerekiyor. İkinci değerimiz bildiğiniz üzere gölgenin üst/alt konumunu temsil ediyordu. + değer alırsa alt, – değer alırsa üste doğru konumlandırma yapacaktır.
Biz üst konumlu bir gölge yapmak istediğimiz için ilk değerimizi -10px olarak belirtiyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <style> .ustgolgelikutu { box-shadow: 0px -10px 3px black; background-color: ForestGreen; height: 150px; width: 150px; } </style> </head> <body> <div class="ustgolgelikutu"></div> </body> </html> |
Gölgemizi alttan gölgeli yapmak için, birinci değerimiz üzerinden yapmamız gerekiyor. İkinci değerimiz bildiğiniz üzere gölgenin üst/alt konumunu temsil ediyordu. + değer alırsa alt, – değer alırsa üste doğru konumlandırma yapacaktır.
Biz alt konumlu bir gölge yapmak istediğimiz için ilk değerimizi 10px olarak belirtiyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <style> .altgolgelikutu { box-shadow: 0px 10px 3px black; background-color: ForestGreen; height: 150px; width: 150px; } </style> </head> <body> <div class="altgolgelikutu"></div> </body> </html> |
Şimdi de örneklerle kutu gölgelendirmenin çeşitlerini inceleyelim.
kutu1
kutu2
kutu3
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 37 38 39 40 41 42 43 | <html> <head> <style> .kutu1 { background-color: red; height: 150px; width: 150px; margin: 50px; float: left; box-shadow: 10px 10px 10px black; } .kutu2 { background-color: blue; height: 150px; width: 150px; margin: 50px; float: left; box-shadow: 0px 0px 30px black; } .kutu3 { background-color: green; height: 150px; width: 150px; margin: 50px; float: left; box-shadow: -10px -10px 5px black; } </style> </head> <body> <div class="kutu1"></div> <div class="kutu2"></div> <div class="kutu3"></div> </body> </html> |
Kutumuza birden fazla gölge ekleyerek arka arkaya gölgelendirme oluşturalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <style> .kutu { box-shadow: -4px -4px 0px BurlyWood, -8px -8px 0px Tan, -12px -12px 0px Wheat; background-color: Chocolate; height: 150px; width: 150px; margin: 50px; } </style> </head> <body> <div class="kutu"></div> </body> </html> |
inset parametresi ile iç gölgelendirme yapabilmekteyiz. İçten gölgeli bir kutu oluşturmuş olduk.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <style> .kutu { box-shadow: 0px 0px 20px black inset, 10px -10px 2px DeepSkyBlue, 20px -20px 2px PowderBlue; background-color: DodgerBlue; height: 150px; width: 150px; margin: 50px; } </style> </head> <body> <div class="kutu"></div> </body> </html> |
Çapraz köşelerden gölgeler olacak şekilde bir kutu ayarlayalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <head> <style> .kutu { box-shadow: 0px 0px 20px black inset, 10px 10px 2px DarkMagenta, 20px 20px 2px DarkOrchid, 30px 30px 2px MediumOrchid, -10px -10px 2px DarkOliveGreen, -20px -20px 2px Olive, -30px -30px 2px OliveDrab; background-color: CadetBlue; height: 150px; width: 150px; } </style> </head> <body> <div class="kutu"></div> </body> </html> |
Resim Gölgelendirme
Yazılara, kutulara gölge ekleyebildiğimiz gibi resimlere de gölge eklemesi yapabiliriz. box-shadow ile yapılacak olan bu gölgelendirmede örneklerle beraber nasıl olduğunu inceleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <style> img { box-shadow: -10px 10px 10px black; } </style> </head> <body> <img src="resim.jpg"/> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <style> img { box-shadow: 0px 0px 20px black; } </style> </head> <body> <img src="resim.jpg"/> </body> </html> |
