Pre-processor Example

WDV205 Advanced CSS

SCSS Example using a mixin and a main.scss

The SCSS code for the Mixin looks like:

@mixin verticalGradient($topColor, $bottomColor){
background: $topColor; /* For browsers that do not support gradients */
background: -webkit-linear-gradient($topColor, $bottomColor); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient($topColor, $bottomColor); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient($topColor, $bottomColor); /* For Firefox 3.6 to 15 */
background: linear-gradient($topColor, $bottomColor); /* Standard syntax (must be last) */
}

SCSS Link

CSS3 Examples

Text-shadow effect!

Hover Over Box!