খুব সহজে CSS দিয়ে  From Pop  up

খুব সহজে CSS দিয়ে From Pop up

Capture

আজ আমরা শিখব কিভাবে CSS দিয়ে  Form Pop up করা যায়……………………………

 

<html>
<meta charset=”utf-8″ />

<head>

<title>CSS3 POPUP FORM</title>
<style>
#box
{
width:800px;
top:20%;
position:relative;

height:100px ;
//overflow:auto;
margin: 0 auto;

}
#button {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #42B1E5;
background-image: -moz-linear-gradient(center top , #42B1E5 3%, #36BAEF 3%, #336F9D 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#42B1E5), color-stop(3%,#36BAEF ), color-stop(100%,#336F9D));
background-image: -webkit-linear-gradient(top, #42B1E5 3%,#36BAEF 3%,#336F9D 100%);
background-image: -o-linear-gradient(top,#42B1E5 3%,#36BAEF 3%,#336F9D 100%);
background-image: -ms-linear-gradient(top, #42B1E5 3%,#36BAEF 3%,#336F9D 100%);
background-image: linear-gradient(top, #42B1E5 3%,#36BAEF 3%,#336F9D 100%);
border-color: #42B1E5 #336F9D #36BAEF;
border-image: none;
border-radius: 3px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255, .35);
-ms-box-shadow: inset 0 1px 0 rgba(255,255,255, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255, .35);
color: #FFFFFF;
cursor: pointer;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
height: 30px;
outline: 0 none;
padding: 5px 15px;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
word-wrap: normal;
}

#popup
{
width:500px;
height:300px;;
border:1px solid white;
background-color:white;
top:20%;
position:relative;
margin: 0 auto;
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189,0.8);
-webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
-moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
-webkit-box-shadow: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
opacity:1;

}

#overlay
{
position:absolute;
top:0px;
visibility:hidden;
background-color:black;
opacity:1;
left:0px;
height:100%;
width:100%;
text-align:center;
}
#overlay:target
{
visibility:visible;
-webkit-animation: fade 400ms ease;
}
#overlay:target > #popup
{

-webkit-animation: moveFromBottom 400ms ease;
}

.close_button
{
position:absolute;
right:1px;
cursor:pointer;
border:none;
margin-top:-30px;
}

.login
{
padding:30px;
margin-top:30px;

}
.login label
{
font-size:25px;
font-family:sans-serif;
}

.login .input
{
display: inline;
font-family: “Helvetica Neue”, Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;

font-size: 1.55em;
padding: 11px 25px;
padding-left: 55px;
width: 300px;
color: #777;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;

}

</style>

</head>
<body>
<div id=”box”>
<center><h1>CSS POPUP FORM DEMO</h1><br>
<a href=”#overlay” id=”button”>LOGIN</a><br><br><br><br>
</center>
</div>
<div id=”overlay”>

<div id=”popup”>
<!– ANY CONTENTS –>
<a href=””><img class=”close_button” src=”http://www.bramstadhouders.nl/page4/files/close_image_234.png”/></a>

<form class=”login”>

<label>Username</label>

<input type=”text” tabindex=”1″ class=”input” placeholder=”Webtuts” required><br><br>

<label>Password</label>

<input type=”password” class=”input” tabindex=”2″ required><br><br>

<input type=”checkbox” tabindex=”3″>Keep me logged in

<input type=”submit” id=”button” value=”Login” tabindex=”4″>

</form>

</div>

</div>

</body>
</html>

পরবর্তীতে আমরা শিখব কিভাবে CSS দিয়ে 3d button তৈরি  করা যায়। ধন্যবাদ………………………

About Nure Jannat

একটি উত্তর দিন