Geliştirici / CSS
CSS Kutu Gölgesi Oluşturucu
Ofset, bulanıklık, yayılma, renk, opaklık, iç gölge ve birden çok katmanla CSS box-shadow oluşturun; hazır ayarları ve canlı önizlemeyi kullanıp CSS'yi kopyalayın.
CSS Kutu Gölgesi Oluşturucu: Her katman, box-shadow listesindeki bir gölgeye dönüşür: yatay ve dikey ofset, bulanıklık yarıçapı, yayılma ve eğik çizgiden sonra opaklığı yazılan rgb() biçiminde bir renk. Katmanlar, ilk katman üstte olacak şekilde çizilir. Önizleme kutusunun köşe yarıçapı, rengi ve arka planı tasarımınıza uyacak şekilde değiştirilebilir; gölge, sayfanızda olacağı gibi köşeleri izler. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.
- Kategori
- Geliştirici araçları
- Çalıştırma sayısı
- Tarayıcınızda
- Maliyet
- Ücretsiz · kayıt gerekmez
- Kullanılabilirlik
- Kullanıma hazır
Tamamen tarayıcınızda çalışır
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
Değerler sağa ofset, aşağı ofset, bulanıklık, yayılma ve renktir. Birkaç ince katman, tek ve yoğun bir gölgeden daha doğal görünür; sonraki katmanlar öncekilerin altına çizilir.
Hazır ayarlar
Yükseklik
Tasarım sistemleri, bir şeyin sayfanın üzerinde ne kadar yükseldiğini göstermek için gölgeler kullanır: Dinlenme hâlindeki bir kartın gölgesi küçük ve sıkıdır; menü veya iletişim kutusunun gölgesi ise daha büyük ve yumuşaktır. Her yerde farklı gölge kullanmak yerine birkaç sabit seviye belirlemek, arayüzün tutarlı görünmesini sağlar.
Koyu arka planda gölgeler neredeyse görünmez; bu durumda daha açık bir yüzey rengi veya ince bir kenarlık aynı işi görür. Düğmeler ve kartlar için gölgeleri bir CSS gradient ile eşleştirin.
Gölgeler ve performans
Büyük bir bulanıklığı çizmek, küçük bir bulanıklıktan daha fazla kaynak kullanır; çok sayıda gölgeli öğe aynı anda kaydırıldığında veya canlandırıldığında bu önemlidir. Bir gölgeyi üzerine gelindiğinde canlandırmak için her karede box-shadow değerini değiştirmek yerine, opacity ile bir pseudo-element üzerindeki ikinci ve daha güçlü gölgeyi yavaşça görünür yapmak daha akıcıdır.
Nasıl kullanılır?
- Bir hazır ayarla başlayın veya ilk katmanın ofset, bulanıklık, yayılma ve opaklık değerlerini ayarlayın.
- Daha yumuşak ve gerçekçi bir gölge için daha fazla katman ekleyin veya kutunun içine gölge vermek için iç gölgeyi seçin.
- box-shadow bildirimini kopyalayın.
Gizlilik ve sınırlamalar
Her şey tarayıcınızda çalışır; son gölgeniz yalnızca bu tarayıcıda tutulur.
İlgili araçlar
Sık sorulan sorular
box-shadow içindeki dört sayı nedir?
Yatay ofset (pozitif değer gölgeyi sağa taşır), dikey ofset (pozitif değer gölgeyi aşağı taşır), bulanıklık yarıçapı (değer büyüdükçe gölge yumuşar ve negatif olamaz) ve yayılmadır (pozitif değer gölgeyi kutudan daha büyük, negatif değer daha küçük yapar). Renk en sonda gelir.
Bir gölgenin doğal görünmesini nasıl sağlarım?
Düşük bir opaklık kullanın, gölgeyi ışık yukarıdan geliyormuş gibi aşağı doğru ofsetleyin ve iki veya daha fazla katmanı birleştirin: kutuya yakın, küçük ve daha keskin bir katmanla daha uzakta, büyük ve yumuşak bir katman kullanın. Biraz negatif yayılma, büyük bulanıklığın kenarlarda görünmesini engeller.
İç gölge ne yapar?
Gölgeyi dışarı yerine kutunun içine çizer. Böylece kutu içeri bastırılmış gibi görünür; bu görünüm giriş alanları ve basılmış düğmeler için uygundur.
Gölge bir görselin üzerinde neden görünmüyor?
box-shadow, görselin içindeki şeklin çevresine değil, öğenin kutusunun çevresine çizilir. Saydam bir PNG'nin dış hatları için bunun yerine CSS filter drop-shadow() kullanın.
Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez