Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

CSS3 Cheat Sheet Cheat Sheet (DRAFT) by

CSS3 Cheat Sheet using non-prefixed attributes. For an easy-to-use method for prefixing for CSS3 for cross-browser support, visit http://prefixr.com

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Transi­tions & Transf­orm­ations

Effect
Properties
Example
transform
[trans­late] [trans­late3d‡] [scale] [scale3d‡] [rotate] [rotate3d‡] [skew] [persp­ective‡] [matrix] [matrix3d‡]
transform: rotate­(18­0deg) skew(1­20deg, 120deg) scale(­1.2);
transition
[property] [duration] [timin­g-f­unc­tion] [delay]
transi­tion: border­-color 0.5s ease, border­-radius 1s ease-i­n-out 0.2s, width 2s cubic-­bez­ier­(0.1, 0, 0.08, 1);
‡ Currently 3D transf­orm­ations are very poorly supported. However, if you have the approp­riate browser they are fun to play with.
  

Common Styling Enhanc­ements

Attribute
Syntax
border­-radius
[number†] / [number†]
text-s­hadow
[h-shadow†] [v-shadow†] [blur†] [color]
box-shadow
[h-shadow†][v-shadow†][blur†][color]
@font-face
@font-face { [font-­family] [src] }
backgr­oun­d-size
[size†] or [contain] or [cover]
opacity
[number 0 to 1]
† Accepts common measur­ements (px, pt, em, %, etc.)
  

Common Styling Examples

Example
border­-ra­dius: 5px 10px / 3px 4px; 1 border­-to­p-l­eft­-ra­dius: 5px;
text-s­hadow: -3px 3px 1px #8C8C8C, 0px 0px 15px red; 2
box-sh­adow: 0px 5px 25px #000000, 0px 0px 10px white 2
@font-face { font-f­amily: myFont; src: url('f­ont.otf'); }
backgr­oun­d-size: cover;
opacity: 0.6;
1 Each box corner can take 2 values to fine-tune curves. "­/" Separates these two values for shorthand
2 Multiple shadows are comma separated