CSS3 Application Examples

1: Set the border of the button or div to a rounded border: css: text-align:center;    border:2px solid #a1a1a1;     padding:10px 40px;    Background: #dddddd;    width:350px;    border-radius:25px; -moz-border-radius:25px;    Old Firefox instance: set the border of all div in a webpage to a rounded border: div{text-align:center;    border:2px solid #a1a1a1;     padding:10px 40px;    Background: #dddddd;    width:350px;    border-radius:25px; -moz-border-radius:25px; Old Firefox} legend: 2: Use CSS to add a shadow css to a div border: div{width:300px;height:100px;background-color: #ff9900;-moz-box-shadow:10px 10px 5px #888888, old version Firefoxbox-shadow:10px 10px 5px #888888;} Legend: 3: Text Shadow part effect CSS: h1{text-shadow:5px 5px 5px #ffffff;} @font-face{font-family:myfirstfont;src:url (' Sansation_light.ttf '), url (' Sansation_light.eot ');/* IE9+ */} Div{fon T-family:myfirstfont;font-weight:bold;} Legend: 5:css3 Div stretch: css: #divset {

margin:30px;width:200px;height:100px;-moz-transition:width 2s; / * Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; / * Opera */background-color:yellow;/* Rotate div */transform:rotate (9deg);-ms-transform:rotate (9deg); /* Internet Explorer */-moz-transform:rotate (9deg); /* Firefox */-webkit-transform:rotate (9deg); /* Safari and Chrome */-o-transform:rotate (9DEG); /* Opera *

/

} #divset: hover{width:300px;} Legend: 6:CSS3 implementation of the graph upside down CSS is: #divshow {width:100px;height:100px;Background:yellow;transition:width 2s, height 2s;-moz-transition:width 2s, height 2s,-moz-transform 2s;/* Firefox 4 * /-webkit-transition:width 2s, height 2s,-webkit-transform 2s;/* Safari and Chrome * /-o-transition:width 2s, height 2s,-o-transform 2s;/* Opera * /} #divshow: hover{/* When the mouse is placed up and down/upside down */width:200px;height:200px;transform:rotate (180deg);-moz-transform:rotate (180DEG);/* Firefox 4 */-webkit-transform:rotate (180DEG);/* Safari and Chrome */-o-transform:rotate (180DEG);/* Opera */}  legend:  7:CSS Implementation of the animation effect CSS: #newsetdiv {width:100px;height:100px;background:red;position:relative; Animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;animation-delay:2s; animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;/* Firefox: */- moz-animation-name:myfirst;-moz-animation-duration:5s;-moz-animation-timing-function:linear;- moz-animation-delay:2s;-moz-animation-iteration-count:infinite;-moz-animation-direction:alternate;- moz-animation-play-state:running;/* Safari and Chrome: */-webkit-animation-name:myfirst;-webkit-animation-duration : 5s;-webkit-animation-timing-function:linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction:alternate;-webkit-animation-play-state:running;/* Opera: */- O-animation-name:myfirst;-o-animation-duration:5s;-o-animation-timing-function:linear;-o-animation-delay:2s;-o -animation-iteration-count:infinite;-o-animation-direction:alternate;-o-animation-play-state:running;}   @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;}}   Legend:  8: The page background image extends with the page's page extension body{     background:url (imag/13.jpg);    background-size:100% 100%;  -moz-background-size:100% 100%;   background-repeat:no-repeat;  } legend:
Note: The HTML for the example above is: <! DOCTYPE html><TITLE>CSS3 Application Examples </title>

CSS3 Application Examples