diff options
Diffstat (limited to 'content/blog/2025/pixelated-render-css.md')
| -rw-r--r-- | content/blog/2025/pixelated-render-css.md | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/content/blog/2025/pixelated-render-css.md b/content/blog/2025/pixelated-render-css.md new file mode 100644 index 00000000..bc39559c --- /dev/null +++ b/content/blog/2025/pixelated-render-css.md @@ -0,0 +1,24 @@ ++++ +title = "Pixelated images for vintage inspired websites" +author = ["Michał Sapka"] +date = 2025-01-08T11:27:00+01:00 +categories = ["blog"] +draft = false +weight = 2001 +image_dir = "blog/images" +image_max_width = 600 +Abstract = "Simple CSS trick for fun an profit" ++++ + +We don't take kindly of modern, huge images here, at Crys. +But modern browsers don't care and they put a significant amount of grease over them. +Images must be big or ugly, and therefore I have more grease over my web buttons than in my fries. + +But CSS comes to save the day once again! +We can force the amazing, pixelated rendering that we want. + +```css +@media (min-resolution: 192dpi) { * { image-rendering: pixelated; } } +``` + +(I stole from min-resolution [Ruben's retro site](http://retro.rubenerd.com), like a lot of other things). |