DEV Community: MikaeI

I made a library that adds a metallic look to anything you throw at it

MikaeI — Wed, 08 Feb 2023 21:50:40 +0000

TL;DR: Shiny metal UIs, baby. Check it out over on Metalmorphism...

I've been obsessing over creating a high-end and unique metallic look that I feel has been sorely missing from the web. I've put quite a bit of effort into ensuring the implementation is lightweight, performant and cross-browser compatible.

Maybe Metalmorphism can bring a touch of metallic elegance to the web in 2023?

The library I've written lets you turn any HTML element into a metallic looking thing by giving it a certain classname. It generates the SVG code (filters and all) on the fly and renders the raster image to a canvas element that is placed inside the element. The library will respect the dimensions, as well as the background and border-radius properties of the element, using them all as parameters for the effect (even after the first render, if anything changes, dynamically).

I love metallic stuff. I think the aesthetic is timeless and compelling. Seeing something metallic in the world always gives me pause. I remember as a child being fascinated with metallic toys and such, even the cheap plastic stuff with a faux metal coat. When I got into web development, the skeuomorphic design trend was on the rise, and I remember it fondly. I feel like I am on a personal crusade to bring back some of the charm of this bygone era.

Make your CSS genuinely shiny

MikaeI — Fri, 11 Nov 2022 22:48:39 +0000

MetalliCSS is a tiny, dependency-free, free (as in beer AND speech) JavaScript library that makes your CSS literally shine. Rather than resorting to pre-rendered static images, MetalliCSS dynamically renders custom-fit graphics that are generated on the fly based on your CSS properties!

Try out the live demo!

Using a virtual camera to avoid moiré patterns in pictures of screens

MikaeI — Mon, 11 Oct 2021 09:46:29 +0000

Photographing a computer screen produces inevitable moiré patterns – visual artifacts of camera sensor/display interference.

A remedy for this is to use what amounts to a specialized virtual camera – essentially an interactive 3D scene capable of imitating the desired properties of photography while eliminating distortions like moiré.

An example...

With a real camera:

With virtual camera (using the online tool: Screenstab):

Until next time.

– Mikael Åsbjørnsson-Stensland

Recreating Famous Presidential Neckties in Pure CSS

MikaeI — Thu, 26 Nov 2020 21:09:53 +0000

The background patterns are generated from a single CSS-property, using multiple background-image gradients to achieve the approximated woven effect.

Nixon:

Johnson:

Truman:

Ford: