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.
himynameisdave
/ verbosify
Created
November 27, 2014 04:35
Trying to make a mixin that verbosifies a shorthand margin property.
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
| /* | |
| Verbose Margin: | |
| returns a margin value in 'long form', | |
| also alphabatized (breaking the t-r-b-l rule). | |
| Expects paramaters like normal (i.e: 'margin: 1px 2px 3px 4px = .vmar(1px, 2px, 3px, 4px)') | |
| */ | |
| .vmar(@mt, @mr, @mb, @ml ){ | |
| margin-bottom: @mb; | |
| margin-left: @ml; |
himynameisdave
/ Ultra-Clean-UI-Contact-Us-Form.markdown
Created
December 14, 2014 00:51
Ultra-Clean UI 'Contact Us' Form
Just a dumb little dead-simple photo enlarger thingy, done purely with CSS3/LESS.
A Pen by Dave Lunny on CodePen.
Just a fluid Christmas grid! A Festivus for the rest of us!
Dope icons from here: http://www.flaticon.com/packs/merry-christmas-line
Christmas Colors based on Adam Lindqvist's Pen: http://codepen.io/adamlindqvist/pen/EaPeJg
A Pen by Dave Lunny on CodePen.
himynameisdave
/ gradient-animation.less
Last active
May 23, 2023 01:45
Mixins for Animating Between Gradients
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
| .gradient-animation( @start, @end, @transTime ){ | |
| background-size: 100%; | |
| background-image: linear-gradient(@start, @end); | |
| position: relative; | |
| z-index: 100; | |
| &:before { | |
| background-image: linear-gradient(@end, @start); | |
| content: ''; | |
| display: block; | |
| height: 100%; |
himynameisdave
/ broken-gradient-animation.less
Created
April 10, 2015 01:12
broken gradient animation
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
| // For brevity, vendor prefixes have been removed. | |
| // This does not work as expected; instead of a smooth transition | |
| // what you get is a hard swap from one gradient to the next | |
| .super-cool-background-that-SHOULD-animate-on-hover { | |
| background: linear-gradient( #fff, #ccc ); | |
| transition: all 0.45s; | |
| &:hover{ | |
| background: linear-gradient( #ccc, #fff ); | |
| } | |
| } |
himynameisdave
/ button.html
Last active
August 29, 2015 14:18
Basic styles for the animated gradient button
himynameisdave
/ button-psudo.less
Last active
August 29, 2015 14:18
Basic styles plus the psudo element
himynameisdave
/ button-animated.less
Last active
March 7, 2019 21:12
Animated CSS Gradient Complete
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
| var juicer = { | |
| fruit: "oranges", | |
| amount: 5, | |
| juice: function(){ | |
| alert( "You have juiced " + this.amount +" "+ this.fruit ); | |
| } | |
| }; | |
| // Calling juicer.juice(): | |
| // -> "You have juiced 5 oranges" |
OlderNewer