CSS ile Alt Gölge Nasıl Oluşturulur

Tasarım trendleri her yıl değişse de, aşağıdaki gibi temel gölge efektlerinin kullanımına güvenebilirsiniz: kutu-gölge ve Düşen gölge bir web sitesinin estetiğine olumlu katkıda bulunmak. Kullanabilirsiniz gölgeler sevimsiz görünmeden hoş, güzel işlenmiş efektler yaratmak için.

CSS'ye daha yakından bakalım Düşen gölge Emlak.

CSS alt gölgesi nedir?

Düşen gölge( ) belirtilen bir nesnenin şekli etrafında bir gölge görüntüleyen bir CSS efektidir. İşte bir CSS uygulamak için sözdizimi Düşen gölge.

Sözdizimi:
filtre: alt gölge (kaydırma-x ofset-y bulanıklık yarıçapı rengi);

geniş bir yelpazesi vardır filtre fonksiyonları dahil olmak üzere bulanıklık( ), parlaklık( ), ve Düşen gölge( ).

ofset-x yatay mesafeyi belirler ve ofset-y dikey mesafeyi belirler. Negatif değerlerin gölgeyi sola yerleştirdiğini unutmayın (ofset-x) ve yukarıda (ofset-y) nesne.

Son iki parametre isteğe bağlıdır. Gölgenin bulanıklık yarıçapını uzunluk olarak belirleyebilirsiniz. Varsayılan olarak, 0'a ayarlanmıştır. Negatif bulanıklık yarıçapına sahip olamazsınız.

Gölgenin rengi şu şekilde belirtilir:. Bir renk belirtmediyseniz, rengin değerini takip eder. renk Emlak.

CSS alt gölgesi Ne Zaman Faydalıdır?

Bunu zaten biliyor olabilirsin kutu-gölge işi oldukça iyi yapıyor. Öyleyse, neden ihtiyacımız var diye düşünebilirsiniz. Düşen gölge hiç mi? olduğu çok sayıda vaka vardır. Düşen gölge( ) fonksiyon bir cankurtarandır. Bunlardan birkaçına bir göz atalım:

Dikdörtgen Olmayan Şekiller

aksine kutu-gölge, bir ekleyebilirsiniz Düşen gölge dikdörtgen olmayan şekillere Örneğin, dikdörtgen olmayan bir şekle sahip şeffaf bir SVG veya PNG'miz var - örneğin bir yıldız. Burada, nesnenin kendisine karşılık gelen bir gölge eklemek, ikisinden biri ile tamamlanabilir. kutu-gölge veya Düşen gölge. Her iki senaryoyu da göz önünde bulundurun:

HTML

CSS

.star-img img {
ekran: satır içi blok;
yükseklik: 15em;
genişlik: 25em;
}
.box-gölge {
kırmızı renk;
kutu gölgesi: 0.60em 0.60em 0.2em;
}
.Düşen gölge {
filtre: gölge (0.60em 0.60em 0.2em);
}

Çıktı:

Her iki etkiyi karşılaştırırken, bir kutu-gölge dikdörtgen bir gölge verir; ayrıca görüntünün saydam olup olmadığı veya zaten bir arka plana sahip olup olmadığı önemli değildir. Diğer yandan, Düşen gölge görüntünün şekline uyan bir gölge oluşturmanıza olanak tanır.

Sınırlayıcı faktörler, Düşen gölge( ) işlev, türdeki tüm parametreleri kabul eder hariç iç metin anahtar kelime ve yayılmış parametre.

Gruplandırılmış Öğeler

Belirli öğeleri üst üste getirerek bileşenler oluşturmanız gerekebileceği birkaç durum vardır. kullanıyorsanız kutu-gölge, doğru şekilde bir gölge oluşturmaya çalışma sorunuyla karşı karşıya kalacaksınız. Bir resmi ve bir metin bileşenini gruplarken şu şekilde çalışır:

HTML

Anı yaşa

Lorem ipsum dolor sit amet conectetur adipisicing elit. Yoksulluk, borç dışı, facilis eligendi ea emekçi obcaecati ut quia asperiores. Modi, yozlaşmış meta, quisquam ex numquam olay.

Temel CSS

vücut {
dolgu: 5em 1em;
yazı tipi ailesi: 'Lucida Sans', 'Lucida Sans Normal', 'Lucida Grande',
'Lucida Sans Unicode', Cenevre, Verdana, sans-serif;
}
h2 {
yazı tipi boyutu: 2rem;
}
P {
yazı tipi boyutu: 0.8rem;
}
.parent-container {
ekran: esnek;
esnek yön: sütun;
yükseklik: 17rem;
genişlik: 50em;
}
.image-container img {
genişlik: 15em;
pozisyon: mutlak;
z-endeksi: 1;
üst: 2em;
sol: 1.5em;
}
.text-container {
renk: rgb (255, 236, 236);
arka plan rengi: rgb (141 0 35);
genişlik: 30rem;
dolgu: 3rem;
kendini hizala: esnek uç;
pozisyon: göreceli;
}

Şimdi, uygula kutu-gölge ve Düşen gölge farkı görmek için.

.Düşen gölge {
filtre: gölge (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.5));
}
.kutu,
.box görseli {
kutu gölgesi: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

Çıktı:

Gördüğünüz gibi, kutu-gölge sırasında her elemana ayrı ayrı uygulanır. Düşen gölge ikisini de gruplandırır ve gölgeyi uygular.

Kırpılmış Öğeler

kullanabilirsiniz klip yolu Bir görüntünün veya öğenin hangi bölümlerinin gösterileceğini belirleyen belirli bir bölgeyi kırpma özelliği. NS gölge filtresi oluşturmamıza izin verir Düşen gölge kırpılmış öğede, onu o öğenin ebeveynine uygulayarak:

HTML

CSS

.parent-container {
filtre: gölge (0rem 0rem 1.5rem kestane rengi);
}
.clipped-element {
genişlik: 50em;
yükseklik: 50em;
kenar boşluğu: 0 otomatik;
arka plan resmi: url (smiling-girl.jpg);
klip yolu: daire (%50);
arka plan boyutu: kapak;
arka plan tekrarı: tekrar yok;
}

Çıktı:

Resmin %50'sini dairesel bir yolla kırptık. bu yüzden gölge filtresi görüntünün yalnızca görünen kısmına uygulanır. harika değil mi

Sınırlamalar ve Farklılıklar

Yukarıda tartıştığımız gibi, Düşen gölge desteklemiyor yayılmış parametre. Bu, bir anahat efekti oluşturmanın aşağıdakileri kullanarak mümkün olmayacağı anlamına gelir. Düşen gölge( ) işlev görür çünkü her yerde öldürülür. Ayrıca, farklı gölge efektleri oluşturur. kutu-gölge ve Metin gölgesi (aynı parametrelerle). arasındaki farkları hissedebilirsiniz. kutu-gölge ve Düşen gölge kaynatmak CSS Kutu Modeli. Biri onu takip ederken diğeri izlemez. İşte bir örnek:

HTML

Her MUO makalesi sizi bir adım daha yaklaştıracak.


Her MUO makalesi sizi bir adım daha yaklaştıracak.



Her MUO makalesi sizi bir adım daha yaklaştıracak.

Temel CSS

vücut {
dolgu: 5em 1em;
yazı tipi ailesi: 'Lucida Sans', 'Lucida Sans Normal', 'Lucida Grande',
'Lucida Sans Unicode', Cenevre, Verdana, sans-serif;
}
.parent-container {
genişlik: 72rem;
}
P {
yazı tipi boyutu: 3em;
yazı tipi stili: kalın;
}

Gölge efektleri uygulama

.Düşen gölge {
filtre: alt gölge (0,5em 0,5em 0,1em #555);
}
.box-gölge {
kutu gölgesi: 0,5em 0,5em 0,1em #555;
}
.Metin gölgesi {
metin gölgesi: 0,5em 0,5em 0,1em #555;
}

Çıktı:

olduğunu görebilirsiniz kutu-gölge olduğundan daha ağır, daha koyu bir gölge verir. Metin gölgesi ve Düşen gölge. Ayrıca, gölgenin konumu arasında küçük bir fark var. Metin gölgesi ve Düşen gölge. Yine de ihtiyaçlarınıza göre farklı gölge efektleri tercih edebilirsiniz.

Tarayıcı Desteği

NS Düşen gölge( ) işlev, Internet Explorer gibi eski tarayıcılar dışında tüm modern tarayıcılarda desteklenir. UX'i ciddi şekilde engelleyecek bir şey olmasa da, bir özellik sorgusu ekleyebilirsiniz. kutu-gölge geri çekil.

Farklı Gölge Efektleri ile Deney Yapın

popülaritesi kutu-gölge kullanım durumlarının çokluğu nedeniyle oldukça açıktır. Ancak Düşen gölge( ) işlevi son derece yetersiz kullanılmaktadır. Farklı gölge efektleri deneyeceğinizi ve uygulamaya çalışacağınızı umuyoruz. Düşen gölge gelecekteki projelerinizde

Sözde sınıflar, CSS'ye ve kişisel web geliştirme repertuarınıza tamamen yeni bir işlevsellik yelpazesi ekler. Daha yetkin ve verimli bir web geliştiricisi olmak için onlar hakkında daha fazla bilgi edinin.

CSS kutu gölgesi Nasıl Kullanılır: 13 Püf Noktası ve Örnekler

Mülayim kutular sıkıcı görünüyor. Onları CSS kutu gölge efektiyle süsleyin!

Sonrakini Oku

Yazar hakkında