This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Every letter in this “font” by Davor Suljic is a single div and drawn only with border. That means employing some trickery like border-radius with exotic syntax like border-radius: 100% 100% 0 0 / 37.5% 37.5% 0 0; which rounds just the top of an element with a certain chillness that works here. Plus, using pseudo-elements. I love all the wacky variations with colors, shadows, and border styles, leaning into the limits of CSS.
Drawing things with CSS has long fascinated people. Icons are a popular choice (famously, Nicolas Gallagher’s Pure CSS GUI icons from 2010), since we can draw so many shapes with CSS without even needing to lean on the all-powerful clip-path.
But as Lynn Fisher has taught us, a single div is barely a limitation at all.
Direct Link to Article — Permalink
The post CSS Border Font appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2021-02-28T16:11:55+00:00) CSS Border Font. Retrieved from https://www.scien.cx/2021/02/28/css-border-font/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.