Görsel efektler

Derinlik ve doku

• Gerçekçi ve yumuşak derinlik efektleri için birden fazla gölgeyi katmanlar halinde kullanın.
• Dikdörtgen olmayan şekiller veya şeffaf PNG'ler için box-shadow yerine filter: drop-shadow() kullanın.
• Işıklandırma katmanları için mix-blend-mode ve background-blend-mode kullanın (kapsamı isolation: isolate ile sınırlayın)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

Renk geçişleri ve color-mix()

Gradyanlar veya color-mix() için interpolasyon renk uzayını açıkça belirtmek üzere in oklch ya da in oklab kullanın.

• in oklch, renkleri daha iyi korur ancak özellikle renkler arasındaki daha büyük farklar için cihaz gamutunun dışına daha kolay çıkabilir.
• in oklab, gamut içinde daha kolay kalır (gamut içi uç noktalar olduğu varsayılır) ancak özellikle zıt tonlar arasında interpolasyon yaparken ortada soluk, doygunluğu azaltılmış renkler oluşturabilir.
• Özel bir nedeniniz yoksa (ör. srgb'de interpolasyon yapması gereken bir renk seçici oluşturuyorsanız) in srgb KULLANMAYIN.

Fallback

2024'ten önceki bazı tarayıcılar, gradyan renk enterpolasyon alanını desteklemez. Bu tarayıcıları desteklemek için bir değişken tanımlayarak jetonu yalnızca kullanımı güvenli olduğunda kullanın:

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

Ardından şu şekilde kullanın:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• Önemli: Bu tekniği kullanıyorsanız her zaman boş olmayan bir gradyan ön talimatı olduğundan emin olun. Aksi takdirde eski tarayıcılarda söz dizimi hatası oluşur.
• color-mix() için buna ihtiyacınız YOKTUR. Bir tarayıcı color-mix() özelliğini destekliyorsa in <color-space> bağımsız değişkenini de destekler.

Desenler

CSS gradyanları ve sert duraklar aracılığıyla birçok desen oluşturulabilir. Bunlar, çevreleyen bağlamdaki CSS değişkenlerine ve uzunluklarına erişebildikleri için SVG'lerden veya harici resimlerden daha esnek ve performanslı olabilir. Konumu iki kez tekrarlamanız gerekmez. Yalnızca 0 veya 0% kullanın. Gradyan düzeltme, konumu otomatik olarak ayarlar.

Örnekler aşağıda verilmiştir.

Her biri 1em genişliğinde dikey şeritler:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

Her biri 1em genişliğinde çapraz çizgiler:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

1em kareli dama deseni:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

2em aralıklı (yatay/dikey; çapraz mesafe için sqrt(2) ile çarpın) .5em yarıçaplı noktalara sahip puantiyeli:

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

Basit pasta grafik:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

Önemli: Grafikleri oluşturmak için gradyanlar kullanırken ekran okuyucular için metin tabanlı bir yedek olduğundan emin olun. ZORUNLU: Alternatif metin ve medya yönergeleri altındaki Erişilebilirlik Kodlama Yönergeleri'nde ayrıntılı olarak açıklandığı şekilde, erişilebilir bir alternatif olarak anlamsal veri tablosu sağlamanız ZORUNLUDUR.