WebSoftPrograms

Pure Css3 Shapes - Shape # 2 - Arrows

Hello! Now I am sharing with you, four kinds of fancy arrows designed in Css3.You can also download from the given link below.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div id="wrapper">
<h1>Pure Css3 Shapes</h1>
<h2>Shape # 2 - Arrow</h2>
<main>
<section>
<div class="column">
<table style="margin-top:50px !important" border="0">
<tr>
<td><div class="arrow-TopLeft"></div></td>
<td><div class="arrow-TopRight"></div></td>
</tr>
<tr>
<td><div class="arrow-BottomLeft"></div></td>
<td><div class="arrow-BottomRight"></div></td>
</tr>
</table>
</div>
</section>
</main>
</div>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-size:72px;
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
h2{
 font-size:36px;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#f60;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color:#E7E7E0;
}
.clear{
 clear:both;
}
.column{
 margin:15px;
 float:left;
 position:relative;
}
#logo{
 position:relative;
 float:left;
 width:475px;
 height:200px;
 background-image:url(wsp_logo.png);
 background-repeat: no-repeat;
}
#wrapper{
 width:1100px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
main{
 width:100%;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
section{
 width:80%;
 margin:0 auto;
}
.arrow-TopLeft{
 float:left;
   position: relative;
   width: 0;
   height: 0;
 margin-right:40px;
 margin-bottom:10px;
   border-top: 36px solid transparent;
   border-right: 36px solid #333;
   -webkit-transform: rotate(-25deg) scaleX(-1);
 -moz-transform: rotate(-25deg) scaleX(-1);
 -o-transform: rotate(-25deg) scaleX(-1);
 -ms-transform: rotate(-25deg) scaleX(-1);
}
.arrow-TopLeft:after {
   content: "";
   position: absolute;
   border: 0 solid transparent;
   border-top: 12px solid #333;
   border-radius: 80px 0 0 0;
   top: -46px;
   left: -36px;
   width: 48px;
   height: 48px;
   -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}

.arrow-TopRight{
 float:left;
   position: relative;
   width: 0;
   height: 0;
 margin-left:40px;
 margin-bottom:10px;
   border-top: 36px solid transparent;
   border-right: 36px solid #f60;
   -webkit-transform: rotate(25deg);
 -moz-transform: rotate(25deg);
 -o-transform: rotate(25deg);
 -ms-transform: rotate(25deg);
}
.arrow-TopRight:after {
   content: "";
   position: absolute;
   border: 0 solid transparent;
   border-top: 12px solid #f60;
   border-radius: 80px 0 0 0;
   top: -46px;
   left: -36px;
   width: 48px;
   height: 48px;
   -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}

.arrow-BottomLeft{
 float:left;
   position: relative;
   width: 0;
   height: 0;
 margin-top:10px;
 margin-right:40px;
   border-top: 36px solid transparent;
   border-right: 36px solid #f60;
   -webkit-transform: rotate(25deg) scaleX(-1) scaleY(-1);
 -moz-transform: rotate(25deg) scaleX(-1) scaleY(-1);
 -o-transform: rotate(25deg) scaleX(-1) scaleY(-1);
 -ms-transform: rotate(25deg) scaleX(-1) scaleY(-1);
}
.arrow-BottomLeft:after {
   content: "";
   position: absolute;
   border: 0 solid transparent;
   border-top: 12px solid #f60;
   border-radius: 80px 0 0 0;
   top: -46px;
   left: -36px;
   width: 48px;
   height: 48px;
   -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}
.arrow-BottomRight{
 float:left;
   position: relative;
   width: 0;
   height: 0;
 margin-top:10px;
 margin-left:40px;
   border-top: 36px solid transparent;
   border-right: 36px solid #333;
   -webkit-transform: rotate(-25deg) scaleY(-1);
 -moz-transform: rotate(-25deg) scaleY(-1);
 -o-transform: rotate(-25deg) scaleY(-1);
 -ms-transform: rotate(-25deg) scaleY(-1);
}
.arrow-BottomRight:after {
   content: "";
   position: absolute;
   border: 0 solid transparent;
   border-top: 12px solid #333;
   border-radius: 80px 0 0 0;
   top: -46px;
   left: -36px;
   width: 48px;
   height: 48px;
   -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}

DOWNLOAD PROJECT SOURCE

Pure Css3 Shapes - Shape # 1 - EGG

Hello! From today I am starting to make different kinds of pure css3 shapes and share with you.You can also download from the given link below.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div class="egg"></div>

Step 2: Add the following code to the <style> section of your Html page or Css :

.egg{
float: left;
margin: 10px;
display: block;
width: 252px;
height: 360px;
background-color: #fff;
box-shadow: 0 8px 24px 3px #999;
-webkit-box-shadow: 0 8px 24px 3px #999;
-moz-box-shadow: 0 8px 24px 3px #999;
-o-box-shadow: 0 8px 24px 3px #999;
-ms-box-shadow: 0 8px 24px 3px #999;
border:4px solid #000;
border-radius: 50% / 60% 60% 40% 40%;
-webkit-border-radius: 50% / 60% 60% 40% 40%;
-moz-border-radius: 50% / 60% 60% 40% 40%;
-o-border-radius: 50% / 60% 60% 40% 40%;
-ms-border-radius: 50% / 60% 60% 40% 40%;
 cursor: pointer;
}

DOWNLOAD PROJECT SOURCE

Create an awesome Css3 Animated Flip Boxes in simple steps without Javascript

Hi, Guys! Are you want to become a good website designer? thats why you are always ready to learn anything, related to Web Designing like Html, Css, Javascript etc?

So, thats why I have created a new program & sharing with you, this is an awesome "Css3 Animated Flip Boxes" without javascript in just some simple steps. If you face any problem you can just scroll down & comment to ask or click to "Download Project Source" for Download.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div id="wrapper">
<h1>Html5 - Css3 Flip Boxes - No Javascript!!!</h1>
<div id="main">

<!--Flip Box 1-->

<div class="Horizontal-flip-wrapper">
<div class="Horizontal-flipper">
<div class="Horizontal-flipper-front">
<div class="Horizontal-flipper-front-text">
<h2>Horizontal (X)<br/>Front View</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</div>
<div class="Horizontal-flipper-back">
<div class="Horizontal-flipper-back-text">
<h2>Horizontal (X)<br/>Back View</h2>
<p><img src="" width="50" /><!--Your can put you own image.--></p>
<p><a href="https://www.facebook.com/websoftprograms" target="new">Please follow us on facebook for more programs & tutorials.</a></p>
</div>
</div>
</div>
</div>

<!--Flip Box 2-->

<div class="Vertical-flip-wrapper">
<div class="Vertical-flipper">
<div class="Vertical-flipper-front">
<div class="Vertical-flipper-front-text">
<h2>Vertical (Y)<br/>Front View</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</div>
<div class="Vertical-flipper-back">
<div class="Vertical-flipper-back-text">
<h2>Vertical (Y)<br/>Back View</h2>
<p><img src="" width="50" /><!--Your can put you own image.--></p>
<p><a href="https://www.facebook.com/websoftprograms" target="new">Please follow us on facebook for more programs & tutorials.</a></p>
</div>
</div>
</div>
</div>

<!--Flip Box 3-->

<div class="Horizontal-flip-wrapper">
<div class="Horizontal-flipper">
<div class="Horizontal-flipper-front">
<div class="Horizontal-flipper-front-text">
<h2>Horizontal (X)<br/>Front View</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</div>
<div class="Horizontal-flipper-back">
<div class="Horizontal-flipper-back-text">
<h2>Horizontal (X)<br/>Back View</h2>
<p><img src="" width="50" /><!--Your can put you own image.--></p>
<p><a href="https://www.facebook.com/websoftprograms" target="new">Please follow us on facebook for more programs & tutorials.</a></p>
</div>
</div>
</div>
</div>

<!--Flip Box 4-->

<div class="Vertical-flip-wrapper">
<div class="Vertical-flipper">
<div class="Vertical-flipper-front">
<div class="Vertical-flipper-front-text">
<h2>Vertical (Y)<br/>Front View</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</div>
<div class="Vertical-flipper-back">
<div class="Vertical-flipper-back-text">
<h2>Vertical (Y)<br/>Back View</h2>
<p><img src="" width="50" /><!--Your can put you own image.--></p>
<p><a href="https://www.facebook.com/websoftprograms" target="new">Please follow us on facebook for more programs & tutorials.</a></p>
</div>
</div>
</div>
</div>


<div class="clear"></div>
</div>
</div>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color: #ccc;
}

.clear{
 clear:both;
}
#wrapper{
 width:1100px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
#main{
 width:950px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}

/*--FOR HORIZONTAL FLIP--*/

.Horizontal-flip-wrapper {
 perspective: 1000px;
 float:left;
 margin:5px;
}
.Horizontal-flip-wrapper:hover .Horizontal-flipper{
 transform: rotateY(180deg);
}
.Horizontal-flip-wrapper, .Horizontal-flipper-front, .Horizontal-flipper-back {
 width: 225px;
 height: 175px;
 border-radius:25px;
}
.Horizontal-flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}
.Horizontal-flipper-front, .Horizontal-flipper-back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
}
.Horizontal-flipper-front {
 background-color:#f60;
 z-index: 2;
 transform: rotateY(0deg);
}
.Horizontal-flipper-front-text{
 padding:10px;
}
.Horizontal-flipper-front-text h2{
 font-family:Georgia, "Times New Roman", Times, serif;
 color:#333;
 font-weight:lighter;
 text-align:center;
 margin-bottom:10px;
}
.Horizontal-flipper-front-text p{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#fff;
 text-align:center;
 margin-bottom:5px;
}
.Horizontal-flipper-back {
 background-color:#333;
 transform: rotateY(180deg);
}
.Horizontal-flipper-back-text{
 padding:10px;
}
.Horizontal-flipper-back-text h2{
 font-family:Georgia, "Times New Roman", Times, serif;
 color:#F60;
 font-weight:lighter;
 text-align:center;
 margin-bottom:10px;
}
.Horizontal-flipper-back-text p{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#fff;
 text-align:center;
 margin-bottom:5px
}
.Horizontal-flipper-back-text p a{
 color:#fff;
 text-decoration:none;
}
.Horizontal-flipper-back-text p a:hover{
 color:#f60;
 text-decoration:underline;
}
/*--FOR VERTICAL FLIP--*/

.Vertical-flip-wrapper {
 perspective: 1000px;
 float:left;
 margin:5px;
}
.Vertical-flip-wrapper .Vertical-flipper{
 transform-origin: 100% 87.5px; /* half of height */
}
.Vertical-flip-wrapper:hover .Vertical-flipper{
 transform: rotateX(-180deg);
}
.Vertical-flip-wrapper, .Vertical-flipper-front, .Vertical-flipper-back {
 width: 225px;
 height: 175px;
 border-radius:25px;
}
.Vertical-flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}
.Vertical-flipper-front, .Vertical-flipper-back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
}
.Vertical-flipper-front {
 background-color:#333;
 z-index: 2;
 transform: rotateY(0deg);
}
.Vertical-flipper-front-text{
 padding:10px;
}
.Vertical-flipper-front-text h2{
 font-family:Georgia, "Times New Roman", Times, serif;
 color:#F60;
 font-weight:lighter;
 text-align:center;
 margin-bottom:10px;
}
.Vertical-flipper-front-text p{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#fff;
 text-align:center;
 margin-bottom:5px
}
.Vertical-flipper-back {
 background-color:#f60;
 transform: rotateX(180deg);
}
.Vertical-flipper-back-text{
 padding:10px;
}
.Vertical-flipper-back-text h2{
 font-family:Georgia, "Times New Roman", Times, serif;
 color:#333;
 font-weight:lighter;
 text-align:center;
 margin-bottom:10px;
}
.Vertical-flipper-back-text p{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#fff;
 text-align:center;
 margin-bottom:5px;
}
.Vertical-flipper-back-text p a{
 color:#fff;
 text-decoration:none;
}
.Vertical-flipper-back-text p a:hover{
 color:#333;
 text-decoration:underline;
}

DOWNLOAD PROJECT SOURCE

How to make Tooltip in Css without Javascript

Hello! if you are searching for that How to create & show Tooltip on hover of image, we have made a program for it.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div id="wrapper">
<h1>Css3 - Tooltip on Hover of Image</h1>
<br />
<div id="main">
<div class="thumb"><a title="Top - The Lion" class="tooltip-top"><img src="" /></a><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb"><a title="Right - The Tiger" class="tooltip-right"><img src=" /></a><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb"><a title="Left - The Wolf" class="tooltip-left"><img src="" /></a><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb"><a title="Bottom - The Crocodile" class="tooltip-bottom"><img src="" /></a><!--Your Image Must Be 250px X 150px.--></div>
<div class="clear"></div>
</div>
</div>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color:#ccc;
}

.clear{
 clear:both;
}
#wrapper{
 width:540px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
#main{
 width:100%;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
.thumb{
 float:left;
 width:250px;
 height:150px;
 margin:10px;
}
.thumb img{
 width:100%;
 height:100%;
 border:5px solid #fff;
}
.tooltip-top{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    display: inline;
    position: relative;
 text-align:center;
}
.tooltip-top:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 3px;
    top: -185px;
    color: #f60;
    content: attr(title);
    left: 6%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 200px;
}
.tooltip-top:hover:before{
    width: 0; 
 height: 0; 
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-top: 6px solid #333;
    top: -156px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.tooltip-right{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    display: block;
    position: relative;
 text-align:center;
}
.tooltip-right:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 3px;
    top:70px;
    color: #f60;
    content: attr(title);
    right: -250px;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 200px;
}
.tooltip-right:hover:before{
    width: 0; 
 height: 0; 
 border-top: 6px solid transparent;
 border-bottom: 6px solid transparent;
 border-right: 6px solid #333;
    top: 78px;
    content: "";
    right: -20px;
    position: absolute;
    z-index: 99;
}

.tooltip-bottom{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    display: inline;
    position: relative;
 text-align:center;
}
.tooltip-bottom:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 3px;
    bottom: -36px;
    color: #f60;
    content: attr(title);
    left: 6%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 200px;
}
.tooltip-bottom:hover:before{
    width: 0; 
 height: 0; 
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #333;
    bottom: -7px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.tooltip-left{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    display: block;
    position: relative;
 text-align:center;
}
.tooltip-left:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 3px;
    top:70px;
    color: #f60;
    content: attr(title);
    left: -240px;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 200px;
}
.tooltip-left:hover:before{
    width: 0; 
 height: 0; 
 border-top: 6px solid transparent;
 border-bottom: 6px solid transparent;
 border-left: 6px solid #333;
    top: 78px;
    content: "";
    left: -10px;
    position: absolute;
    z-index: 99;
}

DOWNLOAD PROJECT SOURCE

How to create a Horizontal Drop Down Menu in Html & Css

Hello! Today I am sharing with you a simple horizontal dropdown menu, which is entirely with HTML,CSS and without javascript.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div id="wrapper">
<h1>
Pure Css3 Drop Down Menu</h1>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a>
<ul>
<li><a href="#">Service #</a></li>
<li><a href="#">Service #</a></li>
<li><a href="#">Service #</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">Product #</a></li>
<li><a href="#">Product #</a></li>
<li><a href="#">Product #</a></li>
</ul>
</li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear">
</div>
</nav>
</header>
</div>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color:#ccc;
}

.clear{
 clear:both;
}
#wrapper{
 width:1100px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
header{
   height:auto;
   position:relative;
   padding-top:30px;
}
nav{
   background-color:#333;
   width:1024px;
   margin:0 auto;
 border-bottom:3px solid #F60;
 border-radius:5px 5px 0px 0px;
 -webkit-border-radius:5px 5px 0px 0px;
 -moz-border-radius:5px 5px 0px 0px;
 -o-border-radius:5px 5px 0px 0px;
 -ms-border-radius:5px 5px 0px 0px;
}
nav ul{
   list-style:none;
}
nav ul li{
   position:relative;
   float:left;
 height:60px;
 border-right:1px dotted #f60;
}

nav > ul > li:last-child{
 border-right:none;
}

nav > ul > li:first-child{
 border-radius:5px 0px 0px 0px;
 -webkit-border-radius:5px 0px 0px 0px;
   -moz-border-radius:5px 0px 0px 0px;
   -o-border-radius:5px 0px 0px 0px;
 -ms-border-radius:5px 0px 0px 0px;
}

nav > ul > li:hover:after {
 content: "";
 display: block;
 width: 0;
 height: 0;
 position: absolute;
 left: 78%;
 top: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid #F60;
 margin-left: -50px;
}

nav ul li:hover ul{
 display: block;
}
nav ul li a{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   text-decoration:none;
   color:white;
   width:150px;
   height:30px;
   display:block;
   text-align:center;
   line-height:3.7em;
   padding-bottom:30px;
}
nav ul li a:hover{
 color:#FF802B;
}
nav ul ul{
 width:225px;
   position:absolute;
   background-color:#F60;
   display:none;
}
nav ul ul li{
 position:relative;
   float:left;
 width:225px;
 height:40px;
 line-height: 1em;
 border-right:none;
 border-bottom: 1px dotted #C30;
}
nav ul ul li:hover{
 background-color: #FF802B;
}

nav ul ul li:hover ul{
 visibility: visible;
}
nav ul ul li a{
 font-size:0.9em;
   width:225px;
   text-align:left;
   padding-left:10px;
   height:40px;
   line-height: 3em;
   display:block;
}
nav ul ul li a:hover{
 color:white;
}
nav ul ul ul{
 position: absolute;
 left:225px;
 top:0px;
 visibility: hidden;
}

DOWNLOAD PROJECT SOURCE

Simple Css3 Animation - Image SHAKE Effect

Hello! Today I am sharing with you a simple Css3 Animation program, which have apply Css3 Shake effect on some images.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div id="wrapper">
<h1>
Image Shake Effect - Css3 Animation</h1>
<div id="main">
<div class="thumb">
<img src="" /><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb">
<img src="" /><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb">
<img src="" /><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb">
<img src="" /><!--Your Image Must Be 250px X 150px.--></div>
<div class="clear">
</div>
</div>
</div>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color: #ccc;
}

.clear{
 clear:both;
}

#wrapper{
 width:1100px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
#main{
 width:100%;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
.thumb{
 float:left;
 width:250px;
 height:150px;
 margin:10px;
}
.thumb img{
 width:100%;
 height:100%;
 border:5px solid #fff;
}

.thumb img:hover
{
 animation-name: shake;
 animation-duration: 200ms;
 transform-origin:50% 50%;
 animation-iteration-count: 2;
 animation-timing-function: linear;
 
 -webkit-animation-name: shake;
 -webkit-animation-duration: 200ms;
 -webkit-transform-origin:50% 50%;
 -webkit-animation-iteration-count: 2;
 -webkit-animation-timing-function: linear;
 
 -moz-animation-name: shake;
 -moz-animation-duration: 200ms;
 -moz-transform-origin:50% 50%;
 -moz-animation-iteration-count: 2;
 -moz-animation-timing-function: linear;
 
 -o-animation-name: shake;
 -o-animation-duration: 200ms;
 -o-transform-origin:50% 50%;
 -o-animation-iteration-count: 2;
 -o-animation-timing-function: linear;
 
 -ms-animation-name: shake;
 -ms-animation-duration: 200ms;
 -ms-transform-origin:50% 50%;
 -ms-animation-iteration-count: 2;
 -ms-animation-timing-function: linear;
}

@keyframes shake {
 0% {transform: scale(1); }
 50% {transform: scale(0.9); }
 100% {transform: scale(1); }
}

@-webkit-keyframes shake {
 0% {-webkit-transform: scale(1); }
 50% {-webkit-transform: scale(0.9); }
 100% {-webkit-transform: scale(1); }
}

@-moz-keyframes shake {
 0% {-moz-transform: scale(1); }
 50% {-moz-transform: scale(0.9); }
 100% {-moz-transform: scale(1); }
}

@-o-keyframes shake {
 0% {-o-transform: scale(1); }
 50% {-o-transform: scale(0.9); }
 100% {-o-transform: scale(1); }
}

@-ms-keyframes shake {
 0% {-ms-transform: scale(1); }
 50% {-ms-transform: scale(0.9); }
 100% {-ms-transform: scale(1); }
}

DOWNLOAD PROJECT SOURCE

How to make a Simple Drop Down Menu in Html & Css

Hi, Guyz! Today I am sharing with you a simple dropdown menu, which is entirely with HTML and CSS.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<header>
<nav>
<ul>
<li><div class="logo">
<h3>
PureCssDropDown</h3>
</div>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a>
<ul>
<li><a href="#">Service 4</a></li>
<li><a href="#">Service 5</a></li>
<li><a href="#">Service 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a>
<ul>
<li><a href="#">Product 4</a></li>
<li><a href="#">Product 5</a></li>
<li><a href="#">Product 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear">
</div>
</nav>
</header>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0;
   margin:0;
   font-family:Arial, Helvetica, sans-serif;
}
body{
 background-color:#CCC;
}
header{
   height:auto;
   position:relative;
   padding-top:30px;
}
nav{
   background-color:#333;
   width:1024px;
   margin:0 auto;
}
nav .logo{
   color:white;
   background-color:#F60;
   cursor: pointer;
   padding-left:20px;
   padding-right:40px;
 height:60px;
}
.logo h3{
   line-height:3.2em;
   padding-bottom:5px;
}
nav ul{
   list-style:none;
  
}
nav ul li{
   position: relative;
   float:left;
 height:60px;
 transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
}
nav ul li a{
 font-family:Helvetica, sans-serif;
 font-size:18px;
   text-decoration: none;
   color:#fff;
   width:150px;
   height:30px;
   display: block;
   text-align: center;
   line-height: 3.5em;
   padding-bottom:30px;
}
nav ul ul{
  position: absolute;
  background-color:#5F5F5F;
  display:none;
  
}
nav ul li:hover ul{
  display: block;
  
}
nav ul li:hover{
  background-color:#F60;
}
nav ul ul li a{
  font-size:15px;
  width:140px;
  text-align:left;
  padding-left:10px;
  height:10px;
  line-height: 3.7em;
  display:block;
}
nav ul ul ul{
  position: absolute;
  left:150px;
  top:0px;
  visibility: hidden;
}
nav ul ul li:hover ul{
  visibility: visible;
}
.clear{
   clear:both;
}