DEV Community

Cover image for Reusable CSS "Sticker" Effect
Stephanie Eckles
Stephanie Eckles

Posted on

Reusable CSS "Sticker" Effect

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!”
  • clamp for fluid type sizing relational to the viewport
  • Gradient text created with -webkit-background-clip and -webkit-text-fill-color
  • Solid text borders with -webkit-text-stroke

Top comments (6)

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Wow, never used clamp before. Looks like an interesting property! Great work 🔥

Collapse
 
davey profile image
Davey

Wow, that's amazing that you can do that with CSS. Thanks for sharing.

Collapse
 
nyxtom profile image
Tom Holloway 🏕 • Edited

CSS variables are awesome. Nice work!

Collapse
 
negue profile image
negue

what a nice effect 👀

Collapse
 
jlrxt profile image
Jose Luis Ramos T.

Saludos y gracias.

Collapse
 
thotakura profile image
Suresh Thotakura

Very nice.