Bu yazımızda Css’te Text Shadow özelliği nedir?, Nasıl kullanılır? onu öğreneceğiz. Text shadow özelliği ile yazılarımıza gölge verebiliyoruz.
Vereceğimiz değerler ile gölgenin x ve y eksenindeki konumunu, bulanıklığını ve rengini belirleriz.
İlk verilen değer x ekseni, ikinci verilen değer y ekseni, üçüncü verilen değer bulanıklık, dördüncü verilen değer de rengi için uygulanır.
Örneğin bir h2 etiketi tanımlayalım ve gölge efekti verelim.
|
1 2 3 4 5 6 7 8 9 |
<style> h2{ text-shadow:2px 2px; } </style> <h2>Tincidunt integer eu augue augue nunc elit dolor.</h2> |
Gördüğünüz gibi yazının gölgesi 2px sağa ve 2px aşağı doğru kaymış oldu.
Üçüncü vereceğimiz değer ile gölgenin bulanıklaştırılmasını sağlayalım.
|
1 2 3 4 5 6 7 8 9 |
<style> h2{ text-shadow:2px 2px 3px; } </style> <h2>Tincidunt integer eu augue augue nunc elit dolor.</h2> |
Gördüğünüz gibi gölge 3px bulanıklaştı.
Dördüncü vereceğimiz değer ile gölgenin rengini değiştirelim.
Örneğin gölge rengini gri yapalım.
|
1 2 3 4 5 6 7 8 9 |
<style> h2{ text-shadow:20px 15px 5px grey; } </style> <h2>Tincidunt integer eu augue augue nunc elit dolor.</h2> |
Gördüğünüz gibi gölge rengi gri oldu.
Birkaç farklı örnek ve tarayıcıdaki görüntüleri ile konumuzu sonlandıralım.
Siz daha farklı değerler ile tasarımlarınızı dilediğiniz gibi yapabilirsiniz.
|
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 |
<style> #text1{ color: white; text-shadow: 2px 2px 4px #000000; } #text2{ text-shadow: 0 0 3px #FF0000; } /*Birden fazla gölgeyi aynı anda vermek için, aralarına virgül koyarak yazabiliriz.*/ #text3{ text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } #text4{ color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } #text5{ color: cornflowerblue; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } </style> <h1 id="text1">Tincidunt integer eu augue augue nunc elit dolor.</h1> <h1 id="text2">Tincidunt integer eu augue augue nunc elit dolor.</h1> <h1 id="text3">Tincidunt integer eu augue augue nunc elit dolor.</h1> <h1 id="text4">Tincidunt integer eu augue augue nunc elit dolor.</h1> <h1 id="text5">Tincidunt integer eu augue augue nunc elit dolor.</h1> |
Tarayıcı uyumluluğu ile ilgili bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
