Thursday, December 31, 2015

How to to toggle with js

                No comments   

Intoduction :-

Hii Friends...

Today I explain how to toggle a panel on click event with the help of Js. In Js there are many events like mouse-over,mouse-down,key press etc. So I explain this with the code.

Step : 1   The Code goes here :->

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#sheetal").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>
<style>
#panel, #sheetal {
    padding: 5px;
    text-align: center;
    background-color: #249FA3;
    border: solid 1px #FFF;
}
#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>

<div id="sheetal">Click Here</div>
<div id="panel">Welcome On DotnetModules Blog</div>
</body>
</html>

  DEMO:- 

                               1) When On Click

                




 

Thursday, December 10, 2015

How to make rounded corners in Css

                No comments   

Introduction :-

Hii Friends...
Today I explain how to make rounded corners in css. We can make many types of corners with the help of css. Here i explain only rounded corners. we can make square , rounded , circle , rectangle etc. with the help of Css.

 Step : 1   The Css goes here :->

 <!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

 #rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

 #rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>
</head>
<body>

 <p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

 </body>

</html>

 DEMO:-


Wednesday, December 2, 2015

Border style in css

                No comments   

Introduction :-

 Hii Friends...
Today I explain how to make many types of borders in asp.net with the help of css. so now I explain this step by step.

There are many types of borders like :-


  1.  dotted - Defines a dotted border
  2.  dashed - Defines a dashed border
  3.  solid - Defines a solid border
  4.  double - Defines a double border
  5.  groove - Defines a 3D grooved border. The effect depends on the border-color value
  6.  ridge - Defines a 3D ridged border. The effect depends on the border-color value
  7.  inset - Defines a 3D inset border. The effect depends on the border-color value
  8.  outset - Defines a 3D outset border. The effect depends on the border-color value
  9.  none - Defines no border
  10.  hidden - Defines a hidden border

Step : 1   The Css goes here :->

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>


DEMO:-  



                                                                                         
                                                                 

Popular Posts