CSS is a well-known and widely used website styling language. In its version 3 (CSS3) plan, some new features that can save time have been added. Although these effects are only supported by the latest browser versions, it is still necessary and interesting to know about them. Bao Fengbinbin will show you 5 interesting new technologies in CSS in this article: rounded corners, individual rounded corners, opacity, shadow and resizing elements.
1: Basic mark
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, uses CSS3 code to achieve rounded corners.
#indie, apply a few individual fillets.
#opacity, demonstrates the new CSS3 way of implementing opacity.
#shadow, shows how to use CSS3 to achieve shadow effect without using Photoshop.
#resize, shows how to use some CSS to achieve a resizing effect.
To sum up, our xHTML should look like this:
The following is the quoted content: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Let’s create the basic CSS file:
The following is the quoted content:
|
As you can see above, we gave each div element a width and height of 300px and let them float to the left, leaving the entire page divs for us to style later.
2: rounded corners
Currently, there are many ways to create fillets, but they are all cumbersome. The most common method: first, you have to create a picture with rounded corners; then, you have to create a lot of html elements and use a background image to display the rounded corners. You and I know the specific process very well.
This problem will be easily solved in CSS3 with a property called "border-radius". We first create a black div element and set a black border to it. The border is the prerequisite for achieving the effect of the "border-radius" attribute.
Like this:
The following is the quoted content: #round { |
Now that you have created the div element, it looks just like you expected, 300px tall, angular, and black. Now let's add the code to implement rounded corners. It is so simple and requires only two lines of code.
The following is the quoted content: #round { |
Here, we added two similar lines of code, -moz- for Firefox browser and -webkit- for Safari/Chrome browser.
Note: So far, IE browser does not support the border-radius attribute, so if you want IE to have a rounded corner effect, you need to add rounded corners separately.
The literal translation of the border-radius property is the border radius. Just like Photoshop, the larger its value, the larger the rounded corners.
3: Individual rounded corners
If you follow the past habits, it will waste a lot of time. Now CSS3 can solve it quickly!
Now we just want the upper right and lower right corners of the div to be rounded, so we only need to make slight modifications:
The following is the quoted content: #indie { |
Just imagine what elements in the web page this approach would be used for? Yes! It’s the tabbed navigation button!
4: Modify opacity using CSS3
Now you can conventionally write a few lines of code to implement the opacity effect (hack). However, CSS3 simplifies this process.
This line of code is easy to remember, just "opacity: value;":
The following is the quoted content: #opacity { background-color: #000; opacity: 0.3; } |
5:Shadow effect
There are many ways to achieve shadows. The most common one is to use Photoshop to create a shadow image and then apply it to the background properties. But CSS3 makes your work more efficient. Unfortunately, only Safari and Chrome currently support this new feature.
It only requires one line of code, but it has 4 different values:
The following is the quoted content: -webkit-box-shadow: 3px 5px 10px #ccc; |
Let me explain what these four values represent. The first 3px is the horizontal (horizontal) distance between the specified shadow and the div element, and the second 5px refers to the vertical (vertical) distance between the shadow and the div. , the third 10px refers to the blur of the shadow (similar to feathering in photoshop), the larger the value, the more delicate it is. Everyone knows that the final value is the color of the shadow.
Our final shadow effect code;
The following is the quoted content: #shadow { background-color: #fff; border: 1px solid #000; -webkit-box-shadow: 3px 5px 10px #ccc; } |
As you can see, our div has a white background, a black border, and a light gray shadow.
6:Resize
In the latest version of CSS, it is possible to resize elements (but currently only supported by Safari)
After using this code, a small triangle will appear in the lower right corner of our element to remind the user that this element can be resized. The code is still very simple, it can be said that it only requires one line of code. Of course, you can also use some properties that you have used before, such as "max-width", "max-height", "min-width" and "min-height".
The following is the quoted content: #resize { background-color: #fff; border: 1px solid #000; resize: both; overflow: auto; } |
Here we mainly talk about the resize and overflow attributes. resize: both; means that all sides can be resized. Its values also include horizontal and vertical. As the name suggests, they are horizontal and vertical. Overflow is to work with resize, so auto is used here.
Summarize
So, did you gain anything from this article? Although only a few browsers now support CSS3, it is undeniable that CSS3 will indeed save more time in our work. If you have some knowledge and understanding of progressive enhancement, I think you will readily accept this powerful new version of CSS3. Don't spend all your time on IE6, otherwise you will only be an outdated front-end development engineer.