Tasarım trendleri her yıl değişiklik gösterse de, sizin gibi zımba gölge efektleri kullanımı güvenebilirsiniz box-shadow ve açılan gölge olumlu bir web sitesinin estetik katkıda bulunmak. Sevimsiz görünmeden hoş, güzel işlenmiş efektler oluşturmak için alt gölgeleri kullanabilirsiniz .
CSS drop-shadow özelliğine daha yakından bakalım .
CSS alt gölgesi nedir?
drop-shadow() , belirtilen bir nesnenin şekli etrafında bir gölge görüntüleyen bir CSS efektidir. İşte bir CSS açılır gölgesi uygulamak için sözdizimi .
Syntax:
filter: drop-shadow(offset-x offset-y blur-radius color);blur( ) , parlaklık( ) ve drop-shadow( ) dahil olmak üzere çok çeşitli filtre işlevleri vardır .
offset-x yatay mesafeyi, offset-y ise dikey mesafeyi belirler. Negatif değerlerin gölgeyi nesnenin soluna ( offset-x ) ve üstüne ( offset-y ) yerleştirdiğine dikkat edin.
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 <color> olarak belirtilir . Bir renk belirtmediyseniz, color özelliğinin değerini takip eder .
CSS alt gölgesi Ne Zaman Faydalıdır?
Kutu gölgesinin işi oldukça iyi yaptığını zaten biliyor olabilirsiniz . Öyleyse, neden gölgeye ihtiyacımız olduğunu düşünebilirsiniz ? Drop-shadow() işlevinin cankurtaran olduğu çok sayıda durum vardır . Bunlardan birkaçına göz atalım:
Dikdörtgen Olmayan Şekiller
Kutu gölgesinden farklı olarak , dikdörtgen olmayan şekillere bir gölge ekleyebilirsiniz . Ö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, box-shadow veya drop-shadow ile tamamlanabilir . Her iki senaryoyu da göz önünde bulundurun:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Drop-shadow</title>
</head>
<body>
<div class="star-img">
<img class="box-shadow" src="star.svg" alt="">
<img class="drop-shadow" src="star.svg" alt="">
</div>
</body>
</html>CSS
.star-img img {
display: inline-block;
height: 15em;
width: 25em;
}
.box-shadow {
color: red;
box-shadow: 0.60em 0.60em 0.2em;
}
.drop-shadow {
filter: drop-shadow(0.60em 0.60em 0.2em);
}Çıktı:
Her iki etkiyi karşılaştırırken, bir kutu gölgesinin dikdörtgen bir gölge verdiği açıktır ; ayrıca görüntünün şeffaf olması veya zaten bir arka plana sahip olması önemli değildir. Öte yandan, alt gölge , görüntünün şekline uyan bir gölge oluşturmanıza olanak tanır.
Sınırlayıcı faktörler, drop-shadow() işlevinin , inset anahtar sözcüğü ve spread parametresi dışında <shadow> türündeki tüm parametreleri kabul etmesidir .
Gruplandırılmış Öğeler
Belirli öğeleri üst üste getirerek bileşenler oluşturmanız gerekebileceği birkaç durum vardır. box-shadow kullanıyorsanız , doğru şekilde gölge oluşturmaya çalışma sorunuyla karşılaşacaksınız. Bir resmi ve bir metin bileşenini gruplarken şu şekilde çalışır:
HTML
<body>
<div class="parent-container drop-shadow">
<div class="image-container box">
<img src="smiling-girl.jpg" alt="smiling girl" />
</div>
<div class="text-container box">
<h2>Live in the moment</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.</p>
</div>
</div>
</body>
Temel CSS
body {
padding: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h2 {
font-size: 2rem;
}
p {
font-size: 0.8rem;
}
.parent-container {
display: flex;
flex-direction: column;
height: 17rem;
width: 50em;
}
.image-container img {
width: 15em;
position: absolute;
z-index: 1;
top: 2em;
left: 1.5em;
}
.text-container {
color: rgb(255, 236, 236);
background-color: rgb(141 0 35);
width: 30rem;
padding: 3rem;
align-self: flex-end;
position: relative;
}Şimdi, farkı görmek için kutu gölgesini ve alt gölgeyi uygulayın.
.drop-shadow {
filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5));
}
.box,
.box img {
box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3);
}Çıktı:
Gördüğünüz gibi, kutu gölge ayrı ayrı iken her öğe üzerinde uygulanır açılan gölge grupları her ikisi gölgeyi uygular.
Kırpılmış Öğeler
Sen kullanabilirsiniz klip yollu bir görüntünün veya öğenin parçaları gösterilmesi gereken belirler belirli bir bölgeye klibi için özellik. Alt gölge filtresi , kırpılan öğe üzerinde, onu o öğenin ebeveynine uygulayarak bir gölge oluşturmamıza olanak tanır :
HTML
<body>
<div class="parent-container">
<div class="clipped-element">
</div>
</div>
</body>CSS
.parent-container {
filter: drop-shadow(0rem 0rem 1.5rem maroon);
}
.clipped-element {
width: 50em;
height: 50em;
margin: 0 auto;
background-image: url(smiling-girl.jpg);
clip-path: circle(50%);
background-size: cover;
background-repeat: no-repeat;
}Çıktı:
Resmin %50’sini dairesel bir yolla kırptık. Bu nedenle, 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, gölge , yayılma parametresini desteklemiyor . Bu, her yerde öldürüleceğinden , drop-shadow() işlevini kullanarak bir anahat efekti oluşturmanın mümkün olmayacağı anlamına gelir . Ayrıca, kutu gölgesinden ve metin gölgesinden (aynı parametrelerle) farklı gölge efektleri oluşturur . Sen hissedebilirsiniz arasındaki farklar box-shadow ve açılan gölge aşağı kaynar CSS Kutu Modeli . Biri onu takip ederken diğeri izlemez. İşte bir örnek:
HTML
<body>
<div class="parent-container">
<p class="drop-shadow">Every MUO article will bring you one step closer.</p>
<p class="box-shadow">
Every MUO article will bring you one step closer.
</p>
<p class="text-shadow">
Every MUO article will bring you one step closer.
</p>
</div>
</body>Temel CSS
body {
padding: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.parent-container {
width: 72rem;
}
p {
font-size: 3em;
font-style: bold;
}Gölge efektleri uygulama
.drop-shadow {
filter: drop-shadow(0.5em 0.5em 0.1em #555);
}
.box-shadow {
box-shadow: 0.5em 0.5em 0.1em #555;
}
.text-shadow {
text-shadow: 0.5em 0.5em 0.1em #555;
}Çıktı:
Bunu görebilirsiniz kutu gölge daha ağır, daha koyu gölge veren metin gölge ve açılan gölge . Ayrıca, text-shadow ve drop-shadow arasında shadow konumlandırmasında küçük bir fark var . Yine de ihtiyaçlarınıza göre farklı gölge efektleri tercih edebilirsiniz.
Tarayıcı Desteği
Açılan gölge () işlevi Internet Explorer gibi eski tarayıcılarda dışındaki tüm modern tarayıcılarda desteklenir. UX’i ciddi şekilde engelleyebilecek bir şey olmasa da, kutu gölgesi yedeğine sahip bir özellik sorgusu ekleyebilirsiniz .
Farklı Gölge Efektleri ile Deney Yapın
Kutu gölgesinin popülaritesi , çok sayıda kullanım durumu nedeniyle oldukça açıktır. Bununla birlikte, drop-shadow() işlevi oldukça yetersiz kullanılmaktadır. Farklı gölge efektleri deneyeceğinizi ve gelecekteki projelerinizde alt gölge uygulamaya çalışacağınızı umuyoruz .
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.
