A web form including material design inspired animations and UX improvements.
Includes transitions, pseudo icons on validation and awesome colours.
A Pen by James Thomas Almond on CodePen.
<div class="flex-cont"> | |
<div class="form-cont"> | |
<form action="" class="form"> | |
<h1 class="form-heading">Pure CSS Material Design form</h1> | |
<div class="form-content"> | |
<div class="form-row"> | |
<label for="first-name" class="form-label">First name:</label> | |
<input type="text" placeholder="Example: John" id="first-name" class="form-textbox input-animate-target" required> | |
<div class="input-animate"></div> | |
<div class="form-check-icon"></div> | |
</div> | |
<div class="form-row"> | |
<label for="last-name" class="form-label">Last name:</label> | |
<input type="text" placeholder="Example: Smith" id="last-name" class="form-textbox input-animate-target" required> | |
<div class="input-animate"></div> | |
<div class="form-check-icon"></div> | |
</div> | |
<div class="form-row"> | |
<label for="email-address" class="form-label">Email address:</label> | |
<input type="email" placeholder="Example: john.smith@gmail.com" id="email-address" class="form-textbox input-animate-target" required> | |
<div class="input-animate"></div> | |
<div class="form-check-icon"></div> | |
</div> | |
<div> | |
<input type="submit" value="Sign me up, Scotty!" class="form-submit"> | |
</div> | |
</div> | |
</form> | |
</div> | |
</div> |
A web form including material design inspired animations and UX improvements.
Includes transitions, pseudo icons on validation and awesome colours.
A Pen by James Thomas Almond on CodePen.
// j |
<script src="//use.fontawesome.com/0a5f10fda5.js"></script> |
// variables | |
$font-stack-sans-serif: Roboto, Helvetica, Arial, sans-serif; | |
$font-stack-serif: "Roboto Slab", Times, "Times New Roman", serif; | |
$color: #333; | |
$inputstylecolor: mediumspringgreen; | |
// mixins | |
@mixin box-sizing { | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
// resets | |
html, body { | |
height: 100%; | |
font-size: 20px; | |
} | |
html { | |
@include box-sizing; | |
} | |
*, *:before, *:after { | |
@include box-sizing; | |
} | |
body { | |
padding: 1em; | |
margin: 0; | |
line-height: 1.5; | |
background-color: #444; | |
font-family: $font-stack-sans-serif; | |
color: $color; | |
} | |
/* main ie fix */ | |
main { | |
display: block; | |
} | |
/* headers */ | |
h1, h2, h3, h4, h5, h6 { | |
line-height: 1.25; | |
font-family: $font-stack-serif; | |
} | |
/* anchor links */ | |
a { | |
text-decoration: none; | |
&:hover, | |
&:active { | |
text-decoration: underline; | |
} | |
&:visited { | |
color: purple; | |
} | |
} | |
/* form elements */ | |
label { | |
display: inline-block; | |
font-weight: 700; | |
} | |
select, textarea, input { | |
width: 100%; | |
padding: .5em; | |
margin: 0; | |
font-family: $font-stack-sans-serif; | |
font-weight: 400; | |
font-size: 1rem; | |
color: $color; | |
} | |
input[type=submit] { | |
cursor: pointer; | |
} | |
/* input border bottom animation on focus */ | |
.input-animate { | |
position: relative; | |
-webkit-transition: color 200ms ease-in-out; | |
-o-transition: color 200ms ease-in-out; | |
transition: color 200ms ease-in-out; | |
&:before { | |
content: ""; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
width: 0; | |
border-bottom: solid 3px; | |
color: $inputstylecolor; | |
-webkit-transition: width 200ms ease-in-out; | |
-o-transition: width 200ms ease-in-out; | |
transition: width 200ms ease-in-out; | |
} | |
} | |
.input-animate-target { | |
border: none; | |
&:focus, &:valid { | |
outline: none; | |
} | |
&:focus ~ .input-animate:before, &:valid ~ .input-animate:before { | |
width: 100%; | |
} | |
} | |
/* font awesome */ | |
.fa { | |
font-family: FontAwesome; | |
font-style: normal; | |
} | |
// modules | |
/* flex */ | |
.flex-cont { | |
display: flex; | |
align-items: center; | |
height: 100%; | |
} | |
/* form */ | |
.form-cont { | |
max-width: 100%; | |
padding: 2em; | |
border-radius: 3px; | |
margin: auto; | |
background-color: #eee; | |
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .5); | |
} | |
.form-heading { | |
margin-top: 0; | |
text-align: center; | |
} | |
.form-row { | |
position: relative; | |
margin-top: 1em; | |
} | |
.form-label { | |
margin-bottom: .2em; | |
} | |
.form-textbox:valid ~ .form-check-icon:after { | |
content: "\f00c"; | |
position: absolute; | |
right: .5em; | |
bottom: .4em; | |
font-family: FontAwesome; | |
font-style: normal; | |
color: $inputstylecolor; | |
} | |
.form-submit { | |
display: block; | |
width: 75%; | |
padding: 1em; | |
border: none; | |
margin: 2em auto 0; | |
background-color: $inputstylecolor; | |
font-weight: 700; | |
color: white; | |
transition: opacity 200ms ease-in-out; | |
&:hover, &:focus { | |
opacity: .6; | |
} | |
} | |
// media queries | |
@media only screen and (max-width:768px){ | |
html, body { | |
font-size: 18px; | |
} | |
} | |
@media only screen and (max-width:640px){ | |
html, body { | |
font-size: 16px; | |
} | |
} |