Inspired by Jason Lengstorf’s “Boop” graphic, I was curious if I could reproduce the sticker-like appearance with only CSS.
I got very close, then asked for help on Twitter where Lynn Fisher saved the day thanks to her expertise in CSS art. Taking cues from her adjustments and a comment from Adam Kuhn, I extended it to a reusable .sticker class.
Check it out to learn how to use the following modern CSS properties:
- CSS variables
- Grid - “It’s not just for page layout, kids!”
-
clampfor fluid type sizing relational to the viewport - Gradient text created with
-webkit-background-clipand-webkit-text-fill-color - Solid text borders with
-webkit-text-stroke
Top comments (6)
Wow, never used
clampbefore. Looks like an interesting property! Great work 🔥Wow, that's amazing that you can do that with CSS. Thanks for sharing.
CSS variables are awesome. Nice work!
what a nice effect 👀
Saludos y gracias.
Very nice.