How to use CSS3 to create a beautiful icon

Today, I want to show you a clever trick. We will create a plain CSS3 text icon. Even more shocking, this effect will require only one HTML element.

The game plan

1. Create a rectangular box
2. Set rounded corners
3. Create a volume angle effect using pseudo-class elements
4. Create text effects with gradient gradients

Let's get started!

First step: Create a Box

Let's add a unique HTML element: an anchor tag. This is justified because most of the icons are also a link.

<a class= "Docicon" href= "#" >document icon</a>

You can set any size for the icon, we set it to 40*56px--just demo, in the actual environment you may need other dimensions. At the same time, we need to add display:block because all anchor tags are inline functions by default.

. docicon{    background: #eee;    Background:linear-gradient (Top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);    border:1px solid #ccc;    Display:block;    width:40px;    height:56px;    position:relative;    MARGIN:42PX Auto;}

Note that above, we set the positioning context to be for the back pseudo element service. You will find that I only used the gradient in the official CSS3 grammar. You might want to use a browser prefix. To speed up, you can use the prefixr.com (the website hangs up, try this bar, http://leaverou.github.io/prefixfree/) or the API in your favorite code editor. Simply copy the code snippet above, paste it into the Prefixr text box, and click Confirm, it will generate a variety of prefixed attributes, like this:

. docicon {   background: #eee;    Background:-webkit-linear-gradient (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);   Background:-moz-linear-gradient (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);   Background:-o-linear-gradient (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);   Background:-ms-linear-gradient (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);   Background:linear-gradient (Top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);    border:1px solid #ccc;   Display:block;   width:40px;   height:56px;   position:relative;   MARGIN:42PX Auto;}

Next, let's add some shading effects using CSS's Box-shadow. I also use the Text-indent property to hide the text.

. docicon{.    -webkit-box-shadow:inset Rgba (255,255,255,0.8) 0 1px 1px;    -moz-box-shadow:inset Rgba (255,255,255,0.8) 0 1px 1px;    Box-shadow:inset Rgba (255,255,255,0.8) 0 1px 1px;     Text-indent:-9999em;}

So far, we have seen the following:

Step two: Set rounded corners

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

. docicon{.    -webkit-border-radius:3px 15px 3px 3px;    -moz-border-radius:3px 15px 3px 3px;    border-radius:3px 15px 3px 3px;}

With these four values, you can specify the top, bottom, left, and right radii, so. This is similar to the way you set the margins and the inner margin.

Now the following:

Step three: Bend a corner

To create a visual effect of the bend angle, we will use the generated content and pseudo-class elements.

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

. docicon:before {   content: "";   Display:block;   Position:absolute;   top:0;   right:0;   width:15px;   height:15px;   Background: #ccc;    Background:-webkit-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);   Background:-moz-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);   Background:-o-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);   Background:-ms-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);   Background:linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);    -webkit-box-shadow:rgba (0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;   -moz-box-shadow:rgba (0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;   Box-shadow:rgba (0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;    border-bottom:1px solid #ccc;   border-left:1px solid #ccc;}

To set the upper-right corner of our build content, we must, again, adopt the same settings.

-webkit-border-radius:3px 15px 3px 3px;-moz-border-radius:3px 15px 3px 3px;border-radius:3px 15px 3px 3px;

Show!

Fourth Step: Add lines

Next, we'll use the following pseudo-elements to add some dashed lines to represent the abstract text. The width is set to 60%, and the left and right margins are 20% (added to 100%). Next, we specify the height and position at 0, 0 points.

. docicon:after{    content: "";    Display:block;    Position:absolute;    left:0;    top:0;    width:60%;    margin:22px 20% 0;    height:15px;}

Creating a set of lines is a bit tricky, but if we're smart, we can use CSS gradients to achieve this. First, the gross position height is divided by five, and each piece is filled with a solid. Please refer to the image below to clearly reflect this idea. To put it in your toolbox, it's a pretty technique, isn't it?

CSS gradients for multiple lines

. docicon:after{.    Background: #ccc;    Background:-webkit-linear-gradient (top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #cc C 80%, #ccc 100%);    Background:-moz-linear-gradient (top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 8 0%, #ccc 100%);    Background:-o-linear-gradient (top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80% , #ccc 100%);    Background:-ms-linear-gradient (top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80 %, #ccc 100%);    Background:linear-gradient (Top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #c CC 100%);}

We are done!

How to create a nice icon using CSS3