himynameisdave

/*  
      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

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.

License.

himynameisdave

Enlarge Images CSS3

Just a dumb little dead-simple photo enlarger thingy, done purely with CSS3/LESS.

A Pen by Dave Lunny on CodePen.

License.

himynameisdave

Christmas Grid

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( @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

//  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

<div class="button">
  Wow! Such :hover!
</div>

himynameisdave

.button {
  background-size: 100%;
  background-image: linear-gradient(#fff, #ccc);
  border-radius: 0.45rem;
  border: 1px solid #ddd;
  cursor: pointer;
  color: #333;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 300;

himynameisdave

.button {
  background-size: 100%;
  background-image: linear-gradient(#fff, #ccc);
  border-radius: 0.45rem;
  border: 1px solid #ddd;
  cursor: pointer;
  color: #333;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 300;

himynameisdave

var juicer = {
  fruit: "oranges",
  amount: 5,
  juice:  function(){
    alert( "You have juiced " + this.amount +" "+ this.fruit );
  }
};

//  Calling juicer.juice():
//  ->  "You have juiced 5 oranges"