An ultra-clean 'Contact Us' form utilizing CSS3 transitions and some other cool stuff. Get at it on the githubs: https://github.com/himynameisdave/CSS3-Form-Clean-UI
A Pen by Dave Lunny on CodePen.
Created
December 14, 2014 00:51
-
-
Save himynameisdave/5d8ba4047551c2dee765 to your computer and use it in GitHub Desktop.
Ultra-Clean UI 'Contact Us' 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
| <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <form action="" class="contact-form"> | |
| <span>Contact Us!</span> | |
| <ul> | |
| <li> | |
| <i class="fa fa-user form-icon"></i> | |
| <input type="text" placeholder="Name" /> | |
| </li> | |
| <li> | |
| <i class="fa fa-at form-icon"></i> | |
| <input type="text" placeholder="Email" /> | |
| </li> | |
| <li> | |
| <i class="fa fa-university form-icon"></i> | |
| <input type="text" placeholder="Organization/Academic Institution" /> | |
| </li> | |
| <li> | |
| <i class="fa fa-phone form-icon"></i> | |
| <input type="text" placeholder="Phone" /> | |
| </li> | |
| <li> | |
| <i class="fa fa-paper-plane form-icon"></i> | |
| <input type="text" placeholder="Subject" /> | |
| </li> | |
| <li> | |
| <i class="fa fa-envelope form-icon"></i> | |
| <textarea placeholder="Message" rows="2"></textarea> | |
| </li> | |
| <li> | |
| <input type="submit" placeholder="Submit" /> | |
| </li> | |
| </ul> | |
| </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
| //Created by Dave Lunny in the beautiful year of 2014 | |
| ////////////////////////////////////// | |
| // Import(ant) Imports // | |
| ////////////////////////////////////// | |
| // Grab Roboto (Shutup I like it, you can change it if you like) | |
| @import url(http://fonts.googleapis.com/css?family=Roboto:100); | |
| // Grab Font-Awesome, which is actually better to grab from the HTML so imma do that | |
| // @import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); | |
| ///////////////////////////////////// | |
| ////////////////////////////////////// | |
| // CONFIG // | |
| //////////////////////////////////// | |
| // Pick a primary color | |
| @primary-color: #f1a6f3; | |
| // Set the color of the icons | |
| @icon-color: #aaa; | |
| // For whatever reason the placeholder color is a variable so you can change it here | |
| @pholder-color: #ccc; | |
| // Dope colors (not required): | |
| @blue: #0ac; @red: #f66; @amber: #ffc107; @blueGrey: #607d8b; @lightGreen: #8bc34a; @offBlack: #333; | |
| // Font Stack (mmm Roboto) | |
| @font: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| // The width of the form (takes on 100% this is just the max width) | |
| @form-width: 380px; | |
| // WOW this is the scale of the inner elements | |
| @base: 15.5px; | |
| // Standard ratio: | |
| // 22.5 : 15 | |
| // (@form-width : @base) | |
| ///////////////////////////////////// | |
| //////////////////////////////////// | |
| // CSS TRANSITION MIXIN // | |
| // (super overdone but dope!) // | |
| ///////////////////////////////// | |
| .trans(@prop, @speed){ | |
| -webkit-transition: @prop @speed ease; | |
| -moz-transition: @prop @speed ease; | |
| -o-transition: @prop @speed ease; | |
| transition: @prop @speed ease; | |
| } | |
| ///////////////////////////////////// | |
| form.contact-form { | |
| width: 100%; | |
| max-width: @form-width; | |
| margin: 10px auto; | |
| font-size: @base; | |
| font-family: @font; | |
| font-weight: 100; | |
| line-height: @base * 1.618; | |
| letter-spacing: -0.5px; | |
| .trans(box-shadow,0.4s); | |
| box-shadow: 0px 2px 10px #eee; | |
| &:hover { | |
| box-shadow: 0px 4px 14px #ddd, | |
| 0px 0px 6px lighten(@primary-color, 25%); | |
| } | |
| span { | |
| text-align: center; | |
| display: block; | |
| color: #333; | |
| padding: (@base * 1.25) (@base * 1.25) (@base * 0.5); | |
| font: inherit; | |
| font-size: @base * 1.618; | |
| } | |
| ul { | |
| margin: 0; padding: 0; list-style: none; | |
| li{ | |
| padding: 0; | |
| border-bottom: 1px solid #ddd; | |
| margin: 0; | |
| text-align: center; | |
| width: 100%; | |
| i.form-icon { | |
| display: inline-block; | |
| vertical-align: middle; | |
| width: 2%; | |
| text-align: center; | |
| margin: 0 0.5% 0 1%; | |
| padding: 0; | |
| font-size: @base * 1.05; | |
| color: #aaa; | |
| } | |
| input[type="text"] { | |
| width: 90%; | |
| background: none; | |
| margin: 0; | |
| padding: (@base * 0.6666667) 2%; | |
| border: 0; | |
| border-bottom: 3px solid rgba(0,0,0,0); | |
| text-align: left; | |
| font-family: inherit; | |
| font-size: inherit; | |
| font-weight: inherit; | |
| .trans(border-bottom,0.35s); | |
| &:focus{ | |
| outline: none; | |
| border-bottom: 3px solid @primary-color; | |
| } | |
| &::-webkit-input-placeholder { .trans(color,0.35s); color: @pholder-color; } | |
| &:-moz-placeholder { .trans(color,0.35s);color: @pholder-color; } | |
| &::-moz-placeholder { .trans(color,0.35s); color: @pholder-color; } | |
| &:-ms-input-placeholder { .trans(color,0.35s); color: @pholder-color; } | |
| &:focus::-webkit-input-placeholder { color: @primary-color; } | |
| &:focus:-moz-placeholder { color: @primary-color; } | |
| &:focus::-moz-placeholder { color: @primary-color; } | |
| &:focus:-ms-input-placeholder { color: @primary-color; } | |
| } | |
| textarea { | |
| display: inline-block; | |
| vertical-align: top; | |
| width: 88%; | |
| background: none; | |
| padding: (@base * 0.6666667) 2%; | |
| resize: none; | |
| border: 0; | |
| border-bottom: 3px solid rgba(0,0,0,0); | |
| text-align: left; | |
| height: auto; | |
| min-height: @form-width * 0.35; | |
| margin: 0; | |
| font-family: inherit; | |
| font-size: inherit; | |
| font-weight: inherit;font-family: inherit; | |
| .trans(border-bottom,0.35s); | |
| &:focus{ | |
| outline: none; | |
| border-bottom: 3px solid @primary-color; | |
| } | |
| &::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| background: lighten(@primary-color, 20%); | |
| border-radius: 2px; | |
| } | |
| &::-webkit-input-placeholder { .trans(color,0.35s); color: @pholder-color; } | |
| &:-moz-placeholder { .trans(color,0.35s);color: @pholder-color; } | |
| &::-moz-placeholder {.trans(color,0.35s); color: @pholder-color; } | |
| &:-ms-input-placeholder {.trans(color,0.35s); color: @pholder-color; } | |
| &:focus::-webkit-input-placeholder { color: @primary-color; } | |
| &:focus:-moz-placeholder { color: @primary-color; } | |
| &:focus::-moz-placeholder { color: @primary-color; } | |
| &:focus:-ms-input-placeholder { color: @primary-color; } | |
| } | |
| input[type="submit"] { | |
| margin: 15px auto 15px; | |
| padding: (@base * 0.6666667) (@base * 1.25); | |
| border: 1px solid darken(#ddd, 5%); | |
| display: inline-block; | |
| border-radius: 6px; | |
| background: rgba(255, 255, 255, 0); | |
| font-weight: inherit; | |
| font-family: inherit; | |
| font-size: inherit; | |
| .trans(background border,0.35s); | |
| &:focus{ | |
| outline: none; | |
| border: 1px solid @primary-color; | |
| } | |
| &:hover { | |
| background: lighten(#ddd, 5%); | |
| border: 1px solid @primary-color; | |
| } | |
| &:active { | |
| background: darken(#ddd, 5%); | |
| } | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment