Kutu gölgelerini görsel olarak tasarlayın — ofset, bulanıklık, yayılma, renk ve saydamlığı ayarlayın ve CSS'yi kopyalayın.
box-shadow özelliği düz öğelere derinlik verir. Beş değer alır: yatay ofset, dikey ofset, bulanıklık yarıçapı, yayılma yarıçapı ve renk. Büyük bulanıklıklı ve küçük ofsetli ince bir gölge yükseklik olarak okunur; güçlü ofsetli sıkı bir gölge sert kenar olarak okunur. Tasarımcılar bu sayıları sezgiyle ayarlar, yani kaydırıcıları sürükler ve sonucu görür — tam olarak bu aracın yaptığı şey.
Ortadaki önizleme kutusu, kaydırıcıları hareket ettirirken gölgeyi gösterir. Alttaki CSS satırı gerçek zamanlı güncellenir: kopyalayın ve stil sayfanıza yapıştırın. Araç ayrıca öğenin dışı yerine içine boyanan iç gölgeleri de destekler — basılı düğmeler, giriş alanları ve girintili paneller için kullanışlıdır.
Her şey tarayıcınızda çalışır. Önizleme, bir render veya yaklaşım değil, bir div'e uygulanan gerçek bir CSS box-shadow'dur. Burada gördüğünüz, kullanıcılarınızın göreceği şeydir.
box-shadow: [inset] ofset-x ofset-y bulanıklık-yarıçapı yayılma-yarıçapı renk
Gölgeyi bulanıklaştırmadan önce genişletir veya daraltır. Pozitif yayılma gölgeyi öğeden büyük yapar; negatif yayılma onu küçültür. Sıfır, gölgenin öğeyle aynı boyutta olduğu anlamına gelir.
Evet, CSS'de. Bu araç bir gölge üretir. Daha fazlası eklemek için stil sayfanızda virgülle ayırın.
Gölgeyi öğenin dışı yerine içine boyar. Basılı durum düğmeleri veya girintili paneller için kullanışlıdır.
Evet. Gölge, öğenin border-radius'unu otomatik olarak takip eder.
Saydamlık kaydırıcısının bir alfa kanalına ihtiyacı olduğu için. Hex renkler opaktır; rgba gölgenin yarı saydam olmasını sağlar, bu daha doğal görünür.
Vai.la, herhangi bir URL'yi tıklama istatistikleri, QR Code ve kendi biolink'inizle birlikte kısa bir bağlantıya dönüştürür.
Vai.la, araçların nasıl kullanıldığından veya sonuçlarına dayanarak alınan kararlardan sorumlu değildir.