HTML, web sayfalarının yapısını sağlamak için kullanılan dildir ve CSS, öğelere stil uygulamamıza izin verir. Bir web sayfasında, arka plan rengi, yazı tipi boyutu, kenarlık, kenarlık yarıçapı gibi farklı stilleri uygulamak için farklı özellik değerleri ayarlanır ve kutu gölgesi bunlardan biridir.

Bu blog, HTML öğelerine gölge efektleri uygulama yöntemini tartışacaktır.

CSS Kullanarak HTML Elemanlarına Gölge Efekti Nasıl Düşürülür?

“ kutu gölgesi ” özelliği, bir öğenin etrafına, eklenen iki veya daha fazla efekt değerinin virgülle ayrılabileceği bir gölge ekler.

box-shadow özelliğinin sözdizimi aşağıda açıklanmıştır.

Sözdizimi

kutu gölgesi : Yok |h-offset v-offset bulanıklık yayılmış renk | ek | ilk | miras alırsın ;

Yukarıda belirtilen sözdiziminin açıklaması aşağıda listelenmiştir:

“ Yok ”: box-shadow özelliğinin varsayılan değeridir.
“ h-ofset ”: Bu değer yatay mesafeyi temsil eder.
“ v-ofset ”: Bu değer dikey mesafeyi tanımlar.
“ bulanıklık ”: Üçüncü değer bir bulanıklıktır. Değerini en üst düzeye çıkarmak, bulanıklık efektini en üst düzeye çıkarır.
“ yayılmış ”: Dördüncü değer, gölge dağılımını temsil eder. Pozitif değerin yayılımı artırdığı ve negatif değerin düşürdüğü pozitif veya negatif değerleri tutabilir.
“ renk ”: Bu değer isteğe bağlıdır ve mevcut rengi temsil eder.
“ ilk ”: Bu değer, başlangıç değerinin özelliğini ayarlar.
“ miras alırsın ”: Bu değer, üst öğesinin özelliğini devralır.
“ ek ”: İç metin değeri, kutunun içinde gölgeler oluşturmak için kullanılır.

Uygulamalı bir örnek üzerinden gölge efektinin nasıl göründüğüne bakalım.

Örnek vermek

HTML dosyasında, önce bir “

”. Bu

öğesinin içine, web sayfasına içerik sağlamak için

ve
etiketlerini ekleyin.

HTML

< div >

< h1 > Kutu Gölge < / h1 >

< p > kutu gölgesi: 3px 8px < / p >

< / div >

Şimdi, CSS özelliklerini eklenen HTML öğelerine uygulayın.

CSS

div {

kutu gölgesi : 3 piksel 8 piksel ;

}

div öğesi ' özelliği ile uygulanır. kutu gölgesi 'değeri ile' 3 piksel 8 piksel ”, yatay ofseti ve dikey ofseti temsil eder.

Çıktı

Bir sonraki bölümde, HTML öğeleri farklı özelliklerle stillendirilecektir.

CSS

div {

sınır : 5 piksel sağlam rgb ( 255 , 111 , 1 ) ;

kutu gölgesi : 3 piksel 8 piksel 9 piksel 4 piksel #f4af1b ;

}

Div öğesine uygulanan ek CSS özellikleri aşağıdadır:

“ sınır ” özelliğine 5px solid rgb(255, 111,1) değeri atanır; burada 5px, sınırın genişliğini, solid, sınırın stilini ve rgb(255, 111, 1) rengi gösterir.
“ kutu gölgesi 3px 8px 9px 4px #f4af1b değerine sahip özellik, h-offset'i 3px, v-offset'i 8px, blur'u 9px, spread'i 4px olarak temsil eder ve #f4af1b rengi belirtir.

Yukarıda verilen kod, div öğesini aşağıda gösterildiği gibi gösterecektir:

Şimdi, bir sonraki bölümde, iki div öğesini temsil eden iki kutu oluşturun. Her birine farklı çoklu kutu gölge değerleri vereceğiz ve sonuçları gözlemleyeceğiz.

HTML

= 'kutu1' >

> Kutu Gölge >

> kutu gölgesi : 3 piksel 8 piksel 9 piksel 4 piksel #f4af1b >

> > >

= 'kutu2' >

> Kutu Gölge >

> kutu gölgesi : 3 piksel 8 piksel 9 piksel 4 piksel #f4af1b >

>

Stil kutusu1 div

#kutu1 {

Genişlik : %40 ;

boy uzunluğu : 140 piksel ;

sınır : 5 piksel sağlam #ff9c83 ;

kutu gölgesi : 8 piksel 10 piksel 15 piksel 20 piksel #807f7f ;

}

Buraya:

“ #kutu1 ” id box1 ile div'e erişmek için kullanılır.
“ Genişlik ” özelliği, elemanın genişliğini ayarlamak için kullanılır.
“ boy uzunluğu ” özelliği, öğenin yüksekliğini ayarlar.
“ sınır ” değeri 5px solid #ff9c83 olarak verilir; burada 5px, sınırın genişliğini, solid, sınırın stilini ve #ff9c83 rengi ifade eder.
“ kutu gölgesi ” özellik “ olarak ayarlanacak 8 piksel 10 piksel 15 piksel 20 piksel #807f7f Burada 8px yatay ofset, 10px dikey ofset, 15px bulanıklık efekti, 20px yayılma efekti ve #807f7f gölgenin rengidir.

Stil kutusu2 div

#kutu2 {

Genişlik : %40 ;

boy uzunluğu : 140 piksel ;

sınır : 5 piksel sağlam rgb ( 255 , 111 , 1 ) ;

kutu gölgesi : ek 4 piksel 8 piksel #f4af1b ;

sol kenar boşluğu : 350 piksel ;

}

box2 div'i aynı özelliklerle şekillendirdiğimiz gözlemlenebilir:

Bonus İpucu: HTML Öğesine Birden Çok Gölge Ekleme

“ kutu gölgesi ” özelliği, bir HTML öğesine birden fazla gölge efekti eklemek için kullanılabilir. Bu, aşağıdaki örnekte gösterildiği gibi her gölge arasında virgül kullanılarak yapılabilir:

kutu gölgesi : 6 piksel 6 piksel rgb ( 91 , 0 , 143 ) , 12 piksel 5 piksel rgb ( 201 , 8 , 8 ) , 16 piksel 16 piksel 8 piksel rgb ( 226 , 213 , 29 ) ;

Gördüğünüz gibi, birden fazla gölge başarıyla uygulandı:

Bu tamamen CSS sınır gölgesinin kullanımıyla ilgiliydi.

Çözüm

“ kutu gölgesi CSS'deki ” özelliği, HTML öğelerine gölge efektleri uygulamak için kullanılır. Bu özellik temel olarak yatay kaydırma ve dikey kaydırma için olan iki değerden oluşur, ancak bulanıklaştırma efekti, yayılma yarıçapı efekti, renk ve daha fazlası gibi birden çok değer olabilir. Ayrıca, her bir box-shadow özelliği arasında virgül kullanarak öğelere birden fazla gölge ekleyebilirsiniz. Bu makale CSS box-shadow özelliğini pratik örneklerle açıklamıştır.

CSS kenarlık gölgesi