CSS SPRITES+CSS3 Icon Font

CSS sprites a lot of people in the country called CSS Wizard, is a kind of Web page image application processing mode. It allows you to include all the bits and pieces of a page that are involved in a larger image, so that when you visit the page, the loaded picture will not show up as slowly as before. According to the specific icon in the larger picture position, to the background positioning.

The key to the CSS sprites acceleration is not to lower the quality, but to reduce the number.

Make Sprites is a big reason is the picture flow is big, imagine, if some small pictures into font mode to show, will it be amazing? As CSS3 continues to enrich the font style, even in the Chinese web page font-face to the new application scene, it is to use icon font instead of the picture on the page. Now usually refers to the icon font, is the use of font files to replace the picture file, to show the icon, special fonts and other elements of the method.

Using fonts to implement icons has many advantages: font files Small, general 20-50kb, Vector, on the different resolution screen adapter scaling is not distorted; easy to edit and maintain, size and color can be controlled with CSS, you can add some visual effects such as: Shadow, rotation, transparency; fully compatible with transparency IE6 , not to Sprite icon in the compatibility of Inline-block and so on.

Because it is a font, so only support the picture is pure color, a variety of colors do not support, and many pictures of the effect of icon font is very difficult to achieve, so the combination of the two are now a lot of companies, such as: APPLE, Taobao and so on.

A. CSS Sprites

CSS sprites is actually the Web page in a number of background images into a picture file, and then use the CSS "Background-image", "Background-repeat", "Background-position" The combination of the background positioning, background-position can be used to pinpoint the location of the background image.

1. Create CSS Sprites pictures:

1). Drawing Tools

Professional graphics including Photoshop, fireworks, etc., here no longer describe how to make.

There are also some websites that make sprites pictures, such as: http://css.spritegen.com/. Direct upload requires a combination of pictures, automatic combination, and generate code, but not according to their own needs to change the location of the picture.

2). The idea of drawing

CSS Sprites Technical Essentials Summary:

1. Small picture consolidation, in order from top to bottom, not from left to right.

This arranges the value of the background-position at a glance, and it is much easier to write CSS. At the same time also for the sake of later maintenance. Imagine that if you modify the size of one of the pictures at post maintenance, the background-position of all the elements around you will change, which can be a headache.

2). Small picture integration as far as possible by the most left ring to the right.

These two positions are very flexible, very suitable for placing the icon before the text, and then write the style will not be subject to other CSS sprites image interference. In the 1th, we can integrate the picture from top to bottom along the left and right sides.

3). It is not recommended to leave an interval between the different small pictures. The

Because this causes the size of the picture to increase, thereby increasing the file sizes. Of course, give each picture enough space, because the elements that use these pictures usually have a lot of content and may need to extend the spacing, so that other pictures will not appear unexpectedly.

4). Picture equivalence merging

When you apply CSS sprites pictures, you combine the same images appropriately to save space and reduce volume.

5). The same combination of colors in the picture as the ring can reduce the number of colors

Less color number of pictures file volume will be relatively small.

6). Place the picture in the sprites relative to where it is to be displayed

If we want a picture to appear on the left side of an element, put that picture to the right of the sprite picture, as shown in

So that when you pass C When the SS moves the position of the background picture, there is basically no other picture near it.

7). Avoid using bottom or right when background-position positioning to use pixel locations, when adding or changing picture elements without modification.

8). Picture optimization: Convert picture to PNG8 format

Picture size and size, the proposed volume is kept within 100K, size is 800px (best size).

2. Using CSS Sprites

Source code Download: Https://github.com/cnblogs-/css-sprites-demo

Use CSS sprites to create demo samples with the following effect:

1) Sprites file

2 Implementation code:

Create a new demo.html with the following code:

<! DOCTYPE html>
<html lang = "en">
<head>
     <meta charset = "UTF-8">
     <title> Sliced demo </ title>
     <link rel = "stylesheet" type = "text / css" href = "style / basic.css">
</ head>
<body>

     <div id = "header"> Understanding slices </ div>
    
     <div id = "slice">
     <h1> <a href="###"> More </a> </ h1>
     <div>
         <h2> CSS Sprites + CSS3 Icon Font </ h2>
         <dl>
             <dt> <img src = http: //www.update8.com/Web/CSS3/ "images / v1.jpg" alt = "CSS Sprites + CSS3 Icon Font" /> </ dt>
             <dd> CSS Sprites <br> CSS3 Icon Font </ dd>
         </ dl>
         <ul>
             <li> <em> [02-08] </ em> Make CSS Sprites images </ li>
             <li> <em> [02-08] </ em> Use CSS Sprites </ li>
             <li> <em> [02-08] </ em> What is Icon Font </ li>
             <li> <em> [02-08] </ em> If you make an Icon Font </ li>
             <li> <em> [02-08] </ em> How to use Icon Font (according to Iconfont) </ li>
         </ ul>
     </ div>
</ div>
    
</ body>
</ html>

Create basic.css, the code is as follows:

* {
    padding:0;
    margin:0;
}
body {
    font-size:12px;
    background:#fff;
}
#header {
    font-size:30px;
    font-weight:bold;
    text-align:center;
    margin:30px;
}
#slice {
    width:400px;
    height:415px;
    background:url(../images/slice.gif) no-repeat -454px 53px;
    margin:0 auto;
}
#slice h1 {
    font-size:12px;
    width:400px;
    height:42px;
    background:url(../images/slice.gif) no-repeat -454px -13px;
    padding-top:7px;
}
#slice h1 a {
    width:45px;
    height:23px;
    display:block;
    margin-left:auto;
    background:url(../images/slice.gif) no-repeat -798px -230px;
    text-align:center;
    line-height:23px;
    color:#fff;
    font-size:12px;
    text-decoration:none;
    margin-right:9px;
}
#slice div {
    width:400px;
    height:340px;
    background:#fff url(../images/slice.gif) no-repeat -32px -14px;
    padding-top:10px;
}
#slice div h2 {
    width:371px;
    height:31px;
    background:#fff url(../images/slice.gif) no-repeat -466px -91px;
    font-size:12px;
    margin:0 auto;
    text-align:center;
    line-height:31px;
    color:#fff;
    margin-bottom:10px;
}
#slice div dl {
    width:137px;
    height:144px;
    background:#fff url(../images/slice.gif) no-repeat -495px -171px;
    margin:0 auto;
    padding-top:8px;
}
#slice div dl dt {
    width:121px;
    height:108px;
    background:#fff url(../images/slice.gif) no-repeat -658px -189px;
    margin:0 auto;
}
#slice div dl dt img {
    width:119px;
    height:91px;
    display:block;
    margin:0 auto;
    padding-top:1px;
}
#slice div dl dd {
    text-align:center;
    padding:4px 4px 0 4px;
    color:#fff;
}
#slice div ul {
    list-style-type:none;
    width:90%;
    margin:10px auto;
    line-height:200%;
    color:#666;
}
#slice div ul li {
    padding-left:15px;
    border-bottom:1px dashed #666;
    background:#fff url(../images/slice.gif) no-repeat -456px -140px;
}
#slice div ul li em {
    float:right;
    font-style:normal;
}

3. CSS Sprites usage analysis
1) NetEase 163 email login

163 Sprites File

Login html code:

<div class = "loginFormBtn">
<button id = "loginBtn" class = "btn btn-main btn-login" type = "submit" tabindex = "6"> Login </ button>
<a id = "lfBtnReg" class = "btn btn-side btn-reg" tabindex = "7" target = "_ blank" href = "http://reg.email.163.com/mailregAll/reg0.jsp?from = 163mail_right "> Sign up </a>
</ div>

Landing CSS code that references Sprites images:

.themeCtrla, .loginFormIpt, .headerIntro, .verify-input-line, .themeText li, .btn, .btn-moblogin, .ico, .locationTestTitle, .verSelected, .servSelected, .locationTestTitleClose, #extText li, #mobtips_arr, #mobtips_close {
     background-image: url ("/ web / UploadPic / 2015-3 / 201531723653187.png");
}

2) Taobao

taobao's Sprites File