CSS Box-Shadow Oluşturucu

CSS Box-Shadow Oluşturucu nedir?

CSS Box-Shadow Oluşturucu, ön uç geliştiriciler ve tasarımcılar için yapılmış, CSS box-shadow özelliği için ücretsiz bir görsel düzenleyicidir. Bir veya daha fazla gölge katmanı ekleyin ve her katmanın offset-x, offset-y, bulanıklık yarıçapı, yayılma yarıçapı, rengi ve inset bayrağını basit sayı girişleri ve bir renk seçiciyle ayarlayın. Dama tahtası arka planı üzerindeki canlı bir önizleme kutusu birleşik sonucu gerçek zamanlı olarak gösterir ve her katmanı virgülle ayıran eksiksiz box-shadow bildirimi kopyalamanız için oluşturulur. Değerlerin sırasını ezberlemeden yumuşak yükseklik gölgeleri, keskin neumorfizm, parıltı efektleri veya katmanlı Material tarzı derinlik oluşturmak için kullanın.

CSS Box-Shadow Oluşturucu nasıl kullanılır

1. Gölgeyi yatay ve dikey olarak hareket ettirmek için ilk katmanın offset-x ve offset-y değerini (px cinsinden) ayarlayın; negatif değerler onu sola veya yukarı taşır.
2. Bulanıklık yarıçapını (gölgenin ne kadar yumuşak olduğunu) ve yayılma yarıçapını (ne kadar büyüdüğünü veya küçüldüğünü) ayarlayın.
3. Renk örneğiyle bir renk seçin veya bir onaltılık değer yazın — #00000040 gibi 8 haneli bir onaltılık değer gölgenin saydamlığını ayarlar.
4. Gölgeyi öğenin dışında değil içinde çizmek için inset onay kutusunu işaretleyin.
5. Üstüne başka bir gölge yığmak için Katman ekle'ye tıklayın, ardından değerleri düzenleyerek yeniden sıralayın; herhangi bir katmanı çöp kutusu düğmesiyle kaldırın.
6. Önizlemenin güncellenmesini izleyin, ardından oluşturulan box-shadow CSS'ini stil sayfanıza kopyalayın.

Örnekler

x 0, y 4, bulanıklık 12, yayılma 0, renk #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Katman 1: 0 1 2 0 #0000001a · Katman 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset işaretli, x 0, y 2, bulanıklık 6, yayılma 0, renk #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Sıkça sorulan sorular

box-shadow değerlerinin sırası nedir?

Her katman, önünde isteğe bağlı bir inset anahtar sözcüğüyle offset-x, offset-y, bulanıklık yarıçapı, yayılma yarıçapı, renk olarak yazılır. Bu araç her zaman dört uzunluğu da px cinsinden (offset-x, offset-y, bulanıklık, yayılma) çıkarır, böylece sıra belirsizliğe yer bırakmaz ve sonradan elle ayarlanması kolaydır.

Yarı saydam veya renkli bir gölge ekleyebilir miyim?

Evet. Renk alanına herhangi bir CSS rengi yazın — #00000040 gibi tam 8 haneli bir onaltılık değer (son iki hane alfadır) yarı saydam bir gölge verir ve adlandırılmış renkler veya herhangi bir onaltılık değer kullanabilirsiniz. Seçicinin renk örneği düz #rrggbb renklerini işler; alfa için metin alanını düzenleyin.

Birden fazla gölgeyi nasıl üst üste yığarım?

Her ek gölge için Katman ekle'ye tıklayın. Oluşturulan CSS her katmanı yukarıdan aşağıya sırayla virgülle ayırır — ilk katman en son (en üstte) boyanır. Bunu katmanlı Material tarzı derinlik için veya bir dış parıltıyı bir inset vurgusuyla birleştirmek için kullanın.

inset onay kutusu ne işe yarar?

Inset, gölgeyi öğenin kenarlığının içine çizer ve dış bir gölge yerine içe basılmış veya içe doğru parlayan bir görünüm oluşturur. Her katman için işaretleyin; aynı box-shadow değerinde inset ve dış gölgeleri karıştırabilirsiniz.

Verilerim herhangi bir yere yükleniyor mu?

Hayır. Oluşturucu tamamen tarayıcınızda JavaScript ile çalışır — renkleriniz ve değerleriniz asla bir sunucuya gönderilmez, bu yüzden gizli bir şekilde ve sayfa bir kez yüklendikten sonra çevrimdışıyken bile çalışır.