Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
Have you been asked to take a survey lately? Your answer is likely, yes. A business or organization may want to survey people to conduct broad market research, drill down specifics about a customer, or spot trends. And in recent years, a digital transformation has changed the way surveys are conducted.
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.