Topics

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

Left Double Quote

$ldquo;

Second to last

$('bodyquote p').eq(-2)

Fontface

Media for Mobile

@media (max-width: 480px) {
  body{
  background-image: url('smartphone-background.jpg');
  }
}

@media (max-width: 767px) {
  body{
  background-image: url('tablet-background.jpg');
  }
}

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Canceling out Css

Height:auto;

shadows

-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;

box radius -moz-border-radius:10px; border-radius:10px; -webkit-border-radius:10px;

transition

-moz-transition-duration:.1s;
-webkit-transition-duration:.1s;
transition-duration:.1s;
-moz-transition-timing-function:ease-in;
transition-timing-function:ease-in;
-webkit-transition-timing-function:ease-in;

overflow

hidden
scroll
auto

transitions

-moz-transition-duration:.1s;
-webkit-transition-duration:.1s;
transition-duration:.1s;
-moz-transition-timing-function:ease-in;
transition-timing-function:ease-in;
-webkit-transition-timing-function:ease-in;

Hyphenation

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

Button Ingredients

box shadow
border radius
transition
cursor

Organizing CSS

seperate js tags from style tags
element_wrap
element_js
put js elements in span tags

Gradients

-webkit-gradient(linear, left top, right bottom, from(#F4F4F0), to(#F0F0E8));

Font tag

P { font:400 14px/20px helvetica,arial,sans-serif} // 400 weight, 20px line height

Css

3px dashed #C2C8CD

opacity

filter: alpha(opacity=90); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; opacity: .9;

Button from Vimeo

background: #54bbfc; background: -moz-linear-gradient(top,#54bbfc 0%,#3ea4e5 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#54bbfc),color-stop(100%,#3ea4e5)); background: -webkit-linear-gradient(top,#54bbfc 0%,#3ea4e5 100%); background: -o-linear-gradient(top,#54bbfc 0%,#3ea4e5 100%); background: -ms-linear-gradient(top,#54bbfc 0%,#3ea4e5 100%); background: linear-gradient(top,#54bbfc 0%,#3ea4e5 100%); border: 2px solid #427A97;

color: #fff; padding: 6px 12px; font-size: 20px; font-weight: 400; text-shadow: 0 -1px 0 rgba(0,0,0,.4); -moz-border-radius: 6px; -webkit-border-radius: 6px;

border-radius: 6px;

Home