CSS is a well-known and widely used website-style language, and in its version three (CSS3) plan, there are new features that save time. Although only the latest browser version is currently available to support these effects, it is necessary and interesting to know about them. 5 interesting new technologies in CSS3: rounded corners, individual fillets, opacity, shading, and resizing elements.
Basic tags
Before we start this tutorial, let's create the basic markup that will be used throughout the tutorial. Our XHTML requires the following DIV elements:
- #round, the fillet is implemented using the CSS3 code. Lixin County Archives Bureau
- #indie, apply a few rounded corners individually.
- #opacity to show how the new CSS3 implements the opacity.
- #shadow, use CSS3 to achieve a shadow effect without using Photoshop.
- #resize, shows how to use some kind of CSS to achieve the effect of resetting the size.
In summary, our XHTML should look like this:
View Source print?
01 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
02 |
<htmlxmlns="http://www.w3.org/1999/xhtml"> |
04 |
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8″ /> |
05 |
<title>An Introduction to CSS3; A Nettuts Tutorial</title> |
06 |
<linkhref="style.css" rel="stylesheet" type="text/css"/> |
10 |
<divid="round"> </div> |
11 |
<divid="indie"> </div> |
12 |
<divid="opacity"> </div> |
13 |
<divid="shadow"> </div> |
15 |
<imgsrc="image.jpg" alt="resizable image"width="200″ height="200″> |
Below to create a basic CSS file:
View Source print?
02 |
background-color: #fff; |
As you can see above, we give each div element 300px width and height, and let them float to the left, and the entire page div is left to us to add style to the work behind it.
Rounded Corners
For now, there are a lot of ways to create rounded corners, but they are cumbersome. The most common method: First, you create a rounded picture, and then you create a lot of HTML elements and use the background image to display the rounded corners. I know exactly what the process is.
This problem will be solved very simply in CSS3, which is called the "Border-radius" attribute. Let's start by creating a black div element and setting a black border for him. A border is a precondition for the effect of the "Border-radius" attribute.
Like this:
View Source print?
2 |
background-color: #000; |
Now that you've created the DIV element, it looks exactly the way you expect it to, and the 300px and the tall are angled and black. Let's add the code that implements the fillet, which is so concise that it only requires two lines of code.
View Source print?
2 |
background-color: #000; |
4 |
-moz-border-radius: 10px; |
5 |
-webkit-border-radius: 10px; |
Here we add two lines of similar code,-moz-for the Firefox browser, and-webkit-for the Safari/chrome browser.
Note: The IE browser does not support the Border-radius attribute so far, so if you want IE to have rounded corners, you will have to add fillets separately.
Border-radius This attribute literal is the meaning of the border radius, just like Photoshop, the larger the value, the bigger the fillet.
Individual rounded corners
If you follow the customary practice of the past, will waste you a lot of time, now CSS3 can quickly solve!
Now we just want the top right and bottom right of the div to be rounded, so we just need to make a little change:
View Source print?
2 |
background-color: #000; |
4 |
-moz-border-radius-topright: 10px; |
5 |
-moz-border-radius-bottomright: 10px; |
6 |
-webkit-border-top-left-radius: 10px; |
7 |
-webkit-border-bottom-left-radius: 10px; |
Imagine what elements this would be used in a Web page? Right! is the tabbed navigation button!
Modify opacity in a CSS3 way
Now you can write a few lines of code as usual to achieve the effect of opacity (hack). But CSS3 simplifies the process.
This line of code is very good to remember, just "opacity:value;" ：
View Source print?
2 |
background-color: #000; |
Shadow effect
There are many ways to implement a shadow, and the most common is to use Photoshop to create a shaded image and apply it to the background properties. But CSS3 makes your job more efficient, unfortunately, only Safari and Chrome are currently supporting this new feature.
Only one line of code is required, but it has 4 different values:-webkit-box-shadow:3px 5px 10px #ccc;
The first 3px is the horizontal (horizontal) distance between the specified shadow and the div element, the second 5px refers to the vertical (portrait) distance between the shadow and the Div, and the third 10px refers to the blur of the shadow (similar to the feather in Photoshop), and the larger the value the more delicate. The last value does not say that you know, it is the color of the shadow.
Our final Shadow effect code:
View Source print?
2 |
background-color: #fff; |
4 |
-webkit-box-shadow: 3px5px 10px#ccc; |
As you can see, we have this div set a white background, a black border and a bright gray shadow.
Adjust size
In the latest version of CSS, it is possible to resize an element (though Safari only supports it).
With this code, a small triangle appears in the lower right corner of our element to prompt the user that this element is resizable. The code is still simple enough to say that only one line of code is needed, and of course you can use some of the properties you've used, such as "Max-width", "Max-height", "Min-width" and "Min-height".
View Source print?
2 |
background-color: #fff; |
Here the main talk about the resize and overflow properties, resize:both, means that all sides can be resized, its value is horizontal and vertical, as the name implies, is horizontal and vertical. Overflow is designed to work with resize and uses auto here.
While there are only a handful of browsers that support CSS3, it is undeniable that CSS3 will certainly save more time for our work. If you know and know about progressive enhancement, I think you will gladly accept this powerful new version of CSS3. Don't spend your time on IE6, so you can only be an outdated front-end development engineer.
CSS3 not far away, several features you need to know
