5 CSS3 technology implementation design enhancement, css3 technology enhancement

5 CSS3 technology implementation design enhancement, css3 technology enhancement

Cascading Style Sheets (css)It is a Web design language, and the next generation of CSS version CSS3 is ready to go. Are you sure you want to start using them, but you don't know where to start? Although some new properties have not been officially confirmed, Some browsers have begun to support new features from css3.
But the problem is: Many browsers support it, but the most important Internet Explorer browser still does not support it!
Many people, especially the front-end er in China, will think that since IE does not support it, they will not care about CSS3 first. In fact, this should not be the case. What benefits does CSS3 bring to us now? At least now we can use the new CSS3 features for design enhancement. Design enhancement is to use some advanced styles to improve the visual effect of the website without affecting the website availability.

In fact, there are still some difficulties in distinguishing between design enhancement and usability without affecting:

• Example of design enhancement:Use the border-radius attribute to add rounded corners to the box model to make the website more attractive. However, even if the rounded corner property is not supported by the browser, it does not affect the normal use of the website.
• Example of designing weak availability:An element that uses the RGBA color value background is stacked on an element. The above element uses a translucent effect. Obviously, both elements must be visible to the user. Obviously, it is difficult for some users who use the old browser to see the following elements. This design reduces availability.

Learning TogetherFive different CSS3 attributesIf you try to use them on your website from now on, you will make your websiteAchieve both design enhancement and zero availability.

　The following figure shows the general effect before applying CSS3 design enhancements:

1. Transparent color

Currently supported browsers: Apple Safari 4, Firefox 3.0.5 +, Google Chrome 1 +

RGBA allows you to control the opacity of a feature fill color, whether it is text, background, border or background color.

When setting the color transparency, you need to use the RGB color value instead of the hexadecimal value. The "A" represents the transparency, and you can set it from 0 (transparent) the value between 1 (opacity.

1	Rgba (0-255, 0-255, 0-255, 0-1)

You can also use RGB values separately:

1 2 3 4 5 6 7 8

. Topbox { Color: rgb (235,235,235 ); Color: rgba (255,255,255, 0.75 ); Background-color: rgb (153,153,153 ); Background-color: rgba (0.5, 0 ); Border-color: rgb (1, 235,235,235 ); Border-color: rgba (255,255,255, 0.65 ); }

The good news is that at least you can use the CSS Filter to set the background color for IE browsers.

Click the image to view the clear image.
Note: Because Wordpress cannot display the above Code, you need to write the above Code on your own.

2. rounded corners

Currently supported browsers: Apple Safari 3 +, Firefox 1 +, Google Chrome 1 +

Border radius is used to set and model the curvature of each corner, as if there is a virtual circle radius (r) with a specific corner ):

1	Border-radius: r;

Although border-radius is part of CSS3 in the future, both Mozilla (Firefox) and Webkit (Safari and Chrome) now have their own rounded corners.

1 2 3

-Webkit-border-radius: 10px; -Moz-border-radius: 10px; Border-radius: 10px;

You can also set the radius of an angle separately:

CSS3	Mozilla	WebKit
Border-top-right-radius	-Moz-border-radius-topright	-Webkit-border-top-right-radius
Border-bottom-right-radius	-Moz-border-radius-bottomright	-Webkit-border-bottom-right-radius
Border-bottom-left-radius	-Moz-border-radius-bottomleft	-Webkit-border-bottom-left-radius
Border-top-left-radius	-Moz-border-radius-topleft	-Webkit-border-top-left-radius
Border-radius	-Moz-border-radius	-Webkit-border-radius

3. Text shadow

Currently supported browsers: Apple Safari 3 +, Firefox 3.0.5 +, Google Chrome 1 +

Add a shadow effect to the text to control the offset between the left, right, and top, and bottom of the Shadow. You can also set the color of the shadow.

1	Text-shadow: x y blur color;

You can combine the transparent color values to set the shade of the text shadow:

1	Text-shadow:-2px 2px 10px rgba (0, 0,. 5 );

You can also have multiple shadows in the text. Each shadow attribute is separated by commas:

1 2	Text-shadow: 0 0 10px rgba (0,255, 0,. 5),-10px 5px 4px rgba (255,. 45 ), 15px-4px 3px rgba (255, 0,. 75 );

4. Box shadow

Currently supported browsers: Apple Safari 4 +, Firefox 3 +, Google Chrome 1 +

The CSS3 attribute declaration format for adding a shadow to an element and an element is the same as that for text shadow:

1	Box-shadow: x y blur color;

Like text shadow, Mozilla and Webkit also have their own box shadow rules:

1 2 3

-Webkit-box-shadow: 0 0 10px rgb (0, 0, 0 ); -Moz-box-shadow: 0 0 10px rgb (0, 0, 0 ); Box-shadow: 0 0 10px rgb (0, 0, 0 );

You can also add multiple shadows for a box element, which are still separated by commas.

1 2 3 4 5 6

-Webkit-box-shadow: 0 0 20px rgb (0,255, 0),-10px 5px 4px rgba (255,. 45 ), 15px-20px 20px rgba (255, 0,. 75 ); -Moz-box-shadow: 0 0 20px rgb (0,255, 0),-10px 5px 4px rgba (255,. 45 ), 15px-20px 20px rgba (255, 0,. 75 ); Box-shadow: 0 0 20px rgb (0,255, 0),-10px 5px 4px rgba (255,. 45 ), 15px-20px 20px rgba (255, 0,. 75 );

5. Multi-background images

Currently supported browsers: Apple Safari 1.3 +, Google Chrome 1 +

To add multiple background images to a single element, you only need to add different background image declarations to separate them. Of course, you also need to prepare a complete picture for other browsers.

1 2 3 4 5

Background-image: url(astro-127531.png ); Background-image: url(astro-127531.png),url(Hubble-112993.png ); Background-repeat: no-repeat; Background-position: bottom left; Background-position: bottom left, top right;

Buy five get one free-rotate any element

Currently supported browsers: Apple Safari 4 +, Firefox 3.5 +, Google Chrome 1 +

Although it is not part of CSS3, Webkit already has its own set of deformation attributes, and Mozilla is also following suit. Deformation contains many different types of values, but the most interesting and useful one is rotation.

1 2	Webkit-transform: rotate (-15deg ); -Moz-transform: rotate (-15deg );

For a browser that does not support CSS3 (such as Opera 9 ):

View instance Demo(Safari 4 +, Firefox 3.5 +, or Chrome 1 + browser is required)