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

Replicant · 1 Kas 2021

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.

Kod:

Syntax:
filter: drop-shadow(offset-x offset-y blur-radius color);

blur() , bright( ) 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

Kod:

<!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

Kod:

.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ölgenin 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

Kod:

<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

Kod:

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.

Kod:

.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

Kod:

<body>
<div class="parent-container">
<div class="clipped-element">
</div>
</div>
</body>

CSS

Kod:

.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

Kod:

<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

Kod:

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

Kod:

.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.

DumanInc · 1 Kas 2021

Paylaşım İçin Teşekkürler

ByESiNTi · 1 Kas 2021

Eline Sağlık,Paylaşım için Teşekkürler.

Replicant · 1 Kas 2021

DumanInc' Alıntı:
Paylaşım İçin Teşekkürler

Esinti_' Alıntı:
Eline Sağlık,Paylaşım için Teşekkürler.

Rica ederim.

MamiVEVO · 1 Kas 2021

Paylaşım için teşekkürler,Ellerine sağlık.

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

Replicant

Ehlî olmuşum elemlerin

CSS alt gölgesi nedir?

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

Dikdörtgen Olmayan Şekiller

Gruplandırılmış Öğeler

Kırpılmış Öğeler

Sınırlamalar ve Farklılıklar

Tarayıcı Desteği

Farklı Gölge Efektleri ile Deney Yapın

DumanInc

Web Development

ByESiNTi

ByESiNTi TURKMMO

Replicant

Ehlî olmuşum elemlerin

MamiVEVO

sosyalmerkezin.com

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

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

Replicant

Ehlî olmuşum elemlerin

CSS alt gölgesi nedir?​

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

Dikdörtgen Olmayan Şekiller​

Gruplandırılmış Öğeler​

Kırpılmış Öğeler​

Sınırlamalar ve Farklılıklar​

Tarayıcı Desteği​

Farklı Gölge Efektleri ile Deney Yapın​

DumanInc

Web Development

ByESiNTi

ByESiNTi TURKMMO

Replicant

Ehlî olmuşum elemlerin

MamiVEVO

sosyalmerkezin.com

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

CSS alt gölgesi nedir?

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

Dikdörtgen Olmayan Şekiller

Gruplandırılmış Öğeler

Kırpılmış Öğeler

Sınırlamalar ve Farklılıklar

Tarayıcı Desteği

Farklı Gölge Efektleri ile Deney Yapın