Kutu Gölgesi Oluşturucu

Bu Araç Nedir?

box-shadow, bir öğenin arkasına (veya içine) gölge çizen CSS özelliğidir. Elle yazıldığında, sırasıyla beş değer alır — yatay kayma, dikey kayma, bulanıklık yarıçapı, yayılma yarıçapı ve bir renk — ayrıca isteğe bağlı bir inset anahtar sözcüğü; bunların hepsini ilk denemede karıştırmak ya da çok ince ya da çok yoğun bir sonuç elde etmek kolaydır.

Bu araç, bunu doğrudan bir işlem haline getirir: kaydırıcıyı sürükleyin, canlı önizleme kutusunda gölgenin nasıl değiştiğini izleyin ve istediğiniz gibi göründüğünde tam CSS kodunu kopyalayın. Renk seçici ve opaklık kaydırıcısı, uygun bir rgba() değerini otomatik olarak oluşturur; zira şeffaf gölgeler genellikle tamamen opak olanlardan daha iyi görünür.

Neden Kullanmalısınız?

• Herhangi bir ayarı değiştirdiğinizde canlı önizleme anında güncellenir — kodu kaydetmeden önce gölgenin tam olarak nasıl görüneceğini görebilirsiniz.
• Offset-x, offset-y, bulanıklık, yayılma, renk ve opaklık üzerinde tek bir yerden tam kontrol.
• Tek bir tıklama ile, yüzen bir gölge yerine girintili bir görünüm için içe çekme efekti eklenir.
• Seçtiğiniz opaklık düzeyinde, rgba() biçimine dönüştürülmüş renkleri içeren, yapıştırmaya hazır CSS kodu üretir.
• Tamamen tarayıcınızda çalışır — yaptığınız hiçbir ayar hiçbir yere yüklenmez.
• Ücretsiz, kayıt gerektirmez, mobil cihazlarda çalışır.

Nasıl Kullanılır

1. Gölgenin konumunu ayarlamak için offset-x ve offset-y değerlerini belirleyin — pozitif değerler gölgeyi sağa/aşağıya, negatif değerler ise sola/yukarıya kaydırır.
2. Gölgenin kenarlarını yumuşatmak için bulanıklık yarıçapını artırın; gölgeyi öğenin kendisinden daha büyük hale getirmek için yayılma değerini artırın.
3. Bir renk seçin ve opaklığı ayarlayın — en gerçekçi gölgeler, tamamen siyah yerine %15–40 opaklık kullanır.
4. Gölgenin öğenin kenarlığının arkasında değil, içinde görünmesini istiyorsanız “inset” seçeneğini işaretleyin.
5. Oluşturulan CSS kodunu kopyalayın ve stil sayfanıza yapıştırın.

Örnek

Giriş

Offset: 0px, 10px · Blur: 20px · Spread: 0px · Color: black at 35% opacity

Çıkış

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Öğenin tam altında, yatay kaydırma içermeyen yumuşak bir gölge — en yaygın kart/düğme gölge stillerinden biri.

Tek gölge ve katmanlı gölgeler

Bu araç, gerçek hayattaki kullanımların büyük çoğunluğunu karşılayan tek bir gölge katmanı oluşturur — düğmeler, kartlar, modal pencereler ve açılır menüler neredeyse her zaman tek bir gölge kullanır. CSS, daha ayrıntılı derinlik efektleri için aynı öğe üzerinde virgülle ayrılmış birden fazla gölgeyi destekler (örneğin, yumuşak ve geniş bir gölgenin altına yerleştirilmiş dar ve koyu bir gölge), ancak bu, elle ekleyebileceğiniz bir ayrıntıdır: burada bir gölge oluşturun, ardından satırı çoğaltın, ikinci değer grubunu ayarlayın ve bunları virgülle birleştirin.

Yaygın kutu gölgesi desenleri

• Hafif kart kaldırma efekti: küçük kaydırma (0–4 piksel), orta derecede bulanıklık (8–16 piksel), %10–20 opaklıkta siyah.
• Yükseltilmiş modal/açılır menü: daha geniş kenar boşluğu (4–10 piksel) ve bulanıklık (20–30 piksel), daha belirgin bir havada süzülme hissi için %20–35 opaklık.
• Baskılı/girintili düğme: Girintiyi kontrol edin; gölgenin kabartma değil çukur gibi algılanması için hafif negatif hissi veren bir ofset ve orta derecede bulanıklık uygulayın.
• Renkli parlaklık: Siyah yerine marka rengini seçin, opaklığı %40–60’a yükseltin ve düğmelerin etrafında yumuşak bir parlaklık efekti elde etmek için yayılma değerini biraz artırın.
• Keskin/sert gölge: Yumuşak bir gölge yerine net ve kaydırılmış bir siluet elde etmek için bulanıklığı 0’a, yayılmayı da 0’a ayarlayın.

Yuvarlatılmış köşelerle eşleştirme

Gölgeler ve yuvarlatılmış köşeler sürekli olarak bir arada kullanılır — kartlar, düğmeler ve modal pencereler neredeyse her zaman ikisini birden birleştirir. Aynı öğenin köşelerini yuvarlatmak için Kenarlık Yarıçapı Oluşturucuyu kullanın, ardından oluşturulan her iki CSS tanımını da birlikte uygulayın.

→ Kenar Yarıçapı Oluşturucu · Birim Dönüştürücü

Sıkça Sorulan Sorular