Önemli noktalar
- 01Her box-shadow parametresinin kendi kaydırıcısı artı piksel kesinliği ayarlamak için sayısal giriş vardır.
- 02Inset geçişi, basılmış veya neumorfik efektler için damla gölgesi ve iç gölge arasında geçer.
- 03Renk ve opasite ayrı olarak kontrol edilir, okunabilir CSS için rgba() çıktısı verir.
- 04Önizleme, gerçek bir elementi gerçek CSS özelliğini kullanır — tarayıcınızda tam olarak ne görüyorsanız, stil sayfanız işlendir.
Neden Görsel Box-Shadow Oluşturucu Kullanmalısınız
CSS box-shadow, altı değer alır — yatay ofset, dikey ofset, bulanıklık yarıçapı, yayılma yarıçapı, renk ve isteğe bağlı inset anahtar sözcüğü. Hafızadan yazma basit gölgeler için çalışır, ama daha nüanslı bir şey için — sıkı bir ışıltı, derin bir damla gölgesi, yumuşak yükseltme katmanı — tahmin ediyorsunuz ve bir şey doğru görünene kadar yüklüyorsunuz.
Görsel oluşturucu bu yineleme döngüsünü daraltır. Kaydırıcı hareket ettirin, değişimi anında görün ve yalnızca tatmin olduğunuzda kopyalayın. Handytool'un box-shadow oluşturucu tamamen tarayıcınızda çalışır, böylece önizleme gerçek bir elementi gerçek CSS özelliğidir — araç ile gerçek sayfa arasında render farklılıkları yoktur.
Box Shadow Nasıl Tasarlanır
- 01
Yatay ve dikey ofsetleri ayarlayın
Pozitif değerler gölgeyi sağa ve aşağıya hareket ettir. Negatif değerler onu sola ve yukarıya hareket ettir. Ortalanmış gölge (0, 0) bir ışıltı etkisi oluşturur.
- 02
Bulanıklık yarıçapını ayarlayın
Daha yüksek bulanıklık değerleri yumuşak, daha yayılmış gölgeler oluşturur. Sıfır bulanıklık sert, katı gölge anahat üretir.
- 03
Yayılma yarıçapı ayarlayın
Pozitif yayılma, bulanıklaştırmadan önce gölgeyi büyütür. Negatif yayılma onu küçültür, bu da sıkı altı öğesi gölgeleri için yararlıdır.
- 04
Renk ve opasite seçin
Gölge tonunu seçmek için renk seçiciyi kullanın, ardından hafiflik için opasite açılır. Çıktı değerleri okunabilir tutmak için rgba() kullanır.
- 05
Gerekirse inset'i geçiş yapın
Inset damla gölgesinden iç gölgeye geçer — basılı düğmeler, batık girdiler ve neumorfik yüzeyler için yararlı.
- 06
CSS bildirisini kopyalayın
Tam box-shadow değerini almak için Kopyala'ya tıklayın ve stil sayfasına yapıştırın.
Yükleme Yok, Hesap Yok
Oluşturucu tamamen istemci tarafıdır. Renk seçimleriniz, sayısal değerler ve önizleme durumları tarayıcınızda kalır — sunucuya hiçbir şey gönderilmez. Oluşturulacak hesap yoktur ve kullanım sınırı yoktur.
Önizleme elementi gerçek CSS box-shadow özelliğini kullandığından, çıktı tanım gereği doğrudur — tuval oluşturma veya ekran görüntüsü yaklaştırması yoktur. Kopyaladığınız piksel değerleri, tarayıcının uyguladığı piksel değerleridir.
Box-Shadow Oluşturucu SSS
Yayılma değeri ne yapar?
Pozitif yayılma gölgeyi bulanık uygulanmadan önce tüm yönlerde büyütür; negatif yayılma onu küçültür. Düşük bulanıklık ile eşleştirildiğinde sıkı, tanımlanmış ışıltıları kullanışlı.
Birden fazla box gölgesi ekleyebilir miyim?
Bu oluşturucu bir kez tek gölge çıktısı. Onları katmanlamak için değeri kopyalayın ve CSS'de virgülle ayrı birden fazla gölgeyi kopyalayın — box-shadow virgülle ayrılmış listeyi kabul eder.
Neden inset gölgem görünmüyor?
Inset gölgeleri öğe içinde çizerek, bu nedenle göstermek için arka plan rengi veya görünür dolgu gerekir. Şeffaf veya sıfır boyutlu öğelerde görünmüyorlar.
Önizleme piksel doğru mu?
Evet — önizleme gerçek bir DOM element üzerindeki gerçek CSS box-shadow özelliğini kullanır, bu nedenle stiliniz tam olarak ne üretileceğini görürsünüz.
Neumorfik gölge nedir?
Neumorfizm, bir öğeyi düz bir yüzeyden kaldırılan veya bastırılan gibi görünmesini sağlamak için zıt yönlere mahsup iki gölge — ışık ve koyu kullanır. Basılmış varyant için her iki gölge tipik olarak inset olur.