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.
Forked from anonymous/Pure CSS Material Design form.markdown
Created
June 24, 2016 04:14
-
-
Save silverliebt/bf7961c14a56d5dfd7dbb9108c3c6eb5 to your computer and use it in GitHub Desktop.
Pure CSS Material Design form
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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: [email protected]" 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // j |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//use.fontawesome.com/0a5f10fda5.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment