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

Auto-Hiding Navbar with Javascript

Intoduction :- 
Hii Friends...
today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with big name brands like Facebook, Twitter, Google, LinkedIn, and others using this pattern. Other apps and websites are already doing this, and it’s pretty sweet. Here’s how you do it.

DEMO:- 

• Go quickly to ->
• Mobiles
• AC
• Refrigerators
• Cameras
• Sports

Example :-

<style type="text/css">

 .topper-link
{
list-style:none;
background:#fff;
width:100%;
text-align:center;
box-shadow: 2px 2px 3px #000;
height:35px;
}
.topper-link li
{
display:inline-block;
color:#333;
}
.tp1
{

}
.topper-link li a
{
border-right: 1px solid #333;
color: #333;
display: block;
padding: 5px 10px;
text-decoration: none;
}
    </style>

<div id="scid" class="row">
    <div class="container">
        <div class="top_menu tp1">
            <ul class="topper-link" style="margin-top: 3px; padding-top: 3px;">
                <li>Go quickly to -> </li>
                <li><a href="#">Mobiles</a> </li>
                <li><a href="#">Books</a> </li>
                <li><a href="#">Food</a> </li>
                <li><a href="#">Lighting</a> </li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).scroll(function () {
        if (($(this).scrollTop() / 10) > 10) {
            $('#scid').css('display', 'none');
        }
        else {
            $('#scid').css('display', 'block')

        }
    });
</script>

</div>
</div>

</div>

Read More

css Hovering Bounce

Intoduction :- 
Hii Friends...
Today I explain how to make css hovering fill circle  boundary with images bounce .
hover selector is used to select elements when you mouse over them.  When we put a cursor on the image the hovering is work and fill the circle on hovering color that you want to fill.  And the images is give a little bounce.

DEMO:- 

Example :-

<style type="text/css">
.theImage {
    animation-duration: .3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.theImage:hover {
    animation-name: jittery;
}

@keyframes jittery {
    10% {
        transform: translate(-2px, -3px) scale(1.01, 1.01);
    }
    20% {
        transform: translate(3px, 2px) scale(.99, .99);
    }
    30% {
        transform: translate(-4px, -5px) scale(1.01, 1.01);
    }
    40% {
        transform: translate(2px, 3px) scale(1, 1);
    }
    50% {
        transform: translate(-1px, -2px) scale(.98, .98);
    }
    60% {
        transform: translate(0px, 3px) scale(1.02, 1.02);
    }
    70% {
        transform: translate(-2px, -4px) scale(1, 1);
    }
    80% {
        transform: translate(3px, 5px) scale(.99, .99);
    }
    90% {
        transform: translate(-5px, -3px) scale(1.1, 1.1);
    }
    100% {
        transform: translate(3px, 1px) scale(.95, .95);
    }
}
</style>

<img class="theImage" alt="hover over it" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">

Read More

Box Design in html

Intoduction :- 
Hii Friends...
Today I explain how to make multiple box with multiple colors with the help of html. Here with the html we create multiple colors boxes.Html is a client side tool, and a good thing is html is not a case sensitive language. 

DEMO:-

Example :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ser_top
        {
            border: 1px #e91547 solid;
        }
        .ser_hadding
        {
            background-color: #eb1646;
            border-radius: 0px 0px 10px 0px;
            text-align: center;
            font-size: 16px;
            padding: 5px 0px 5px 0px;
        }
        .ser_hadding a
        {
            color: #FFFFFF;
        }
        .ser_hadding a:hover
        {
            color: #FFFF00;
            text-decoration: none;
        }
        .col-md-3
        {
            width: 25%;
        }
        .ser_img
        {
            padding-left: 75px;
            margin-top: 5px;
        }
        .img-responsive
        {
            display: block;
            height: auto;
            max-width: 100%;
        }
        .ser_text
        {
            text-align: center;
            font-size: 14px;
            font-family: Arial;
            color: #000000;
        }
        .read_more
        {
            background-color: #1195d5;
            color: #FFFFFF;
            text-align: center;
            width: 110px;
            padding: 5px;
            border-radius: 5px;
            margin-left: 65px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .read_more a
        {
            color: #FFFFFF;
        }
     
     
        .ser_top1
        {
            border: 1px #fc6e22 solid;
        }
        .ser_top2
        {
            border: 1px #8ae409 solid;
        }
        .ser_top3
        {
            border: 1px #1195d5 solid;
        }
        #welcome
        {
            background: #FFFFFF;
            width: 100%;
            float: left;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="welcome">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="ser_top">
                        <div class="ser_hadding">
                            <img src="img/page-html.ico" style="height:30px; width:30px;" />&nbsp;&nbsp;<a href="#">HTML</a></div>
                        <div class="ser_img">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" class="img-responsive" style="margin-left: -42px;" /></div>
                        <div class="ser_text">
                            you can find Html,Html5 designs
                            <br />
                            on my blog.</div>
                        <div class="read_more">
                            <a href="#">Read More....</a></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ser_top1">
                        <div class="ser_hadding" style="background-color: #fc6e22;">
                            <img src="img/download.png" style="height:30px; width:30px;" />&nbsp;&nbsp;<a href="#">Css</a></div>
                        <div class="ser_img">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" class="img-responsive" style="margin-left: -42px;" /></div>
                        <div class="ser_text">
                             you can find Css,Css3 designs
                            <br />
                            on my blog.
                        </div>
                        <div class="read_more">
                            <a href="#">Read More....</a></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ser_top2">
                        <div class="ser_hadding" style="background-color: #83da06;">
                            <img src="img/logo_js.png" style="height:30px; width:30px;" />&nbsp;&nbsp;<a href="#">JavaScript</a></div>
                        <div class="ser_img">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" class="img-responsive" style="margin-left: -42px;" /></div>
                        <div class="ser_text">
                             you can find Javascrip and Angular js
                            <br />
                            on my blog.
                        </div>
                        <div class="read_more">
                            <a href="#">Read More....</a></div>
                    </div>
                </div>
                <div class="col-md-3" style="display:none;">
                    <div class="ser_top3">
                        <div class="ser_hadding" style="background-color: #1195d5;">
                            <img src="img/post.png" />&nbsp;<a href="#">blank</a></div>
                        <div class="ser_img">
                            <img src="img/pos.png" class="img-responsive" /></div>
                        <div class="ser_text">
                            blank<br />blank
                            </div>
                        <div class="read_more">
                            <a href="#">Read More....</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Read More

Css two way hovering

Intoduction :- 
Hii Friends...
Today I explain how to make css hovering fill circle  boundary with images bounce .
hover selector is used to select elements when you mouse over them.  Here in this code it has two style hovering one is front part and second is back part. In back part we can add images . Here in back part i only write some headings.

DEMO:-

Welcome

DotNetModules

* Your Welcome *

* On My Blog *

Example :-

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DotnetModules</title>
    <style type="text/css">
        .flip-container {
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            perspective: 1000;
        }
          .flip-container:hover .flipper,
            .flip-container.hover .flipper {
                -webkit-transform: perspective(800px) rotateY(180deg);
                -moz-transform: perspective(800px) rotateY(180deg);
                transform: perspective(800px) rotateY(180deg);
            }
        .flip-container,
        .front,
        .back {
            width: 100%;
            height: 100%;
        }
       .service-one {
            padding: 30px 30px 15px;
            height: 19rem;
            border-top: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }
         .service-one {
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }
            .service-one.active,
            .service-one:hover {
                background-color: #31B0D5;
            }
          .flipper {
            -webkit-transition: 0.6s;
            -moz-transition: 0.6s;
            transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            position: relative;
        }
        .front,
        .back {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }
         .front {
            z-index: 2;
            -webkit-transform: perspective(800px) rotateY(0deg);
            -moz-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
        }
         .back {
            -webkit-transform: perspective(800px) rotateY(180deg);
            -moz-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="service-one  border-bottom" style="height: 200px; width: 200px;">
                <a href="javascript:void(0)">
                    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                        <div class="flipper">
                            <div class="front">
                                <div style="margin-left: 1px;">
                                    <img class="img-responsive" style="height: 90px; width: 90px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
                                    </img>
                                </div>
                                <h3 style="margin-left: 1px;">Welcome
                                </h3>
                                <p style="margin-left: 1px;">
                                    DotNetModules
                                </p>
                            </div>
                            <div class="back">
                                <p style="margin-left: 1px; color:white;">
                                    *  Your Welcome *
                                </p>
                                <br />
                                <p style="margin-left: 1px; color:white;">
                                    *  On My Blog *
                                </p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </form>
</body>
</html>

Read More