Softonic

CSS Box Shadow (Kutu Gölgesi) Oluşturucu

Adım 1 / 2
Sonraki

Bir seferde tek bir box-shadow kuralı oluşturun: yatay ve dikey ofset, bulanıklık, yayılma, renk ve isteğe bağlı inset değerlerini ayarlayın, ardından sonucu kopyalayın. Gerçek gölgeler genellikle iki veya üç katman gerektirir; bu yüzden her katmanı ayrı oluşturup kuralları virgülle birleştirin.

Kutu gölgesi nasıl tasarlanır

  1. 1

    Gölge değerlerini ayarlayın

    Yatay ofset, dikey ofset, bulanıklık yarıçapı, yayılma ve saydamlıklı renk.

  2. 2

    inset'i değiştirin

    İç gölge elde etmek için gölgeyi inset'e çevirin; basılı düğmeler ve oyuk etkileri için kullanışlıdır.

  3. 3

    Gölge rengini seçin

    Düşük saydamlıkta siyah klasik tercihtir. Öğenin tonuna uygun ve biraz daha koyu olan renkli gölgeler daha doğal görünür.

  4. 4

    CSS'i kopyalayın

    Tek gölge kuralını kopyalayıp stil sayfanıza yapıştırın. Katmanlı gölgeler için her katmanı ayrı oluşturup kuralları virgülle birleştirin.

box-shadow söz dizimi

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];
  • x-offset: pozitif = sağ, negatif = sol.
  • y-offset: pozitif = aşağı, negatif = yukarı.
  • blur: 0 = keskin kenar, değer büyüdükçe daha yumuşak. Görünür boyut, öğenin dışına doğru yaklaşık bulanıklık değerinin 1,5 katı kadar uzanır.
  • spread: öğenin ötesine eklenen boyut. Pozitif değer gölgeyi büyütür; negatif değer küçültür (ince halelerde işe yarar).
  • colour: her CSS rengini destekler. rgba(0, 0, 0, 0.15) en sık kullanılan temel değerdir.
  • inset: gölgeyi öğenin içine çeviren anahtar sözcük.

Katmanlı gölgeler gerçekçi görünür

Bu oluşturucu bir seferde yalnızca tek bir gölge kuralı üretir; katmanlı bir gölge oluşturmak için her katmanı ayrı üretip kuralları virgülle birleştirin.

Tek başına 0 0 40px gölgesi bulanık görünür. İki gölge, öğeye yakın küçük ve keskin bir gölge ile daha uzaktaki büyük ve yumuşak bir gölge, gerçek ışığın nasıl saçıldığını taklit eder.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

İlk satır sıkı temas gölgesini, ikinci satır daha yumuşak çevre gölgesini verir. Bu tek desen, kart biçimindeki arayüzlerin %80’ini kapsar.

Yükseklik (elevation) sistemleri

Material Design, her biri farklı bir gölge kümesine sahip 6 yükseklik (elevation) seviyesi kullanır. Basitleştirilmiş hâliyle:

Yükseklik Gölge
1 (durağan) 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)
2 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23)
3 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23)
4 (kaldırılmış) 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22)
5 (yüzen) 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22)

Her yükseklik rolü için bir tane seçin ve tutarlı biçimde kullanın.

Renkli gölgeler daha doğal görünür

Saf siyah gölgeler yapay durur, çünkü gerçek gölgeler altlarındaki yüzeyin rengini alır. Şunu deneyin:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

Saf siyah yerine serin bir mavi-gri. Sıcak arka planlarda daha sıcak bir ton kullanın.

Performans

box-shadow her yeniden boyamada (repaint) çizilir. Çok sayıda öğe üzerindeki büyük ve ağır gölgeler kaydırmayı yavaşlatabilir. Hafifletme yöntemleri:

  • Bir bileşik katmanı zorlamak için öğeye transform: translateZ(0) uygulayın.
  • Karmaşık gölgeleri filter: drop-shadow() ile yalnızca gölgenin bir clip-path’i izlemesi gerektiğinde değiştirin (genel olarak daha yavaştır).
  • Sık sık yeniden işlenen (render) öğelerde gölgeleri sınırlayın.

Basılı durumlar için inset

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

inset gölgeler oyuk bir görünüm yaratır; düğme yüzeye bastırılmış gibi görünür. Aşağı yönlü küçük bir transform: translateY(1px) ile birleştirdiğinizde dokunsal bir tıklama hissi elde edersiniz.

Sık Sorulan Sorular

Genellikle bulanıklık çok düşük ya da yayılma çok yüksek olduğu içindir. Bulanıklığı olmayan, keskin kenarlı bir gölge kopya bir öğe gibi görünür. Bulanıklığı artırın (20-30px yaygın bir başlangıç noktasıdır) ve yayılmayı 0 veya çok küçük negatif değerlerde tutun.

box-shadow, border-radius dâhil olmak üzere öğenin border-box’ını izler; bu nedenle yuvarlatılmış kartlar otomatik olarak güzelce yuvarlatılmış gölgeler alır. clip-path şekillerinde box-shadow kırpmayı izlemez; bunun yerine filter: drop-shadow() kullanın.

Gölgeyi seçtiğiniz yönde güçlü biçimde kaydırın ve karşı tarafı gizlemek için negatif yayılma kullanın. Veya iki gölge kullanın, biri hedef tarafta görünür, diğeri ise istenmeyen taşmayı “yutmak” için negatif yayılmalı.

Kesin bir sınır yoktur, ancak her gölge ayrı bir boyama geçişidir. Üç ila dört katman pratik üst sınırdır; daha fazlası gerekiyorsa bunun yerine bir arka plan görseli veya SVG kullanmayı düşünmelisiniz.

İlgili Araçlar

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur