30 Days of CSS Girls

March 05, 2019

CSS Stamp Edges

What’s your inner voice when handed a design that contains stampe edges? I’d say I’m as obssessed as the designers about it. Every time I see a design like that, a coupon, an envelope, or perhaps just a stamp by itself.

I want to do it with CSS.

Is where my heart says.

This topic is beautiful. As a simple dribbble search gets you the idea. Here are some examples:

What about this:

And what about a coupon (most of the the time, a coupon has only two sides that has the punched holes)

Objectives

Turn one of your favorite images to a stamp, like this.

Image credit goes to Kawaii Gameboy by Jordan Jenkins.

Reading

We’ve been creating hearts using pseudo-elements for three challenges now. Let’s read a bit into that today.

Questions

  • What is the difference between pseudo-element selectors and pseudo-selectors?
  • What are three types of pseudo-element selectors?
  • What is the criterion for pseudo-element selectors to show up?