Often we say about CSS 3 , but don’t think about CSS 3 Properties . When i do research for css 3 got good knowledge about it .
in CSS 3 you are ability for create vector objects in 3 dimenssion (X,Y, Z) .
Of course CSS3 is not yet a W3C standard .
CSS3 Supported by (Details in below table) :
![\"\"](\"http://kamari.bidcorpe.net/wp-content/uploads/2012/03/css3.png\" "\\"css3\\"")
Nice Sample for 3D in CSS3 :http://www.addyosmani.com/resources/googlebox/
and more :http://www.netmagazine.com/features/20-stunning-examples-css-3d-transforms
Manual for use :http://www.w3.org/TR/css3-3d-transforms/
A good web application for create css3 objects + sample in IE : http://css3pie.com/
For Learning CSS3 : http://www.css3.info/
CSS3 Generator : http://css3gen.com/border-radius/
![\"\"](\"http://kamari.bidcorpe.net/wp-content/uploads/2012/03/sample.png\" "\\"sample\\"")
Sample Create :
in HTML :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Sample For CSS 3D</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen”>
</head>
<body>
<div id=”wrapper”>
<h1>Mehdi Kamari</h1>
<p>Nice Sample For 3D in Mehdi Kamari’s blog</p>
</div>
</body></html>
in CSS File :
body
{
background:#d5d5d5;
}
#wrapper
{
width:960px;
min-height:500px;
padding:50px 10px 0 10px;
margin:0 auto;
text-align:center;
}
#wrapper h1
{
font:normal 60pt Arial;
color:#FFFFFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
}
#wrapper p
{
font:normal 40pt Arial;
color:#FFFFFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
}
