CSS3 Examples

1 CSS3 Transitions View Demo

a. Color Transition

.color-transition a{color: #e83119;font-size: 35px;text-transform: uppercase;}
.color-transition a:hover{color: #016dd2;}
.color-transition a{ -webkit-transition:color .4s ease-out;}

b. Border Transition

.border-nav{min-height: 120px;margin-top: 60px;}

.border-nav ul li{
	display: inline;
	list-style-type: none;}

.border-nav a{
	font-size: 22px;
	display: inline-block;
	margin: 0px 15px 0px 0px;
	text-decoration: none;
	float: left;
	border-bottom: 3px solid #e83119;
	-webkit-transition: border .3s ease-out;}

.border-nav a:hover{
	border-bottom: 50px solid #e83119;
	text-decoration: none; 
	color: #e83119;}

2: Background Clip View Demo

a. background-clip:text;

.bg-clip{
	background: url(../images/pat.png) repeat;
	margin-bottom: 60px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

b. Transform

.txt-rotate{
	background: url(../images/clipped_image.png) repeat;
	margin-bottom: 35px;margin-top: 0px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-transform: rotate(-5deg); 
	-moz-transform: rotate(-5deg);
	-o-transform: rotate (-5deg);}

3: CSS Transforms, Box Shadow and RGBa View Demo

.shadowed{
	margin-top: 30px;
	margin-bottom: 30px;
	border: 3px solid #fff;
	box-shadow: 0 3px 4px rgba(0,0,0,.5);
	-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
	-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);}

.ontwerps1{  -o-transform: rotate(2.5deg);
	-moz-transform: rotate(2.5deg);
	-webkit-transform: rotate(2.5deg);
	margin-bottom: -125px;}

.ontwerps2{  -o-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);}

.ontwerps3{  -o-transform: rotate(2.5deg);
	-moz-transform: rotate(2.5deg);
	-webkit-transform: rotate(2.5deg)}

.ontwerps4{  -o-transform: rotate(-2.5deg);
	-moz-transform: rotate(-2.5deg);
	-webkit-transform: rotate(-2.5deg);
	margin-top: -40px;}

4: CSS3 Animations View Demo

a. Keyframe Animation

.circle_motion{
	-webkit-animation-name: track;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	}

@-webkit-keyframes track {
	0% {
		margin-top:0px;
	}
	25% {
		margin-top:150px;
	}
	50% {
		margin-top:150px;
		margin-left: 300px;
	}
	75% {
		margin-top:0px;
		margin-left: 300px;
	}
	100% {
		margin-left:0px;
	}
}

Download File View Demo