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.

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:
twitter.

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.

The envelope

Now, let’s have a look at the .envelope class

.envelope{display:block;width:24rem;height:14rem;position:relative;

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.

background-color:#F5E6DD;

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.

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.

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.