CSS3 ELEMENTS

CSS3 ELEMENTS

AN EXAMPLE OF CSS3 TEXT SHADOW

ANOTHER EXAMPLE OF CSS3 TEXT SHADOW.
The CSS3 Box-shadow element is also applied to the div
AN EXAMPLE OF CSS3 TEXT SHADOW USING BOX-SHADOW AND THE CSS3 BORDER-RADIUS ELEMENT
--
And Add Some CSS3 Rotate
This is a transformed object.
Hover over me!

CSS Code:


.text-shadow {
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,.4)
-moz-text-shadow: 1px 1px 1px rgba(0,0,0,.4);
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
font-size:20px;
text-align:center;
}


.green-box {
-webkit-box-shadow: 0 10px 30px rgba(0,0,0,.5);
-moz-box-shadow: 0 10px 30px rgba(0,0,0,.5);
box-shadow: 0 10px 30px rgba(0,0,0,.5);
color:#fff;
background-color:#2b9f27;
text-align:center;
padding: 10px;
margin:30px 15px;
border:solid 10px #ffff00;
}


.bordered-box {
-webkit-box-shadow: -10px -5px 2px rgba(0,0,0,.5);
-moz-box-shadow:-10px -5px 2px rgba(0,0,0,.5);
box-shadow: -10px -5px 2px rgba(0,0,0,.5);
-wekit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
color:#fff;
background-color:#2b9f27;
text-align:center;
padding: 20px;
margin:50px 15px;
border:solid 10px #ffff00;
}

.bordered-box {
-webkit-transform: rotate(9deg);
-moz-transform: rotate(9deg);
transform: rotate(9deg);
}

.transform-object {
background: gold;
-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
text-align:center;
padding: 20px;
margin:50px 15px 15px 15px;
border:solid 10px #ffff00;
color:#fff;
font-size:30px;
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,.4);
-moz-text-shadow: 1px 1px 1px rgba(0,0,0,.4);
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
-webkit-box-shadow: 0 10px 30px rgba(0,0,0,.5);
-moz-box-shadow: 0 10px 30px rgba(0,0,0,.5);
box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

Add a psudo hover class -- and ...
.transform-object:hover {
-moz-transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
-webkit-transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}