css box sliding style on hover

Intoduction :- 
Hii Friends...
Have you ever wanted to use your own style in  your website ?  you create your own stylish div with 3D look. This script will let you do that  Easily.This can possible with the help of css . This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.So go ahead, CSS form styling is this easy. Now  I am going to put this with Example.

DEMO:- 

Dot Net Modules

Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)

Dot Net Modules

Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)

Example :-
<div class="coat">
    <div class="left_barrier">
    </div>
    <div class="right_barrier">
    </div>
    <h1>
        Dot Net Modules</h1>
    <img style="border:solid 2px rgb(36, 159, 163);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
    <p>
        Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)
    </p>
</div>
<div class="coat slide_in">
    <div class="left_barrier">
    </div>
    <div class="right_barrier">
    </div>
    <h1>
        Dot Net Modules</h1>
    <img style="border:solid 2px rgb(36, 159, 163);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
    <p>
        Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)
    </p>
</div>
<style>
    body
    {
        font-size: 12px;
        font-family: 'Open Sans' , sans-serif;
        color: #4A4A4A;
        text-align: center;
    }
   
    .coat
    {
        position: relative;
        width: 300px;
        height: 310px;
        margin: 20px auto;
        background-color: #eee;
        z-index: 1;
        padding: 10px;
        -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        -mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
   
    .left_barrier
    {
        position: absolute;
        background: #DBDCDE;
        bottom: 0;
        right: 50%;
        left: 0;
        top: 0;
        border: 1px solid #F0F0F0;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }
    .coat:hover .left_barrier
    {
        right: 100%;
        left: -50%;
    }
   
    .right_barrier
    {
        position: absolute;
        background: #DBDCDE;
        bottom: 0;
        left: 50%;
        right: 0;
        top: 0;
        border: 1px solid #F0F0F0;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }
    .coat:hover .right_barrier
    {
        left: 100%;
        right: -50%;
    }
   
    .slide_in
    {
        overflow: hidden;
    }
    .slide_in .left_barrier
    {
        background: #DBDCDE;
        border: 1px solid #F0F0F0;
    }
    .slide_in .right_barrier
    {
        background: #DBDCDE;
        border: 1px solid #F0F0F0;
    }
   
    .coat img
    {
        width: 100%;
        margin-top: 15px;
    }
   
    p
    {
        margin-top: 15px;
        text-align: justify;
    }
   
    h1
    {
        font-size: 20px;
        font-weight: bold;
        margin-top: 5px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }
</style> 

Read More

css box style

Intoduction :- 
Hii Friends...
Have you ever wanted to use your own style in  your website ?  you create your own stylish div with 3D look. This script will let you do that  Easily.This can possible with the help of css . This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.So go ahead, CSS form styling is this easy. Now  I am going to put this with Example.

DEMO:- 

 Example :-
<div class="wrap">
    <h1>Dot Net Modules</h1>  
       <img style="border:solid 3px #7aa5a2;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
        <p>
      Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)
       </p>
       <br />
</div>

<style>
body {
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    color: #4A4A4A ;
    text-align: center;
}

.wrap { 
    background: #d6e9c6; 
    margin: 20px auto;
    display: block;
    width: 300px;
    min-height: 310px;
    padding:20px;
   
   
}

.wrap img {
    width: 100%;
    margin-top: 15px;
}

p{
    margin-top: 15px;
    text-align: justify;
} 
h1 { 
    background: #a8c4c0;
    background: -moz-linear-gradient(top,  #a8c4c0 0%, #7aa5a2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8c4c0), color-stop(100%,#7aa5a2));
    background: -webkit-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
    background: -o-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
    background: -ms-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
    background: linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    padding: 0 20px; 
    line-height: 50px;
    height: 50px;
    margin-top: 5px;
    margin-left: -35px;  
    position: relative; 
    width: 300px; 
    box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    color: #3b3a3b; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 
} 
  h1:before {
    content: '';
    position: absolute;
    top: 5px;
    height: 39px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    width: 100%;
    left: 0;
}
</style>

Read More

RadioButton Style with css

Intoduction :- 
Hii Friends...
Have you ever wanted to use your own style in  radio buttons ? This script will let you do that  Easily. This can possible with the help of css .This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.So go ahead, CSS form styling is this easy. Now I am going to put this with Example.

DEMO:- 

Example :-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script> 
<style type="text/css" >
.change {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 50px;
      text-align: center;
      margin: -30px 0px 0px -75px;
      background: rgb(36, 159, 163);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .change span {
      position: absolute;
      width: 20px;
      height: 4px;
      top: 50%;
      left: 50%;
      margin: -2px 0px 0px -4px;
      background: #ffffff;
      display: block;
      -webkit-transform: rotate(-45deg);
      -webkit-transition: all 0.2s ease;
      -moz-transform: rotate(-45deg);
      -moz-transition: all 0.2s ease;
      -ms-transform: rotate(-45deg);
      -ms-transition: all 0.2s ease;
      transform: rotate(-45deg);
      transition: all 0.2s ease;
    }
    .change span:after {
      content: "";
      display: block;
      position: absolute;
      width: 4px;
      height: 12px;
      margin-top: -8px;
      background: #ffffff;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    input[type=radio] {
      display: none;
    }
    .change label {
      cursor: pointer;
      color: rgba(0, 0, 0, 0.2);
      width: 60px;
      font-family: 'Roboto';
      font-weight: 400;
      line-height: 50px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    label[for=yes] {
      position: absolute;
      left: 0px;
      height: 20px;
    }
    label[for=no] {
      position: absolute;
      right: 0px;
    }
    #no:checked ~ .change {
      background: #eb4f37;
    }
    #no:checked ~ .change span {
      background: #ffffff;
      margin-left: -8px;
    }
    #no:checked ~ .change span:after {
      background: #ffffff;
      height: 20px;
      margin-top: -8px;
      margin-left: 8px;
    }
    #yes:checked ~ .change label[for=yes] {
      color: #ffffff;
    }
    #no:checked ~ .change label[for=no] {
      color: #ffffff;
    }
 </style>
    <div align="center" style="position:relative; padding:120px 0px;">
      <div class="toggle-radio">
        <input type="radio" name="rdo" id="yes" checked>
        <input type="radio" name="rdo" id="no">
        <div class="change">
          <label for="yes">Yes</label>
          <label for="no">No</label>
          <span></span>
        </div>
      </div>
    </div>

Read More