CSS Kutu Gölgesi Oluşturma

Kayma, bulanıklık ve opaklığı seçip tek katmanlı CSS kutu gölgesi kodunu oluşturun.

  • Ücretsiz
  • Kayıt yok
  • Dosyalar tarayıcıda işlenir

Eksi 200 artı 200 arası, sağ artıdır.

Eksi 200 artı 200 arası, aşağı artıdır.

0 keskin, 200 buğu verir.

Eksi 100 artı 100 arası.

HEX seçiciden gölge rengi.

0 saydam, 100 tam opak.

Dış yükselti ya da iç çukur seçin.

Sonuç burada görünecek

Girdi
HEX
Çıktı
CSS
Fiyat
Ücretsiz
Kayıt
gerekmez, dosyalar tarayıcıda işlenir

Nasıl kullanılır?

  1. Kayma, bulanıklık ve yayılma sayılarını alanlara yazın.
  2. Rengi ve opaklığı seçip iç gölge anahtarını işaretleyin.
  3. Oluştur düğmesine basın, önizlemeyi görüp kodu kopyalayın.

CSS kutu gölgesi üretirken bilmeniz gerekenler

Sıra ve ölçü: x, y, bulanıklık, yayılma

Kutu gölgesi tek satırda dört sayı ile kurulur; yatay kayma kutuyu sağa, dikey kayma aşağı taşır. 0 8px 16px 0px yazımı alta düşen yumuşak kart gölgesi verir, 0 2px 4px 0px yazımı temas çizgisine yakın durur. Bulanıklık 0 iken kenar keskin kalır, 24 piksel üstünde zeminle birleşip buğu olur.

Yayılma bulanıklıktan önce uygulanır; artı değer gölgeyi her yöne şişirir, eksi değer içe çeker. 0 0px 24px 4px renkli parlama, 0 1px 2px 0px ince temas gölgesi üretir. Ölçü aralığı v1 kapsamında kaymada eksi 200 artı 200, bulanıklıkta 0 ile 200, yayılmada eksi 100 artı 100 arasındadır.

Renk ve opaklık seçimi

Gölge rengi HEX seçiciden alınır, opaklık 0 ile 100 arasında ayrı kaydırıcıyla verilir. Siyahın yüzde 15 opaklığı rgba(0, 0, 0, 0.15) olur, beyaz zeminde doğal durur. Marka parıltısı için mavi tonun yüzde 45 opaklığı 0 0px 24px 4px ölçüsüyle birleşir, metin okunurluğunu bozmaz.

Opaklık düştükçe gölge saydamlaşır, bulanıklık arttıkça kenar dağılır. Açık zeminde koyu gölge yüzde 10 ile 20 bandında, koyu zeminde açık gölge yüzde 25 ile 40 bandında dengelidir. Renk körü dostu kontrol için önizlemeyi gri zeminde de deneyin, düşük kontrastlı seçimleri erken yakalayın.

İç gölge ne zaman açılır

Satır başına inset yazılırsa gölge kutunun içine çizilir, basılı buton ve gömük giriş alanı etkisi verir. inset 0 2px 6px rgba(0, 0, 0, 0.18) üstten çukur izlenimi kurar, dış gölgeyle birlikte iki satır yazılmalıdır. V1 tek katman ürettiği için iç ve dış aynı satırda birleşmez, iki ayrı üretim yapılıp virgülle eklenir.

Form alanlarında iç gölge 1 piksel çizgiyle birlikte kullanılır, odaklanınca dış halka eklenir. Kartlarda iç gölge tek başına kirli durur, dış gölgesiz kullanmayın. Önizleme kutusu 120 birim yükseklikte sabit tutulur, iç ve dış farkı büyümeden görülür.

Ne zaman kullanılır?

Fiyat kartı, açılır pencere ve bildirim kutusu zeminden ayrılacaksa bu üretici kullanılır. Tasarımcı iki ölçü verir, geliştirici opaklığı yüzde 15 tutup kodu stil dosyasına taşır. Toplantıda karar değişirse kaydırıcı oynatılır, sayfa yenilenmeden önizleme güncellenir.

Metin gölge zemininde yer alacaksa koyu gölge alta, içerik üste konur ve paragraf gölgesiz okunur. Tek seferde bir katman üretilir, sayfadaki her bileşen için ölçü ayrı hazırlanır. Çok katmanlı Material derinliği gerekiyorsa iki ayrı satır üretip virgülle birleştirin.

Sık sorulan sorular

CSS gölge oluşturma ücretsiz mi?

Evet, tek katmanlı kutu gölgesi üretimi ücretsizdir ve kayıt istemez. Ölçüleri değiştirip dilediğiniz kadar önizleme üretebilirsiniz. Sayfa yenilense bile araç aynı şekilde çalışır; kota veya ödeme ekranı çıkmaz.

Seçtiğim renk ve ölçüler sunucuya gönderilir mi?

Hayır, seçtiğiniz renk ve sayılar yalnızca tarayıcınızda işlenir, sunucuya gönderilmez. Müşteri paleti gibi gizli çalışmalarda işiniz bitince alanları temizleyin. Sonuç ekranda görünür, kayda alınmaz.

Blur ile spread farkı nedir?

Bulanıklık kenarı yumuşatır, yayılma gölgenin alanını büyütüp küçültür. 16 piksel bulanıklık buğu verirken 4 piksel yayılma gövdeyi şişirir. Keskin çerçeve için bulanıklığı sıfırlayıp yayılmayı sıfırda tutun, parlama için yayılmayı artı değerde deneyin.

Inset iç gölge ne işe yarar?

Satır başına yazılan inset gölgeyi kutunun içine çizer ve basılı düğme etkisi verir. Form girişleri ve çukur kartlarda kullanılır. Dış gölgeyle aynı satırda birleşmez; v1 kapsamında iki ayrı üretim yapıp virgülle ekleyin, önizlemede farkı kontrol edin.

Çok katmanlı gölge yazılır mı?

Hayır, v1 kapsamı tek katmanla sınırlıdır ve ikinci katman alanı bulunmaz. Katmanlı derinlik gerekiyorsa iki ayrı satır üretip virgülle birleştirin. Temas gölgesi için 0 1px 2px, ortam gölgesi için 0 8px 24px ölçüsünü üst üste yazın.