Harsh

Compass extension for randomly generated CSS3 gradients with harsh color stops—like magical diamonds.

You can find a bunch of examples on my website

Installation

From the command line:

sudo gem install harsh

Installing into your project:

# Edit config.rb and add:
require "harsh"

# Import the extension into your sass or scss file
@import "harsh"

Please note that if you are using a GUI app like Compass.app or Codekit installing extensions may be done differently.

Arguments

# Mixin for backgrounds
@include harsh($color, $background, $transparency, $number-of-gradients, $angle, $nuance, $nuance-strength) 

# Mixin for text (only works in webkit)
@include harsh-text($color, $transparency, $number-of-gradients, $angle, $nuance, $nuance-strength, $background) 

color

The color of the gradients. Pass any color, a list of colors separated by spaces, or random for random colors.

background

Appends a color at the end of the gradients, pass false to omit.

transparency

Sets opacity of each gradient—use 0 for opaque, 1 for completely transparent.

number-of-gradients

Sets number of gradients. Passing a list of colors overrides.

angle

Sets angle of gradients. Pass random for random angles, start and stop points (25% 75%), degrees (45deg), or CSS keywords like top, right, or bottom left.

nuance

Boolean. When passing one color, saturates, desaturates, lightens, and darkens by a random amount.

nuance-strength

Sets maximum percent colors will be changed by nuance. 0 will result in no change.

100 will result in a large change.

Tips

To make this a full-page background, make sure to set the width and height of html and body to 100%:

html, body {
  height: 100%;
  width: 100%;
}

body {
  @include harsh();
  //background-attachment: fixed;
  //background-repeat: no-repeat;
}

Examples

.random
  @include harsh()

.background-color
  @include harsh(white, rgb(200,50,50), .95)

.bright
  @include harsh(random, white, .05)

.dull
  @include harsh($transparency: .95)

.specify-colors
  @include harsh(#FF0000 blue rgb(50,200,50))

.horizontal
  @include harsh($angle: top)

.angled
  @include harsh($angle: -32deg)

.nuance
  @include harsh(salmon, $nuance-strength: 50)