Create rounded corners with border-radius
.ex-round { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
Box shadows
syntax: x y blur color // syntax: inset x y blur color (inner shadow)
.ex-shadow { -webkit-box-shadow: 4px 4px 5px #282b1f; -moz-box-shadow: 4px 4px 5px #282b1f; box-shadow: 4px 4px 5px #282b1f; }
Text Shadows
text
.ex-text-shadow {text-shadow: 0px -1px 3px #000;}
Gradients
text
.ex-gradient { background-color: #ff0492; /* fallback color */ background-image: -webkit-linear-gradient(top, #fff, #ff0492); background-image: -moz-linear-gradient(top, #fff, #ff0492); background-image: -ms-linear-gradient(top, #fff, #ff0492); }
Opacity/Transparency
text
.ex-opacity {opacity: 0.5;}
Transform
text
scale(val), rotate(val), skew(val,[val]), translate(val,[val])
.ex-transform { -webkit-transform:skew(335deg, 10deg); -moz-transform:skew(335deg, 10deg); transform:skew(335deg, 10deg); }
Transitions
(hover mouse over box)text
syntax: css-property duration timing-function.ex-transition { -webkit-transition:transform 0.5s ease-in-out; -moz-transition:transform 0.5s ease-in-out; transition:transform 0.5s ease-in-out; } .ex-transition:hover { -webkit-transform:scale(8) translate(50px, 0); -moz-transform:scale(8) translate(50px, 0); transform:scale(8) translate(50px, 0); }