CSS3 (EXT)

1. Gradient:gradients

Linear gradient-top to bottom (by default)

# Grad {  /*  */  Background/*/  background/ **/  Background/* */}

Linear gradient-from left to right

 #  grad { background:- Webkit-linear-gradient (left, red, blue); /*   Safari 5.1-6.0  */  background :-o-linear-gradient (right, red, blue); /*   Opera 11.1-12.0  */  background :-moz-linear-gradient (right, red, blue); /*   Firefox 3.6-15  */  background : Linear-gradient (to right, red, blue); /*   standard syntax  */ }  

2.CSS3 transitions, CSS3, we don't need to use flash animations or JavaScript to add an effect that can shift from one style to another.

<! DOCTYPE html>div {width:100px; Height:100px; Background:Red; -webkit-transition:width 2s, height 2s,-webkit-transform 2s;/*For Safari 3.1 to 6.0*/transition: width 2s, height 2s,transform 2s;} Div:Hover {width:200px; Height:200px; -webkit-transform:rotate (180DEG);/*Chrome, Safari, Opera*/Transform:rotate (180deg);}</style>View Code
3. Animation: @keyframes rule is to create an animation. Specifying a CSS style and animation within a @keyframes rule will gradually change from the current style to the new style.
<! DOCTYPE html>div{Width:100px; Height:100px; Background:Red; Position:relative; Animation:myfirst 5s linear 2s infinite alternate; /*Firefox:*/-moz-animation:myfirst 5s linear 2s infinite alternate; /*Safari and Chrome:*/-webkit-animation:myfirst 5s linear 2s infinite alternate; /*Opera:*/-o-animation:myfirst 5s linear 2s infinite alternate;} @keyframes myfirst{0% {background:red; left:0px; Top:0px;} 25% {background:yellow; left:200px; Top:0px;} 50% {background:blue; left:200px; Top:200px;} 75% {background:green; left:0px; Top:200px;} 100% {background:red; left:0px; Top:0px;}} @-moz-keyframes Myfirst/*Firefox*/{    0% {background:red; left:0px; Top:0px;} 25% {background:yellow; left:200px; Top:0px;} 50% {background:blue; left:200px; Top:200px;} 75% {background:green; left:0px; Top:200px;} 100% {background:red; left:0px; Top:0px;}} @-webkit-keyframes Myfirst/*Safari and Chrome*/{    0% {background:red; left:0px; Top:0px;} 25% {background:yellow; left:200px; Top:0px;} 50% {background:blue; left:200px; Top:200px;} 75% {background:green; left:0px; Top:200px;} 100% {background:red; left:0px; Top:0px;}} @-o-keyframes Myfirst/*Opera*/{    0% {background:red; left:0px; Top:0px;} 25% {background:yellow; left:200px; Top:0px;} 50% {background:blue; left:200px; Top:200px;} 75% {background:green; left:0px; Top:200px;} 100% {background:red; left:0px; Top:0px;}}</style>View Code
4.CSS3 text shadow:Text-shadow
<! DOCTYPE html>h1{    text#FF0000; }</style>
View Code
5. Multimedia query: @media rules
* Use a multimedia query to replace the original style with the corresponding style on the specified device, and the following instance floats the menu to the left of the page when the screen visual window size is larger than 480 pixels:
<! DOCTYPE Html>Auto;}#main {margin-left:4px;}#Leftsidebar {float:none;width:auto;}#menulist {margin:0;padding:0;}.MenuItem {Background:#Cdf0f6;BORDER:1PX Solid#d4d4d4;Border-radius:4px; List-style-type:none; Margin:4px; Padding:2px;} @media Screen and (min-width:480px) {#Leftsidebar {width:200px;float:left;}    #main {margin-left:216px;}}</style>class= "wrapper" > <div id= "Leftsidebar" > <ul id= "menulist" > <liclass= "MenuItem" >menu-item 1</li> <liclass= "MenuItem" >menu-item 2</li> <liclass= "MenuItem" >menu-item 3</li> <liclass= "MenuItem" >menu-item 4</li> <liclass= "MenuItem" >menu-item 5</li> </ul> </div> <div id= "main" > View Code
6.Resize Properties
* Specify a DIV element that allows the user to resize:
<! DOCTYPE html> div{    border:2px solid;    Padding:10px 40px;     Width:300px;    Resize:both;    Overflow:auto;} </style>
View Code
___________
CSS3 (EXT)