CSS3 Examples – CSS3 Tutorial Examples, CSS3 Reference Examples

Example 1 : CSS3 Transition Tutorial and Reference

Hover Me
Transition Example

Example : CSS3 Transition Property.

.example-div {
width: 150px;
height: 100px;
background: #16a085;
color: #fff;
padding-top 20px;
-webkit-transition: background 1s,color 1s,width 1s,height 1s;
transition-property: background,color,width,height;
transition-duration: 1s,1s,1s,1s;
}

.example-div:hover {
background: #1ec7e6;
width: 200px;
height: 110px;
color: brown;
}

Example 1.2 : CSS3 Transition Tutorial and Reference : Changing multiple properties of an element with CSS3 Transition

CSS3
Transition Example

Example : use of CSS3 Transition Property.

.animated-box {
width: 150px;
height: 100px;
padding: 10px;
float: left;
background: #16a085;
color: #fff;
position: absolute;
font-weight: bold;
font-size: 25px;
margin: 5px;
-webkit-border-radius: 5px;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,color 1s,width 1s,height 1s,font-size 1s;
border-radius: 5px;
opacity: 0.8;
text-shadow: 1px 0px 2px #000;
}

.animated-box:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0.9;
background: #1ec7e6;
width: 200px;
height: 100px;
font-size: 30px;
color: brown;
}

Example 2 : CSS3 Animation Tutorial and Reference

CSS3
Animation Example

Example : use of CSS3 Animation Property.

#animation-demo {
width: 60px;
height: 40px;
padding: 10px;
background: #1ec7e6;
color: #fff;
position: relative;
font-weight: bold;
font-size: 20px;
-webkit-border-radius: 5px;
animation: animation-demo 5s 1;
-moz-animation: animation-demo 5s 1;
-webkit-animation: animation-demo 5s 1;
-o-animation: animation-demo 5s 1;
}

@keyframes animation-demo {
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(10deg);left:0px;}
50% {transform: rotate(0deg);left:300px;}
75% {transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animation-demo {
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(10deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:300px;}
75% {-webkit-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animation-demo {
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(10deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:300px;}
75% {-moz-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animation-demo {
0% {-o-transform: rotate(0deg);left:0px;}
25% {-o-transform: rotate(10deg);left:0px;}
50% {-o-transform: rotate(0deg);left:300px;}
75% {-o-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-o-transform: rotate(-360deg);left:0px;}
}

Example 3.1 : CSS3 Transform Tutorial and Reference : 2D transform : rotate() method

Example : use of CSS3 2D transform : Rotate() Method.

.2d-transform-demo {
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
}

Example 3.2 : CSS3 Transform Tutorial and Reference : Css3 2D transform : translate() method

Example : use of CSS3 2D transform : Translate() Method.

.2d-transform-demo {
transform: translate(60px,100px);
-webkit-transform: translate(60px,100px);
}

Example 3.3 : CSS3 Transform Tutorial & Reference : Css3 2D transform : skew() method

Example : use of CSS3 2D transform : Skew() Method.

.2d-transform-demo {
transform: skew(40deg,20deg);
-webkit-transform: skew(40deg,20deg);
}

Example 3.4 : CSS3 Transform Tutorial & Reference : CSS3 2D transform : matrix() method

Example : use of CSS3 2D transform : Matrix() Method.

.2d-transform-demo {
transform: matrix(0.800,0.5,-0.5,0.806,0,0);
-webkit-transform: matrix(0.800,0.5,-0.5,0.806,0,0);
}

Example 3.5 : CSS3 Transform Tutorial and Reference : CSS3 2D transform : scale() method

Example : use of CSS3 2D transform : Scale() Method.

.2d-transform-demo {
transform: scale(3,4);
-webkit-transform: scale(3,4);
}

Example 3.6 : CSS3 Transform Tutorial and Reference :CSS3 3D Transform Example 3.6.1 : CSS3 Transform Tutorial & Reference : 3D transform : rotateX() method

Example : use of CSS3 3D transform : RotateX() Method.

.3d-transform-demo {
transform: rotateX(110deg);
-webkit-transform: rotateX(110deg);
}

Example 3.6.2 : CSS3 Transform Tutorial and Reference : 3D transform : rotateY() method

Example : use of CSS3 3D transform : RotateY() Method.

.3d-transform-demo {
transform: rotateY(110deg);
-webkit-transform: rotateY(110deg);
}

Example 4 : CSS3 Shadow Tutorial & Reference

Example : use of CSS3 : Box-shadow Property

#box_shadow {
width: 300px;
height: 100px;
background: green;
box-shadow: 9px 10px 10px 1px #000
}

Example 4.2 : text-shadow Property Tutorial and Reference

Text Shadow Example

Example : use of CSS3 : Text-shadow Property

#text_shadow {
width: 300px;
height: 100px;
background: yellow;
color: blue;
text-align: center;
}

h4 {
text-shadow: 6px 5px 8px #000;
padding-top: 20px;
}

Also Related to CSS

Facebook0 Tweet0 Pin0