For designers and developers, CSS has been an important part of the web design process. Web page appearance is largely controlled by CSS, CSS code can be written in any change in our style page layout and page content. With the emergence of CSS3 and more and more browser support for it, designers have more choices. CSS3 allows pages to add a lot of animation elements, so that our website becomes more lively and interesting, and easy to interact with. This chapter uses the style attributes of CSS3 to create a variety of pages. In this chapter, we serve as an introduction to CSS3 style property, listing the properties and usage of the property. Use the style attribute to make some small cases to set the page style. So that readers can more clearly understand intuitively CSS3 style property, and be able to use it immediately. In this chapter, the reader can use CSS3 icing on the cake for your site.
New color mode
CSS3 style adds a color mode rgba, set up more than a transparent color mode of CSS. RGB for all of us that are not familiar, it is the red R + G + green blue B, now that we are talking about RGBA what is it? To put it simply on the basis of RGB is added on a channel Alpha. Add color mode parameters as described in Table 1.
Table 1 CSS3 new color mode Parameter Description
If Pang Tong said rgba is made transparent color (transparent background color, border color transparent, transparent foreground color, etc.), I could not help think of opacity this thing. It is produced in our CSS2 background color is usually used, but use it to make a border color or said foreground, it can not achieve this function. Here an example of use simultaneously with the rgb and opacty rgba used for comparison, the code is as follows:
Use the browser directly open this file, you can see the results of the browser page document to explain this effect, we can see that they are in common is the background color is exactly the same, but the difference is so that we feel has been a headache the problem that opacity descendant elements will together with transparency, so we opacity of the word as a transparent value decreased more and more see clearly, and RGBA do not have such problems. As shown in Figure 1:
As can be seen from the example of our above, RGBA better than CSS set for the element of transparency. Because the individual color does not affect the transparency of the whole element, it will not affect other properties of elements, such as borders, fonts. At the same time as an element set rgba, it will not affect other elements related to transparency.
FIG 1 opacity and transparency contrast rgba