Even though I am an iOS Engineer by trade, I also have a passion for front-end
developement. When I came across this shot on dribbble the other
day, I started to wonder if I could create an awesome looking envelope with
nothing but HTML and CSS and the awesome Symbolset Social font.
The envelopes are simple <a>-tags. That’s semantically appropriate and makes
the whole envelope clickable without any nasty tricks.
We use the outer <span> to model the seal on the envelope. The inner <span>
represents the embossed area of the seal.
As you can probably already tell, the real magic happens in the CSS!
A pretty clever font
First, we define the custom Symbolset Social font. It aliases the
names of certain social networks and replaces them with their respective logos,
for example ‘twitter’, when set in SSSocial, turns into a little bird:
It’s the same font I use here on my site and I urge you to check it out.
The .ss-social-regular class is just used to enable the Symbolset Social font
on specific tags, we only use them in the inner <span>s, no big deal.
Now, let’s have a look at the .envelope class
So far, this is all pretty basic, we turn the <a> into a block element and set
its dimensions. As we later want to position the seal absolutely within in the
envelope, we need to set the envelope’s position attribute to relative.
To style the envelope, we first define a background color.
This is where it gets tricky: we set no less than seven background images on the
envelope to draw its paper texture and the two flaps.
Background images are defined top-to-bottom, here are the first two:
These first two linear gradients make up the bottom flap of the envelope.
You see the gradient is mostly transparent, only a thin strip around the 50%
mark is used to draw the actual flap. I’ve settled on the 235.5 degrees of
rotation after experimenting a bit with it.
The next two gradients look similar.
Notice that I reversed their colors as this they draw the top flap.
This is what the envelope looks like, so far:
You’ll notice that the four gradients overlap each other, forming two lines
instead of four. We’ll fix that in a bit.
We want our envelope to have a more realistic appearance, so we apply a vertical
and a horizontal gradient to add some shading.
To top it off, I encoded a noise texture as a data-url to embed it straight into
my stylesheet. (Some may consider this cheating, I couldn’t care less…)
Our envelope looks a lot better now:
Next up: positioning the backgrounds.
It took me a while until I found good positions for the flaps, but I found these
values to work fine.
You’ll notice that I set background-position, background-size and
background-repeat for the first four backgrounds (the flap-gradients) and then
restore the default values for the other three.
Last but not least, we add some more subtle shadows, both inner and outer and
turn up the border radius to avoid nasty paper cuts.
Now our envelope actually looks pretty nice.
Now, the flaps may look a bit odd, but we’ll just cover that up with the seal
and keep that between the two of us, okay?
The seal itself is actually pretty straight forward. First, we position it in
the roughly in center of the envelope.
Easy! Now we set the border-radius property, wax seals are not square after
I defined four different radii to create the illusion of molten wax that you
wouldn’t get with a perfect circle.
Let’s add a dash of color and some more highlights…
and we’re almost there.
Remember the .embossed class from the beginning? Now it’s time to style it!
First the position,
then we add some shadows to achieve the desired embossed effect…
and finally, the background gradient. I chose a semi-transparent grey that I
laid over the background of the seal. This makes customization easier as I only
need to re-color the seal if I want a different kind of wax.
Now we’re pretty much finished:
But, where’s the drop?!
As a small bonus, let’s add two wax drops next to the seal to make it look even
We’re going to use the :before and :after pseudo-selectors to avoid adding
more tags to our markup. This first piece of code defines the common attributes
of both drops:
I set the background property to inherit so that the drops will end up
having the same color as the seal.
We want both drops to look different so we set different values for width,
And here is the final result:
I hope you enjoyed this small tutorial, if you have any feedback, feel free to
send me a tweet @dlx or an e-mail.