Supports custom icons for pure CSS3 implementations

Supports custom icons for pure CSS3 implementations

There are various types of code for drawing cartoons using CSS3 on the Internet! If you can also draw a set of CSS3 icons for your website, you can save the effort to use small images. Although the support for CSS3 varies with the major browsers, the trend of writing is better.

First, we need to make it easy to use, simply add a class to the element to use the icon, and then we need to support customization, such as color and size. See the following code:

 CSS3 ICONS

We only need to add two classes to tag a to make it an icon. The reason for adding two, is because of the basic style of the icons implemented by the class css3-icon, And the css3-icon-search implements the specific search icon style:

/*global icon style*/.css3-icon{position:relative;display:block;/*custom the icon size*/width:100px;height:100px;font-size:10px;background:#ccc;}.css3-icon:before,.css3-icon:after{content:"";position:absolute;left:0;background:transparent;font-size:1em;}

Pseudo elements must be used, and must be relative to the. CSS 3-icon absolute positioning. We hope that the icon size can be customized. Therefore, in the following elements: before AND: afterpseudo elements, we use the relative unit emus to re-assign the initial value to font-size in .css 3-icon.

Next we will draw a search icon:

/*---------------------search icon----------------------*/.css3-icon-search:after {left:55%;top:70%;    width:40%;height:12%;background:#456;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}.css3-icon-search:before {left:10%;top:5%;    width:50%;height:50%;    border:.9em solid #456;    border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;--o-border-radius:50%;}.css3-icon-search:hover:before{border-color:#ff7;}.css3-icon-search:hover:after{background:#ff7;}

In the before pseudo element, use border-radiuis to draw a circle. In the after pseudo element, use transform to draw the magnifier's handle. To support icon scaling, the percentage is used here. The effect is as follows:

To modify the size, you only need to change the width, height, and font-size values in the. CSS 3-icon (such as proportional change ). However, there is another problem. Currently, custom colors are not supported. We also set the watermark code and set the color in .css-icon. The color of the specific icon is inherited:

/*--------------------------------------pure css iconsauthor:liquanfengcreated:2014/9/4version:1.0blog:http://readit.sinaapp.com---------------------------------------*//*global icon style*/.css3-icon{position:relative;display:block;/*custom the icon size*/width:100px;height:100px;font-size:10px;background:#ccc;border-color:#456;}.css3-icon:hover:before,.css3-icon:hover:after{border-color:#ff7;/*custom your hover effect*/}.css3-icon:focus:before,.css3-icon:focus:after{border-color:#ff7;/*custom your focus effect*/}.css3-icon:active:before,.css3-icon:active:after{border-color:#ff7;/*custom your active effect*/}.css3-icon:visited:before,.css3-icon:visited:after{border-color:#ff7;/*custom your visited effect*/}.css3-icon:before,.css3-icon:after{content:"";position:absolute;left:0;background:transparent;font-size:1em;}/*global icon style end*//*---------------------search icon----------------------*/.css3-icon-search:before {    left:10%;top:5%;    width:50%;height:50%;    border:.9em solid;    border-color:inherit;    border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;--o-border-radius:50%;}.css3-icon-search:after {    left:55%;top:70%;    width:40%;height:0;    border-top:.9em solid;    border-color:inherit;    transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}

The above is all the code. Other Icons can be implemented based on this framework. The rotation and border features are used to draw the icon, and then the Custom size and color in the global style are OK.

--------------------------------------------------------- The gorgeous split line ---------------------------------------------------------------------------------------------------------------------

If the code written above is still problematic, then font-size: 10px is set in .css 3-icon. This is intended to facilitate the use of em units later, but Chrome does not support fonts below 12px, to ensure compatibility and facilitate computation, it is best to set font-size: 100px. You can simply divide it by 10 when you use the em unit later, which is equivalent to 0.01em = 1px.

In this example, the width, height, and font-size values in .css 3-icon are all 100px, which can be easily modified using JS scripts. In addition, the minimum font-size can be 12 PX, that is to say, the minimum width and height are also 12 PX, and the 12x12 icon is equivalent to the height of the small font, which can be applied to various occasions ~

Finally, draw a taiji icon based on the modified scheme. The effect is as follows:

The following are the html code and CSS code:

.css3-icon-taiji{border-radius:50%;background:-moz-linear-gradient(center left, #fff, #fff 50%, black 50%, black);background:-webkit-gradient(linear, left center, right center, from(#fff), color-stop(50%,#fff), color-stop(50%, black), to(black));background:-o-linear-gradient(left, #fff, #fff 50%, black 50%, black);}.css3-icon-taiji:before{width:20%;height:20%;border-radius:50%;left:40%;top:15%;background:#000;box-shadow:0 0 0 .15em #fff;}.css3-icon-taiji:after{width:20%;height:20%;border-radius:50%;left:40%;bottom:15%;background:#fff;box-shadow:0 0 0 .15em #000;}.css3-icon-taiji:hover{-webkit-animation:taiji-animation 4s infinite  linear;}@-webkit-keyframes  taiji-animation{0%{ -webkit-transform: rotate(0deg);}50%{ -webkit-transform: rotate(180deg);}100%{ -webkit-transform: rotate(360deg);}}

I added a hover rotation animation to him, which is cool!