Create Banner curved shadow

<!DOCTYPE html> <html> <head> <style type=’text/css’> body { margin: 24px; } h1 { background: #139573; border-bottom: 4px solid #fff; color: #fff; font-family: sans-serif; font-size: 24px; font-weight: normal; line-height: 70px; margin: 0; position: relative; text-align: center; } h1 strong { font-weight: bold; } h1::before { background: transparent; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); border-radius:

animated progress bar

———- Index.html ———- <!DOCTYPE html> <html> <head> <title>Animated Progress Bar</title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <div id=”percentcount” class=”percent-count”> </div> <div class=”progress-bar”> <div class=”progress” id=”progress”> </div> </div> </body> <script type=”text/javascript” src=”script.js”></script> </html> ———- style.css ———- *{ box-sizing: border-box; } body{ margin: 0; padding: 0; background: black; } .percent-count{ width: 450px; height: 50px; margin: 100px auto;

Image Hover With style effect

In this tutorials i am create image hover effect to black to original effect turn . You can add this code from your website to effect from the image into your listed company and partner name and their images . Try your code and enjoy . learn something new. <!DOCTYPE html> <html> <head> <title>Image hover

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>