Rank images blurry fix or SVG

For support and discussion related to templates and themes in phpBB 3.3.
Post Reply
User avatar
Costheme
Registered User
Posts: 37
Joined: Fri May 01, 2020 9:11 am

Rank images blurry fix or SVG

Post by Costheme »

Hi guys. Since we can't use SVG images for ranks, I just want to share with you a quick fix for blurry images ( Images get blurry when we resize them via CSS. As an example, take a look at the ranks images on this website).

blurry.png
blurry.png (6.99 KiB) Viewed 813 times
crisp.png
crisp.png (5.46 KiB) Viewed 813 times
To fix the blurry effect, you can use this:

Code: Select all

.profile-rank img {
	max-width: 160px; /* In my case the original size is 480x90px */
	image-rendering: -moz-crisp-edges;  /* Firefox */
	image-rendering:   -o-crisp-edges;   /* Opera */
	image-rendering: -webkit-optimize-contrast;   /* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}
Archan
Registered User
Posts: 3
Joined: Sat Sep 15, 2018 3:22 pm

Re: Rank images blurry fix or SVG

Post by Archan »

Where would I put this code?
User avatar
PlanetStyles.net
Former Team Member
Posts: 4747
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Rank images blurry fix or SVG

Post by PlanetStyles.net »

Archan wrote:
Fri Jan 29, 2021 5:25 am
Where would I put this code?
At the bottom of common.css file in your 'theme' folder is probably safest.

Refresh browser cache to see changes :)
Post Reply

Return to “[3.3.x] Styles Support & Discussion”