Create a Slick CSS3 Login Form NO IMAGES ALLOWED

http://www.threestyles.com/tutorials/css3-login-form-tutorial

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

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);
}

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다