CSS3 : Create a Beautiful Icon

Today, I’d like to show you a neat trick. We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.

The Game Plan

  1. Create a square box
  2. Round the edges
  3. Use pseudo elements to create a curled corner
  4. Create the illusion of text with a striped gradient

Let’s get started!

Step 1: Create a Box

We’ll begin by adding our single HTML element: an anchor tag. This makes sense, as most icons also serve to be links.

Let’s set the somewhat arbitrary dimensions for our icon. We’ll do 40x56px – simply for this demo. In a real world application, you’ll likely want to reduce this! Also, keep in mind that we need to add display: block, since all anchor tags are inline, by default.

Note that, above, we’re setting a positioning context in order to work with pseudo elements shortly. You’ll find that I’ve only used the official CSS3 syntax for the gradient. You’ll likely want to use the various browser prefixes as well. To speed things up, you can use Prefixr.com, or its API in your favorite code editor. Simply copy the code snippet above, paste it into Prefixr’s textarea, and click enter. It’ll then spit out all of the various prefixized properties, like so:


Next, let’s add some shine using CSS box shadows. I’ve also used the text-indent property to hide the text.

So Far, We Have:

Step 2: Rounded Corners

Next, we need to create a rounded corner effect. Add the following:

By passing four values, we can specify the top, right, bottom, and left radii, accordingly. This is similar to the way you would apply margins or padding.

Which Gives Us…

Step 3: One Curled Corner

To create the illusion of a curled corner, we’ll use generated content, or pseudo elements.

First, add content :before our icon. In this case, we don’t require any specific text. Instead, we need to create a 15px box, and apply a background gradient.

In order for our generated content to also receive the top-right rounded edge, we must, again, apply the same radii to align it.


Step 4: Adding Lines

Next, we’re going to use the :after psuedo element to add some dashed lines to represent zoomed out text. Apply a width of 60%, and a margin-left and margin-right of 20% (which equals 100%). Next, we specify a height and position it at 0 0.

Creating a set of lines is a bit tricky. If we’re clever, though, we can use CSS gradients to achieve this effect. First, divide the total height by five, and set each block with a solid fill. Refer to the image below for a clearer exemplification of this thinking. Nifty, ay? It’s a nice technique to have in your toolbelt.

Multiple Lines (Stripes) with CSS3 Gradienst

We’re Finished!

Did you enjoy the post? Have other similar tricks? If so, link to them in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *