Skip to content

Instantly share code, notes, and snippets.

@zikrach

zikrach/form.html

Created February 24, 2014 18:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zikrach/9193467 to your computer and use it in GitHub Desktop.
Save zikrach/9193467 to your computer and use it in GitHub Desktop.
Download ZIP
form html+css
Raw
form.html
<!DOCTYPE html>
<html>
<head>
<title>Форма и progressive enhancement</title>
</head>
<body>
<form class="login" method="post" action="">
<label for="login">Логин</label>
<input type="text" id="login" name="login" />
<label for="password">Пароль</label>
<input type="password" id="password" name="password" />
<input type="submit" value="Войти" />
</form>
</body>
</html>
Raw
style-form.css
body{
background-color:white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;
}
form{
width:250px;
margin:50px auto;
padding:15px 20px;
background:#f5f5f5;
background-color:rgba(245,245,245,0.95);
border-radius: 10px;
box-shadow:0 0 5px rgba(0, 0, 0, 0.4);
}
label{
display:block;
margin-top:1em;
margin-bottom:0.5em;
}
label:first-child{
margin-top:0;
}
input[type="text"],
input[type="password"]{
width:100%;
border:1px solid #ccc;
padding:4px 5px;
background:white;
border-radius: 5px;
box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.2);
box-sizing:border-box;
}
input[type="text"]:focus,
input[type="password"]:focus{
box-shadow:0 0 5px rgba(50, 200, 255, 0.5);
outline:none;
}
input[type="submit"]{
display:block;
margin-top:1em;
padding:5px 15px;
font-weight:bold;
color:#333;
background:white;
border:none;
border-radius: 12px;
background-image: linear-gradient(top, #fff, #ddd);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
text-shadow:0 1px 1px white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment