• Box Shadows
• Browser Hacks

Transition

<style>
    -webkit-transition:width .2s linear;
    -moz-transition:width .2s linear;
    -o-transition:width .2s linear; 
    transition:width .2s linear;
</style>

Box Sizing

<style>
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
</style>

Box Shadow

<style>
  -moz-box-shadow: inset 2px 0 4px #000;
  -webkit-box-shadow: inset 2px 0 4px #000;
  box-shadow: inset 2px 0 4px #000;
</style>

Radius

<style>  
  -webkit-border-radius: 4px 3px 6px 10px;
  -moz-border-radius: 4px 3px 6px 10px;
  -o-border-radius: 4px 3px 6px 10px;
  border-radius: 4px 3px 6px 10px;
</style>

Clearfix

<style>
    .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }  
    .clearfix { display: inline-block; }  
    html[xmlns] .clearfix { display: block; }  
    * html .clearfix { height: 1%; }  
</style>

Top Shadow

<style>
  body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
  }
</style>

Text Selection

<style>
  ::selection { background: #e2eae2; }
  ::-moz-selection { background: #e2eae2; }
  ::-webkit-selection { background: #e2eae2; }
</style>

Text Shadows

<style>
  .emboss {
    text-shadow: 0 -4px 3px rgba(255, 255, 255, 0.3), 0 3px 4px rgba(0, 0, 0, 0.2);
    color: #d7dee1;
  }
  .deboss {
    text-shadow: 0 2px 3px rgba(255, 255, 255, 0.3), 0 -1px 2px rgba(0, 0, 0, 0.2);
    color: #d7dee1;
  }
  .retro {
    text-shadow: 1px 1px 0 rgb(223, 227, 229), 4px 4px 0 rgba(0, 0, 0, 0.25);
    color: #3f3f3f;
  }
</style>

Gradient

<style>
  background: #629721;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
  background-image: -webkit-linear-gradient(top, #83b842, #629721);
  background-image: -moz-linear-gradient(top, #83b842, #629721);
  background-image: -ms-linear-gradient(top, #83b842, #629721);
  background-image: -o-linear-gradient(top, #83b842, #629721);
  background-image: linear-gradient(top, #83b842, #629721);
</style>

Full Screen

<style>
  html { 
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
</style>

Background Noise

<style>
body {
  background-image: url(data:image/png;base64,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);
  background-color: #0094d0;
}
</style>

Border Image

<style>
.bi {
    border: 45px solid transparent;
    -webkit-border-image: url(http://sitepoint-examples.s3.amazonaws.com/css3-border-image/bg-pawprints-all.jpg) 45 round;
    -moz-border-image: url(http://sitepoint-examples.s3.amazonaws.com/css3-border-image/bg-pawprints-all.jpg) 45 round;
    border-image: url(http://sitepoint-examples.s3.amazonaws.com/css3-border-image/bg-pawprints-all.jpg) 45 round;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    width: 500px;
    margin: 30px auto 30px auto;
    overflow: hidden;
    resize: both;
}
</style>

Background Syntax

<style>
body {
	background: [background-color] [background-image] 
  						[background-repeat]
            	[background-attachment] [background-position] / [ background-size]
            	[background-origin] [background-clip];
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}
</style>

Vertical Align

<style>
.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
</style>

Drop Cap

<style>
  p:first-letter{
    display: block;
    margin: 5px 0 0 5px;
    float: left;
    color: #ff3366;
    font-size: 5.4em;
    font-family: Georgia, Times New Roman, serif;
  }
</style>

Blockquote

<style>
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: .5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: .1em;
  margin-right: .25em;
  vertical-align: -.4em;
}
blockquote p {
	display: inline;
}
</style>

Disable Webkit Highlights

<style>
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>

Responsiveness

<style>
/*
  FLUIDITY v0.1.0
  @mrmrs - http://mrmrs.cc
  MIT
*/
/*
  Responsive Utilities
*/
img, canvas, iframe, video, svg, select, textarea {
  max-width: 100%; 
}
.overflow-container {
  overflow-y: scroll; 
}
.aspect-ratio {
  height: 0;
  padding-top: 56.25%;
  position: relative; 
}
.aspect-ratio--object {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100; 
}
</style>

Media

<style>  
  /* Smartphones (portrait and landscape) ----------- */
  @media only screen
  and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
  }
   
  /* Smartphones (landscape) ----------- */
  @media only screen and (min-width : 321px) {
    /* Styles */
  }
   
  /* Smartphones (portrait) ----------- */
  @media only screen and (max-width : 320px) {
    /* Styles */
  }
   
  /* iPads (portrait and landscape) ----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
  }
   
  /* iPads (landscape) ----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
  }
   
  /* iPads (portrait) ----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
  }
   
  /* Desktops and laptops ----------- */
  @media only screen and (min-width : 1224px) {
    /* Styles */
  }
   
  /* Large screens ----------- */
  @media only screen and (min-width : 1824px) {
    /* Styles */
  }
   
  /* iPhone 4 ----------- */
  @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
    /* Styles */
  }
  
  /* show link content */
  @media print   {  
    a:after {  
	    content: " [" attr(href) "] ";  
    }  
  }
</style>