CSS KodlamaCSS ile görsel keskinleştirme

Arama motorları üzerinden geliyorsanız muhtemelen siz de aynı dertten müzdaripsinizdir. Vektörel çalışmıyorsanız yada büyük bir logoyu css ile küçültüp siteye gömmüyorsanız direkt PS üzerinden ufak boyutlu logonuzu sitenize attığınızda görüntünün kötüleştiğini görüyorsanız rendering komutu size göre.

img {   image-rendering: auto;   image-rendering: crisp-edges;   image-rendering: pixelated; }

auto değeri; görüntünün görünümünü en üst düzeye çıkarmak için tarayıcının standart algoritmasını kullanan varsayılan değer.

crisp-edges; görüntünün kontrastı, renkleri ve kenarları herhangi bir düzleştirme veya bulanıklık olmadan korunur.

pixelated; görüntü boyutu değiştikçe tarayıcı, en yakın komşu ölçeklemeyi kullanarak pikselli stilini koruyacaktır.

Örnek Kullanım:

.logom img{ image-renderind: pixelated; }

Kaynak: https://css-tricks.com/almanac/properties/i/image-rendering/

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yorumu Yolla