Shulou(Shulou.com)06/01 Report--

This article mainly introduces CSS3 how to achieve button fade out of the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this CSS3 how to achieve button fade effect article will have a harvest, let's take a look at it.

In the CSS2.1 era, colors can be represented in four ways, that is, color names (such as red, blue), RGB values (such as rgb (255Power0)), RGB percentages (such as rgb (100% Power0% 0)), or hexadecimal numbers (such as # ff0000). Transparency requires the use of opacity attributes or transparent pictures. With the birth of css3, we can use HSLA or RGBA to define color and transparency directly.

Transparency: opacity

Before the advent of CSS3, the transparency of elements could only be achieved through the special properties of some browsers. Now, through the opacity attribute, we can easily set the transparency of the element.

After you set the transparency for the element, the elements below it can be partially displayed.

The classic case of opacity application is the implementation of button fade in and out. Its principle is that the button normal state effect picture and the button hover state effect picture are superimposed together, and the hover effect picture is placed on the upper layer, but the transparency is set to 0. When the mouse hovers over the button, the transparency of the upper hover effect picture is gradually changed from 0 to 1, and when the mouse is moved out, the transparency of the upper hover effect picture is gradually changed from 1 to 0.

The complete code to implement the button fade effect with opacity is as follows:

HTML5

# gradient {

Height:27px

Width:27px

Background:url (button_bg.png), url (search.png) centercenterno-repeat

}

# gradientspan {

Height:100%

Width:100%

Display:block

Background:url (button_bg_hover.png), url (search.png) centercenter

No-repeat

Opacity:0

}

# gradient:hoverspan {

Opacity:1

Transition:allease-in0.2s;/* uses animation to change transparency when hovering * /

}

When the mouse hovers over the button, the button changes from left to right and appears as the final hovering effect:

HSL

HSL is a color standard in industry. H, S and L represent hue, saturation and brightness respectively. It includes almost all the colors that human vision can perceive. It is one of the most widely used color systems at present. CSS3 adds support for this standard, providing another color representation in addition to RGB.

With HSL, you can adjust based on hue, saturation, and brightness.

For example, the three colors in the image below have the same hue and saturation, but only in terms of brightness. With HSL, it is quite easy to adjust the hue, saturation, and brightness of colors, eliminating the need to calculate the value of RGB.

HSLA and RGBA

As the name implies, HSLA is HSL plus "Alpha channel" (that is, transparency), and we can use HSLA to set transparency for HSL colors. HSLA can be used wherever colors are used, such as backgrounds, borders, box shadows. When the value of An in HSLA is equal to 1, the effect is exactly the same as HSL.

RGBA, like HSLA, represents a combination of RGB and transparency. It uses the same method as CSS2.1 's RGB values, the first three values can be numeric values or percentages, the fourth value is transparency, the element with a transparency value of 1 is completely opaque, and the element with a transparency value of 0 is completely transparent.

The use of RGBA is shown in the following code:

.box1 {

Background:rgba / * Blue, 100% transparency, completely opaque * /

}

.box2 {

Background:rgba (100% 50% 50% 0% 0.5); / * Orange green with 50% transparency /

}

The example CSS code that uses RGBA in the background property is as follows:

Background:linear-gradient (top,rgba (255, 255, 255, and 0.75), rgba (222, 231, 231, and 0.7)

/ * background color gradient * /

This is the end of the article on "how to fade the button in and out of CSS3". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to fade in and out of CSS3". If you still want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.