CSS Sample


<!doctype html> <html> <head> <style> a { color:grey; text-decoration:none; width:120px; margin-top:0px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; } #box { width:200px; height:100px; background-color:black; box-shadow: 10px 10px 5px #888888; } #cf { position:relative; height:281px; width:450px; } #cf img { position:absolute; left:0; opacity: 1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img.top:hover { opacity:0; } #slider { position:relative; animation:slider infinite; animation-duration:6s; /* Safari and Chrome */ -webkit-animation:slider infinite; -webkit-animation-duration:6s; } @keyframes slider { from {top:0px; left:0px;} to {top:180px; left:400px;} } @-webkit-keyframes slider /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <div id="box"> <div id="cf"> <img class="bottom" src="images/pebbles.jpg" /> <img class="top" src="images/summit.jpg" /></div> <div id="slider"> <img src="style/pic1.jpg" alt="slider" height="150" width="200"/></div> </body> </html>

Jason is a custom website developer and graphic designer with extensive experience in computer software scripting, computer animation, and customer service. His current focus on creating websites and creating e-commerce stores is preceded by 10 + years in software development, and eight years in the U.S. Navy.

Sample Codes







Contact Details
News Letters