CSS ile görsel keskinleştirme

CSS 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/

Yorumlar

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir