Border Radius in CSS3

<!DOCTYPE html> <html> <head> <title>CSS3 Border Radius Examples</title> <style> .box { margin-bottom:10px; font-family :’Courier New’, monospace; font-size :12pt; text-align :center; padding :10px; width :380px; height :75px; border :10px solid #006; } .b1 { -moz-border-radius :40px; -webkit-border-radius:40px; border-radius :40px; } .b2 { -moz-border-radius :40px 40px 20px 20px; -webkit-border-radius:40px 40px 20px 20px; border-radius :40px 40px 20px 20px;

Animated Search Box in CSS3

——— Index.html ———- <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <link rel=”stylesheet” href=”style.css” type=”text/css” /> <title>Untitled Document</title> </head> <body> <div class=”searchBox”> <div class=”searchForm”> <input id=”searchField” type=”text” placeholder=”Search Here” /> <div class=”close”> <span class=”front”></span> <span class=”back”></span> </div> </div> </div> </body> </html> ——- style.css ——– body{ margin: 0; padding: 0; background:#111; } .searchBox{ position: absolute; top: 50%;

Transitioning on hover effect in CSS3

<!DOCTYPE html> <html> <head> <title>Transitioning on hover effect</title> <style> #square { position :absolute; top :50px; left :50px; width :100px; height :100px; padding :2px; text-align :center; border-width :1px; border-style :solid; background :orange; transition :all .8s ease-in-out; -moz-transition :all .8s ease-in-out; -webkit-transition:all .8s ease-in-out; -o-transition :all .8s ease-in-out; -ms-transition :all .8s ease-in-out; } #square:hover { background :yellow;

Apply margin in css

<!DOCTYPE html> <html> <head> <title>Margins</title> <style> #object1 { background :lightgreen; border-style:solid; border-width:1px; font-family :”Courier New”; font-size :9px; width :250px; height :250px; padding :5px; margin :10px 20px 30px 40px; } table { padding :0; border :1px solid black; background :cyan; } </style> </head> <body> <table> <tr> <td> <div id=’object1′>margin:<br>10px 20px 30px 40px;</div> </td> </tr> </table> </body>

Left navigation bar in css

<html> <head> <style> div#navigation { float: left; width: 200px; height: 100%; color: #ffffff; background-color: #666; border: 1px solid #000; padding: 5px; } a { display: block; text-decoration: none; } </style> </head> <body> <div id=”navigation”> <a href=””>Navigation item 1</a> <a href=””>Navigation item 2</a> <a href=””>Navigation item 3</a> <a href=””>Navigation item 4</a> </div> </body> </html>

Create Box Model Visibility in CSS

<html> <head> <title></title> <style type=”text/css”> * .box { display: static; overflow: visible; visibility: visible; width: 160px; height: 150px; padding: 30px; border-top: 30px solid gray; border-bottom: 30px solid black; border-left: 30px solid gray; border-right: 30px solid black; margin-left: 230px; margin-top: 80px; background-color: #ccc; } </style> </head> <body> <h1>Box Model</h1> <div class=”box”></div> </body> </html>

Create Accordion with CSS

<!DOCTYPE html> <html> <head> <style type=’text/css’> nav a { display: block; } summary { cursor: pointer; } summary::-webkit-details-marker { display: none; } </style> </head> <body> <details> <summary>Heading #1</summary> <nav> <a href=”#”>Link A</a> <a href=”#”>Link B</a> <a href=”#”>Link C</a> </nav> </details> </body> </html>

Text Shadow

<html> <head> <title>Text Shadow </title> <style rel=”stylesheet” type=”text/css”> h1 { font-family: arial; } h1.complex { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } </style> </head> <body> <h1 class=”complex”>Complex text shadow</h1> </body> </html>

Create page number in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> .online { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #AAA; width: 20px; text-align: center; padding: 2px; display: inline-block; } .test { display: inline-block; } </style> </head> <body> <div class=”test”> <div class=”online”>0</div> <div class=”online”>1</div> <div class=”online”>2</div> <div class=”online”>3</div> <div class=”online”>4</div> <div class=”online”>5</div> <div class=”online”>6</div> <div class=”online”>7</div> <div class=”online”>8</div>

Image Slideshow using CSS3

<!DOCTYPE html> <html> <head> <style type=’text/css’> body:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } #tech-slideshow { height: 221px; width: 332px; position: relative; overflow: hidden; } #tech { height: 221px; width: 660px; background: url(image.jpg); position: absolute; top: 0; left: 0; height: 100%; -webkit-animation-play-state: paused; -webkit-animation: moveSlideshow 10s linear infinite; -moz-animation-play-state: paused; -moz-animation: moveSlideshow 10s linear infinite; }