Wednesday, February 3, 2016

how to make a popup

                No comments   

 Intoduction :- 

Hii Friends...

Today I explain how to make a popup with the help of java script in asp.net . Here i make a login form and show it in a popup box.

 

 


HTML & CSS Code


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lightbox.aspx.cs" Inherits="lightbox" %>

<html>
<head>
<title>LIGHTBOX EXAMPLE HERE</title>
<style type="text/css">
.black_overlay{
display:none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display:none;
position: absolute;
top: 25%;
left: 35%;
width: 35%;
padding: 0px;
border: 0px solid #a6c25c;
background-color: white;
z-index:1002;
overflow: auto;
}
.headertext{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#f19a19;
font-weight:bold;
}
.textfield
{
border:1px solid #a6c25c;
width:135px;
}
.button2
{
 background-color:#a6c25c;
 color:White;
 font-size:11px;
 font-weight:bold;
 border:1px solid #7f9db9;
 width:68px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a>
<div id="light" class="white_content">
 <table cellpadding=0 cellspacing=0 border=0 style="background-color:#a6c25c;" width="100%"><tr><td height="16px"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="close.gif" style="border :0px"  width="13px" align="right" height="13px"/></a></td></tr>
<tr><td style="padding-left:16px;padding-right:16px;padding-bottom:16px"> 
<table align="center"  border="0" cellpadding="0" cellspacing="0" style="background-color:#fff" width="100%">
<tr>
<td align="center" colspan="2" class="headertext" >Login Form Here </td>
</tr>
<tr><td>&nbsp;</td></tr>
<tr><td align="center">
<table><tr>
<td align="right">Username:</td><td><asp:TextBox ID="txtUser" runat="server" CssClass="textfield"></asp:TextBox>
</td>
</tr>
<tr><td height="10px"></td></tr>
<tr>
<td align="right">Password:</td>
<td><asp:TextBox ID="txtPwd" runat="server" CssClass="textfield"></asp:TextBox></td>
</tr>
<tr><td height="10px"></td></tr>
<tr>
<td> </td><td><asp:Button ID="Button1" runat="server" Text="Sign In" class="button2"/>
<asp:Button ID="Button2" runat="server" Text="Sign Up" class="button2" /></td>
</tr></table></td></tr>
<tr><td height="10px"></td></tr>
</table>
</td></tr>
</table>
<div align="center" class=" headertext">
<asp:Label ID="txtlbl" runat="server"  ></asp:Label></div>
</div>
<div id="fade" class="black_overlay"></div>
</form>
</body>
</html>

Demo:-



Monday, January 18, 2016

CSS 3D Cube

                No comments   

  Intoduction :- 

Hii Friends...

Today I explain how to make 3D animation with the help of html and css. The animation is the process used for generating aniamtion images.

HTML & CSS Code











<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body {
     margin-top: 125px;
 }

 @-moz-keyframes spinningH {
  from {
    -moz-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -moz-transform: rotateX(360deg) rotateY(360deg);
  }
}

 @-webkit-keyframes spinningH {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform: rotateX(360deg) rotateY(360deg);
  }
}

 /*@-o-keyframes spinningH {
  from {
    -o-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -o-transform: rotateX(360deg) rotateY(360deg);
  }
}*/

 @-ms-keyframes spinningH {
  from {
    -ms-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -ms-transform: rotateX(360deg) rotateY(360deg);
  }
}

 @keyframes spinningH {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(360deg) rotateY(360deg);
  }
}

  #container {
  -webkit-perspective : 1000px;
  -moz-perspective    : 1000px;
  -o-perspective      : 1000px;
  -ms-perspective     : 1000px;
  perspective         : 1000px;

   -webkit-perspective-origin  : 50% 50%;
  -moz-perspective-origin     : 50% 50%;
  -moz-transform-origin       : 50% 50%;
  -o-perspective-origin       : 50% 50%;
  -ms-perspective-origin      : 50% 50%;
  perspective-origin          : 50% 50%;
 }

 .animate {
  -webkit-animation : spinningH 5s infinite linear;
  -moz-animation    : spinningH 5s infinite linear;
  -o-animation      : spinningH 5s infinite linear;
  -ms-animation     : spinningH 5s infinite linear;
  animation         : spinningH 5s infinite linear;
}

 #cube {
  position: relative;
  margin: 0 auto;
  height: 400px;
  width: 400px;

   -webkit-transition  : -webkit-transform 2s linear;
  -moz-transition     : -moz-transform 2s linear;
  -o-transition       : -o-transform 2s linear;
  -ms-transition      : -ms-transform 2s linear;
  transition          : transform 2s linear;

   -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;
}

 #cube>div {
  position: absolute;
  height: 360px;
  width: 360px;
  padding: 20px;
  opacity: 0.95;
  background-position:center center;
}

 #cube div:nth-child(1) {
  -webkit-transform : translateZ(200px);
  -moz-transform    : translateZ(200px);
  -o-transform      : translateZ(200px);
  -ms-transform     : translateZ(200px);
  transform         : translateZ(200px);
  background-color  : #db6b11;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqELuo1WFRN8RNMBca2fugnljYbumb2v8BAKO0HUir102lvOYvvGTTldWTlMAgL90alufYyLYu3oamWKwC6gpLkbOvBduzNdxGvYipwCxQrw4nWxFXf78GKTh379v7uqD70pqW1qYsXSsG/s1600-r/finalc%2523logoPNGupdated.png);
  background-repeat : no-repeat;
}

 #cube div:nth-child(2) {
  -webkit-transform : rotateY(90deg) translateZ(200px);
  -moz-transform    : rotateY(90deg) translateZ(200px);
  -o-transform      : rotateY(90deg) translateZ(200px);
  -ms-transform     : rotateY(90deg) translateZ(200px);
  transform         : rotateY(90deg) translateZ(200px);
  background-color  : #db6b11 ;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqELuo1WFRN8RNMBca2fugnljYbumb2v8BAKO0HUir102lvOYvvGTTldWTlMAgL90alufYyLYu3oamWKwC6gpLkbOvBduzNdxGvYipwCxQrw4nWxFXf78GKTh379v7uqD70pqW1qYsXSsG/s1600-r/finalc%2523logoPNGupdated.png);
  background-repeat : no-repeat;
}

 #cube div:nth-child(3) {
  -webkit-transform : rotateY(180deg) translateZ(200px);
  -moz-transform    : rotateY(180deg) translateZ(200px);
  -o-transform      : rotateY(180deg) translateZ(200px);
  -ms-transform     : rotateY(180deg) translateZ(200px);
  transform         : rotateY(180deg) translateZ(200px);
  background-color  : #db6b11 ;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqELuo1WFRN8RNMBca2fugnljYbumb2v8BAKO0HUir102lvOYvvGTTldWTlMAgL90alufYyLYu3oamWKwC6gpLkbOvBduzNdxGvYipwCxQrw4nWxFXf78GKTh379v7uqD70pqW1qYsXSsG/s1600-r/finalc%2523logoPNGupdated.png);
  background-repeat : no-repeat;
}

 #cube div:nth-child(4) {
  -webkit-transform : rotateY(-90deg) translateZ(200px);
  -moz-transform    : rotateY(-90deg) translateZ(200px);
  -o-transform      : rotateY(-90deg) translateZ(200px);
  -ms-transform     : rotateY(-90deg) translateZ(200px);
  transform         : rotateY(-90deg) translateZ(200px);
  background-color  : #db6b11 ;
  background-image  : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqELuo1WFRN8RNMBca2fugnljYbumb2v8BAKO0HUir102lvOYvvGTTldWTlMAgL90alufYyLYu3oamWKwC6gpLkbOvBduzNdxGvYipwCxQrw4nWxFXf78GKTh379v7uqD70pqW1qYsXSsG/s1600-r/finalc%2523logoPNGupdated.png);
  background-repeat : no-repeat;
}

 #cube div:nth-child(5) {
  -webkit-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);
  -moz-transform    : rotateX(-90deg) translateZ(200px) rotate(180deg);
  -o-transform      : rotateX(-90deg) translateZ(200px) rotate(180deg);
  -ms-transform     : rotateX(-90deg) translateZ(200px) rotate(180deg);
  transform         : rotateX(-90deg) translateZ(200px) rotate(180deg);
  background-color  : #fff;
  background-image  : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqELuo1WFRN8RNMBca2fugnljYbumb2v8BAKO0HUir102lvOYvvGTTldWTlMAgL90alufYyLYu3oamWKwC6gpLkbOvBduzNdxGvYipwCxQrw4nWxFXf78GKTh379v7uqD70pqW1qYsXSsG/s1600-r/finalc%2523logoPNGupdated.png);
  background-repeat :no-repeat;
}

 #cube div:nth-child(6)  {
  -webkit-transform : rotateX(90deg) translateZ(200px);
  -moz-transform    : rotateX(90deg) translateZ(200px);
  -o-transform      : rotateX(90deg) translateZ(200px);
  -ms-transform     : rotateX(90deg) translateZ(200px);
  transform         : rotateX(90deg) translateZ(200px);
  background-color  : #fff ;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqELuo1WFRN8RNMBca2fugnljYbumb2v8BAKO0HUir102lvOYvvGTTldWTlMAgL90alufYyLYu3oamWKwC6gpLkbOvBduzNdxGvYipwCxQrw4nWxFXf78GKTh379v7uqD70pqW1qYsXSsG/s1600-r/finalc%2523logoPNGupdated.png);
  background-repeat :no-repeat;
  text-align:center;  
}

     </style>
</head>
<body>
    <div id="container">
  <div id="cube" class="animate">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
</body>
</html>

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

  • How to make color picker
    Intoduction :-   Hii Friends... Today i going to put a very interesting module i.e how to make a color picker module. Its very interesti...
  • Bounce a circle with Css
    Intoduction :-   Hii Friends... Today I explain how to make a bouncing circle with the help of css.  DEMO:- ...
  • Bootstrap Model
      Intoduction :-   Hii Friends... Today I explain how to make a bootstrap model in asp.net . Its not so complicated its easy. here som...
  • Angular Directives
    Intoduction :-   Hii Friends... Today I explain about Angular Directives.  1) Angular JS use new attribute i.e called Directives. 2)...
  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • Angular Js Introduction
    Intoduction :-   Hii Friends... Today I explain about angular js. Angular js is a part of javascript but its extended. 1 ) AngularJS ...
  • How To Make Semi-Transparent Buttons
    Intoduction :-   Hii Friends...   Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes t...
  • css Hovering Bounce
    Intoduction :-   Hii Friends... Today I explain how to make css hovering fill circle  boundary with images bounce . hover selector is us...
  • Border style in css
    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...
  • Calculator with Angular JS
    Intoduction :-   Hii Friends... Today I explain how to make a Calculator with the help of Angular JS. In this code i use some directive...