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; } }
Geef een reactie