Efficient CSS development practices: CSS 3, LESS, SASS, Bootstrap, Foundation, and sassbootstrap

Efficient CSS development practices: CSS 3, LESS, SASS, Bootstrap, Foundation, and sassbootstrap

Compared with traditional image backgrounds, constructing a background color using CSS not only reduces the overhead of network transmission, but also attracts developers for its controllability.

As shown in figure 5.18, the designer designed a background image as the title background. For users who use computers to browse Web pages, there is basically no line break in the title, and the layout is basically fixed width. Therefore, they can directly use the background image given by the designer. However, this page is mainly displayed on the mobile phone. The title may take one or three rows according to the length. If you use an image, you must place different background images based on different situations, implementation is complicated.

 

Figure 5.18 background given by the designer

Fortunately, this background image is actually gradient from left to right from the dark purple blue to the light blue and then gradient to the dark blue, then you can directly use a linear gradient of multiple color values to define the style:

 

. Header {background-image:-webkit-linear-gradient (left, #241a38, #012c57, #031a40); background-image:-o-linear-gradient (left, #241a38, #012c57, #031a40); background-image:-moz-linear-gradient (left, #241a38, #012c57, #031a40); background-image: linear-gradient (left, #241a38, #012c57, #031a40 );}

The CSS scheme is used to replace the image. If the title is broken, the title area is automatically supported. No matter how many lines can be perfectly adapted, It is very flexible, and greatly reduces the complexity of the implementation, but also saves the network traffic caused by image loading, it can be described as one to more.

 

 

Exchange with others