Blog

Background ve Gradient'ler: background-image, size, position, Çoklu Katman, linear/radial/conic-gradient ve image-set()

Bir görselin üstündeki metni okunur kılmak için background-image'a görselden önce yarı saydam bir gradient katmanı yazılır, görsel image-set() ile 1x/2x ve AVIF olarak seçilir, background shorthand'i ise background-color'ı da sıfırladığı için dikkatli kullanılır. Bookstore'un kampanya banner'ında contrast oranını piksel okuyarak ölçüyor, sRGB'deki gri orta noktayı in oklch ile düzeltiyor, conic-gradient ile puan halkası ve reduced-motion'a uyan bir skeleton yazıyoruz.