CSS3 of linear-gradient linear gradient using method

This time we bring you CSS3. Linear-gradient linear gradient usage, what are the considerations for using CSS3 's linear-gradient linear gradient, here is the actual case, take a look.

In the Mall project, the shopping cart is a very important function. One of the most common is the "+ +" operation of inventory in the shopping cart, including a lot of algorithms behind snapping. But as a front end, the "+ +" in the checkout of a shopping cart is a calculation. The traditional approach is to implement the +-button via a picture, but this article will use CSS3 's linear-gradient linear gradient to achieve the addition and subtraction of the shopping cart.

To implement a minus sign effect is very simple, for example to implement a 10px*2px minus graphic, the CSS:

. minus {    background-image:linear-gradient (to Top, #666, #666);    background-size:10px 2px;}

The principle is to use a gradient to create a solid color (#666) gradient picture that fills the background of the entire element, and then use the Background-size property to control the size we want, and the effect is achieved.

The plus sign effect is similar, just to add more layers of linear-gradient.

A similar effect can be achieved in the end:

and traditions:: Before,:: Afetr pseudo-elements with background-color or border, there is a very important benefit of using a gradient background, that is, centering is very convenient, directly behind the background property to add a center, Traditional implementations usually need absolute positioning, and then balabala a code to center, very verbose.

All the code for this example is given below, and the CSS code is as follows:

. btn {    display:inline-block;    Background: #f0f0f0 No-repeat Center;    border:1px solid #d0d0d0;    width:24px; height:24px;       border-radius:2px;    box-shadow:0 1px rgba (100,100,100,.1);    Color: #666;    Transition:color. 2s, background-color. 2s;}. btn:active {    box-shadow:inset 0 1px rgba (100,100,100,.1);}. Btn:hover {    background-color: #e9e9e9;    Color: #333;}. Btn-plus {    background-image:linear-gradient (to Top, CurrentColor, CurrentColor), Linear-gradient (to top, CurrentColor, CurrentColor);    background-size:10px 2px, 2px 10px;}. Btn-minus {    background-image:linear-gradient (to Top, CurrentColor, currentcolor);    background-size:10px 2px;}

The key HTML code is as follows:

<a href= "javascript:" class= "btn btn-plus" role= "button" title= "Add" ></a><input value= "1" size= "1" > <a href= "javascript:" class= "btn Btn-minus" role= "button" title= "Decrease" ></a>

The end result is the same as the map above.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How the hover selector is used

The Mask-image property of CSS is detailed