Gölgeler

CSS Podcast'i - 017: Gölgeler 'nı inceleyin.

Diyelim ki size bir tasarım gönderildi ve bu tasarımda bir tişört resmi var. gölgelendiriliyor. Tasarımcı, ürün resminin dinamik olduğunu söylüyor ve içerik yönetim sistemi üzerinden güncellenebilir. gölgenin de dinamik olması gerekir. Tişört yerine Resim siperlik, şort ya da başka bir öğe olabilir. Bunu CSS ile nasıl yapabilirsiniz?

CSS box-shadow ve text-shadow mülk, ancak resim metin olmadığı için text-shadow kullanılamaz. box-shadow kullanırsanız gölge, etrafındaki kutunun üzerinde olur etmedik.

Neyse ki başka bir seçenek daha var: drop-shadow() filtresini uygulayın. Bu, tasarımcının istediği şeyi tam olarak yapmanızı sağlar. CSS'deki gölgeler için birçok seçenek var. her biri farklı bir kullanım alanı için tasarlandı.

Kutu gölgesi

box-shadow özelliği, bir HTML öğesinin kutusuna gölge eklemek içindir. Blok öğeler ve satır içi öğelerde çalışır.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow için değerlerin sırası şu şekildedir:

1. Yatay uzaklık: pozitif bir sayı sayıyı soldan, negatif bir sayı ise sağdan dışarı iter.
2. Dikey ofset: pozitif bir sayı onu yukarıdan aşağı iter, eksi bir sayı ise aşağıdan yukarı doğru iter.
3. Bulanıklık yarıçapı: büyük bir sayı daha bulanık bir gölge oluşturur. küçük bir sayı daha keskin bir gölge oluşturur.
4. Genişlik yarıçapı (isteğe bağlı): büyük bir sayı gölgenin boyutunu artırır, ne kadar küçük bir sayıysa gölgeyi küçültür. 0 olarak ayarlanırsa bulanıklık yarıçapı ile aynı boyutta olacak şekilde ayarlayın.
5. Renk: Geçerli herhangi bir renk değeri. Tanımlanmamışsa hesaplanan metin rengi kullanılır.

Bir kutuyu gölgelendirmek için iç gölgeyi dış gölge yerine diğer özelliklerden önce bir inset anahtar kelimesi ekleyin.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

Birden fazla gölge

box-shadow ile istediğiniz kadar gölge ekleyebilirsiniz. Bunu yapmak için değer kümelerinden oluşan, virgülle ayrılmış bir koleksiyon ekleyin:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

Kutu gölgesini etkileyen özellikler

Kutunuza border-radius eklemek, kutu gölgesinin şeklini de etkiler. Bunun nedeni CSS'nin kutunun şekline göre bir gölge oluşturmasıdır sanki ışık doğru yöneltiyormuş gibi.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

box-shadow içeren kutunuz overflow: hidden içeren bir kapsayıcıdaysa gölge de bu taşmanın dışına çıkmaz.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

Metin gölgesi

text-shadow özelliği, box-shadow özelliğine çok benzer. Yalnızca metin düğümlerinde çalışır.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

text-shadow değerleri, box-shadow ile aynı ve aynı sırada. Tek fark text-shadow URL'sinde spread değeri ve inset anahtar kelimesi olmamasıdır.

Eklediğiniz box-shadow, kutunuzun şekline kırpılır. ancak text-shadow oranında klip yok. Bu, metninizin tamamen veya yarı şeffaf olduğu durumlarda gölgenin üzerinden görünür.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Birden fazla gölge

text-shadow kullanarak istediğiniz kadar gölge ekleyebilirsiniz, Tıpkı box-shadow. Değer kümelerinin virgülle ayrılmış bir koleksiyonunu ekleyin. ve 3D metin gibi etkileyici metin efektleri oluşturabilirsiniz.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Gölge

Bir resmin olası eğrilerini takip eden bir gölge elde etmek için CSS drop-shadow filtresini kullanın. Bu gölge, bir alfa maskeye uygulandığından, kesilmiş resme gölge eklemek için çok kullanışlı bir hale gelir. her şeyi öğreteceğiz.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

drop-shadow filtresi, box-shadow ile aynı değerlere sahip ancak inset anahtar kelimesine ve spread değerine izin verilmiyor. İstediğiniz kadar gölge ekleyebilirsiniz. filter özelliğine birden fazla drop-shadow değeri ekleyerek. Her gölge, konumlandırma referans noktası olarak son gölgeyi kullanır.

Öğrendiklerinizi sınayın

Gölgeler hakkındaki bilginizi test edin