SHARE

Create a Slick CSS3 Login Form NO IMAGES ALLOWED


CSS3 Login Form
DEMO: HERE
Source:

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="tutorialspots.com" />

	<title>...::: Slick CSS3 Login Form - Tutorialspots.Com:::...</title>
</head>
<style>
form {
    width: 250px;
    padding: 20px;
    border: 1px solid #270644;
 
    /*** Adding in CSS3 ***/
 
    /*** Rounded Corners ***/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
 
    /*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
    background:  -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
 
    /*** Shadow behind the box ***/
    -moz-box-shadow:0px -5px 300px #270644;
    -webkit-box-shadow:0px -5px 300px #270644;
}
input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1px solid #ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
 
    /*** Adding CSS3 ***/
 
    /*** Transition Selectors - What properties to animate and how long ***/
    -webkit-transition-property: -webkit-box-shadow, background;
    -webkit-transition-duration: 0.25s;
 
    /*** Adding a small shadow ***/
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
}
input:hover {
    -webkit-box-shadow: 0px 0px 4px #000;
    background: #9d39e1;
}
input.submit {
    width: 100px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: #000 1px 1px;
    border-top: 1px solid #ad64e0;
    margin-top: 10px;
 
    /*** Adding CSS3 Gradients ***/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
    background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
}
</style>
<body>
<center>
<form>
        <label>Username:</label>
            <input type="text" name="username" />
        <label>Password:</label>
            <input type="password" name="password"  />
            <input type="submit" value="Submit" name="submit" class="submit" />
</form>
</center>
</body>
</html>

Sleek & Modern Login Form

Sleek & Modern Login Form
DEMO: HERE
DOWNLOAD SOURCE


Form Design Using CSS and HTML

Form Design Using CSS and HTM
DEMO: HERE
SOURCE:

<!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>
<style>

.label{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#0066FF;
}
.tableBorder{
    border:solid 1px #0066FF;
    margin-top:100px;
}
.message{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#0066FF;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Login to Website</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table cellpadding="2px" cellspacing="1px" bgcolor="#F4F5F7" width="400px" class="tableBorder" align="center">
    <tr>
        <td colspan="2" bgcolor="#0066FF">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" class="label">&nbsp;</td>
    </tr>
    
    <tr>
        <td align="center" colspan="2">
            <img src="images/locked.png" border="0" align="absbottom"/>&nbsp;
            <span class="message">Login to the Admin Panel</span>
        </td>
    </tr>                   
    <tr>
        <td colspan="2" class="label">&nbsp;</td>
    </tr>
    <tr>
        <td class="label" align="right" width="40%">Username:</td>
        <td align="left" width="60%"><input type="text" name="username" maxlength="20"/></td>
    </tr>
    <tr>
        <td class="label" align="right">Password:</td>
        <td align="left"><input type="password" name="password" maxlength="20" /></td>
    </tr>
    <tr>
        <td class="label" align="right">&nbsp;</td>
        <td align="left"><input type="submit" value="Login" /></td>
    </tr>                   
    <tr>
        <td colspan="2" class="label">&nbsp;</td>
    </tr>                   
</table>
</body>
</html>

Recent search terms:

  • #781bb9 color

NO COMMENTS