A little talk about CSS3

 The development of CSS design can be divided into CSS1, CSS2 to CSS3. In the current network environment in 2015, CSS1 and CSS2 are already mature web design technologies, and CSS3 has also developed almost complete, but there are still Many useful functions are not supported by all major browsers. Looking back, CSS1 was promoted as early as 1994, and in May 1998, W3C published CSS2. The two generations are about 4 years apart. The latest CSS3 was formulated since 1999, but it was not officially released until 2011. The time is very different from the previous two generations. The changes in CSS3 are mainly in several parts, including border-radius and text-shadow The new functions of , transform , transition , through these new functions, can turn the originally relatively static visual effects into many dynamic or animated special effects. Currently CSS4 has also begun to develop.

CSS3 border-radius property example, create rounded corner effect

<div style="border:1px #ccc solid;border-radius:8px;width:460px;height:50px;background-color:#eee;">CSS3 border-radius rounded corner effects</div>

Example output

CSS3 border-radius rounded corner effects

Traditionally, when designing a block’s rounded corners, pictures must be used. The default DIV block’s four corners are all right angles. CSS3 has added a border-radius property to quickly design rounded corners. Significantly save design time, and there are many changes to the rounded corner effect, please refer to the " CSS3 rounded corner border-radius " chapter for detailed introduction.

CSS3 text-shadow property example, creating shadow effect

<font style="text-shadow:0px 0px 13px #82FF82;">CSS3 text-shadow shadow effect</font>

Example output

CSS3 text-shadow shadow effect

The shadow effect is also an important new feature of CSS3. The so-called shadow effect includes the shadow effect of text and blocks, which can easily increase the three-dimensional visual experience of web elements, replacing the traditional design method of making shadow text with drawing software, and the two CSS3 For shadow effects, please refer to " CSS3 box-shadow " and " CSS3 text-shadow text shadow effect ".

CSS3 transition property example, create animation effect

<style type="text/css">
#Change{
    width:60px;
    height:60px;
    background:red;
    transition:width 1s;
    -moz-transition:width 1s;
    -webkit-transition:width 1s;
    -o-transition :width 1s;
}
#Change:hover{
    width:500px;
}
</style>
<div id="Change"></div>

Example output

Animation effects can be said to be the most fascinating thing about CSS3, because web designers can use the transition property of CSS3 to easily write an animation effect, which replaces many traditional animations designed with Flash, and has the advantages of file reduction, high transmission efficiency and easy modification. Advantages, not to worry about not installing Flash reading software on the client side. Common Doodle animations on the Google homepage on specific holidays or anniversaries often use a combination of CSS3 and HTML5 . For CSS3 animations, please refer to the following introduction.

• CSS3 transition property
• CSS3 animation animation properties

After reading the above simple history of CSS development and examples of new CSS3 features, I believe that we have a better understanding of CSS3. There are still many useful features of CSS3 that are not supported by all browsers, but because the good features are really good It is believed that the functions of CSS3 can be more comprehensive and popular in the future, and the technology of web design will be greatly improved.