Demo :
Copy and Paste The Code in .aspx Page .
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="css.aspx.cs" Inherits="css" %>
<!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 runat="server">
<style>
form div.Slable{ /* pop up label */
display: Block;
margin: 40px;
font: 16px;
position: relative;
}
form div.Slable input[type="text"], form div.Slable textarea{
width: 300px;
padding: 10px;
border: 1px solid Silver;
border-radius: 6px;
}
form div.Slable textarea{
height: 200px;
}
form div.Slable label{ /* pop up label style */
position: absolute;
left: 0;
background: Lightgold;
border: 1px solid #CC6666;
border-radius: 2px;
padding: 3px 10px;
box-shadow: 4px 1px 5px gray;
font-weight: bold;
-webkit-backface-visibility: hidden;
top: 10px;
-moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
opacity: 0;
z-index: -1;
}
form div.Slable > *:focus{
border: 1px solid #45bcd2;
box-shadow: 0 0 8px 2px #98d865;
}
form div.Slable > *:focus + label{
opacity: 1;
z-index:100;
top: -35px;
-ms-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
</style>
<title>Css Label POP UP Message .</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server" Height="65px" ImageUrl="~/Logo1.png" />
</div>
<div class="Slable">
<input id="name" placeholder="Your Name" type="text">
<label for="name">Your Name</label>
</div>
<div class="Slable">
<input id="email" placeholder=" Your Email Id" type="text">
<label for="email">Your Email Id</label>
</div>
<div class="Slable">
<textarea id="feedback" placeholder="Comment"></textarea>
<label for="feedback">Comment</label>
<asp:Image ID="Image2" runat="server" ImageUrl="~/dotnet5.png" />
</div>
</form>
</body>
</html>
Nice Post, Thanks Saroj
ReplyDeleteThanks Rabi.
DeleteVery Good Tutorial .
ReplyDelete