Alt gölge, web sayfasında işlendiğinde seçili HTML öğelerinin arkasına gölge ekleyen veya düşüren bir efekttir. Bu etki “ kullanılarak elde edilebilir. Düşen gölge() 'CSS için bir değer olarak yöntem' filtre ” özelliği veya “ kullanarak kutu gölgesi ' mülk. 'box-shadow' özelliğini kullanarak görsel geliştirme, kullanıcı deneyimi, vurgu ve odak belirli bir hedeflenen HTML öğesine çekilebilir.
Bu kılavuz, box-shadow özelliğini kullanarak gölge efekti yapma prosedürünü gösterir:
-
- box-shadow Özelliğini Kullanarak Katı Alt Gölge Oluşturun
- box-shadow Özelliğini Kullanarak Bulanık Alt Gölge Oluşturun
- Alt Gölge Alanını Genişletin
Box-shadow Özelliğini Kullanarak CSS3'te Alt Gölgeler Nasıl Yapılır?
“ kutu gölgesi ” özelliği, geliştiricinin sayfadaki öğelerin göreli konumunu belirterek görsel bir hiyerarşi oluşturmasına olanak tanır. Bunu kullanarak, web sayfası oluşturucuları, yüzeylere gölge düşüren nesnelerin yanılsamasını yaratabilir ve bu da öğelere daha etkileşimli bir his verir.
Sözdizimi
'box-shadow' özelliğinin söz dizimi şu şekildedir:
kutu gölgesi: [ yatay ofset ] [ dikey ofset ] [ bulanıklık yarıçapı ] [ yayılma yarıçapı ] [ renk ] ;
Yukarıdaki sözdiziminde kullanılan terimlerin açıklaması:
-
- Başlangıçta, “ yatay ofset ”, X ekseni konumunu alır/depolar ve “ olumsuz ” değeri, gölgeyi sola ayarlar ve bunun tersi de geçerlidir.
- “ dikey ofset ” değeri, Y ekseni konumunu saklar, “ pozitif ” değeri, gölgeyi aşağı yönde ayarlar ve “ durumunda bunun tersi de geçerlidir. olumsuz ' değer.
- Sonra, “ bulanıklık yarıçapı ” değeri adından da anlaşılacağı üzere gölgenin bulanıklığını ayarlar.
- “ yayılma yarıçapı ” değeri, gölgenin ne kadar yarıçap genişletmesi gerektiğini belirtir.
- “ renk ” gölge rengini ayarlar, “ HSL ' veya ' RGB ” biçiminde de.
Şimdi, daha iyi anlamak için birkaç örnek üzerinden gidelim:
Örnek 1: box-shadow Özelliğini Kullanarak Düz Alt Gölge Uygulayın
Kesintisiz alt gölgeyi ayarlamak için, ' değerine bir değer olarak yalnızca yönler ve gölge rengi eklenir. kutu gölgesi ' mülk:
< stil >.boxShadowÖrneği {
genişlik: 210 piksel;
sınır: 2px katı mısır püskülü;
yükseklik: 210 piksel;
arka plan rengi: #f0f0f0;
kutu gölgesi: 10px 10px orman yeşili;
}
stil >
Yukarıdaki kodda:
-
- İlk olarak, “ sınıfına sahip HTML öğesi seçilir. boxShadowÖrnek ”. Ve “değeri 210 piksel ”, “ yükseklik ' Ve ' Genişlik ' özellikler. Ayrıca, “ sınır ' Ve ' arka plan rengi ” daha iyi görselleştirme için özellikler.
- Ardından, “ değerini ayarlayın 10px 10px orman yeşili ” “a kutu gölgesi ” CSS özelliği. “ 10 piksel ”, gölgenin uygulanması gereken konumu belirleyen yatay ve dikey uzaklıktır. Ve ' Orman yeşili ” gölgenin rengidir.
Derlemeden sonra web sayfası şöyle görünür:
Çıktı, box-shadow özelliği kullanılarak katı tip bir alt gölgenin yerleştirildiğini onaylar.
Örnek 2: box-shadow Özelliğini Kullanarak Bulanık Alt Gölge Uygulayın
Halihazırda uygulanmış olan gölgeyi bulanık hale getirmek için “ rengin önüne bir sayısal değer daha eklenir. kutu gölgesi ' mülk. Aşağıdaki güncellenmiş kodu ziyaret edin:
< stil >.boxShadowÖrneği {
genişlik: 210 piksel;
sınır: 2px katı mısır püskülü;
yükseklik: 210 piksel;
arka plan rengi: beyaz duman;
kutu gölgesi: 10px 10px 15px orman yeşili;
}
stil >
Yukarıdaki koda göre gölge artık “ 15 piksel ” bulanık. Derleme aşamasının bitiminden sonra web sayfası şöyle görünür:
Yukarıdaki şekil, gölgenin artık bulanık olduğunu göstermektedir.
Örnek 3: Alt Gölge Alanının Genişletilmesi
Yayılma değeri “ kutu gölgesi ” gölge bölgesini genişletme özelliği. Yayılma değeri sayısal biçimde olmalıdır. Aşağıdaki kod parçacığında olduğu gibi, gölge bölge “ olarak genişletilir. 20 piksel ”:
< stil >.boxShadowÖrneği {
genişlik: 210 piksel;
sınır: 2px katı mısır püskülü;
yükseklik: 210 piksel;
arka plan rengi: beyaz duman;
kutu gölgesi: 10px 10px 15px 20px orman yeşili;
}
stil >
Yürütmeden sonra, alt gölge şimdi şöyle görünür:
Gördüğünüz gibi, gölge bölgesi artık 20 piksel artırıldı.
Çözüm
“ kutu gölgesi ” özelliği, bir “ yaratmak için kullanılır. Düşen gölge ” seçili HTML öğeleri üzerindeki etkisi. “ Düşen gölge ” özelliği beş değer kabul eder, “ yatay ofset ”, “ dikey ofset ”, “ bulanıklık yarıçapı ”, “ yayılma yarıçapı ' Ve ' renk ”. 'Yatay ofset' ve 'dikey ofset' değerleri, alt gölgenin çıkması gereken yerden gölge için boyutları ayarlar. 'Bulanıklık yarıçapı' değeri gölgeyi bulanıklaştırır ve 'yayılma yarıçapı' değeri gölge bölgesini uzatır.