Backgrounds

In this module you can find standard mixins for prefix-free linear-gradient, radial-gradient, background properties as background-size, background-origin etc. and mixin for multiple background containing gradients.

File

lightingfly/modules/_backgrounds.scss

Links

Specification for CSS 3 background properties: w3.org
Learn to CSS 3 backgrounds: w3schools.com

linear-gradient

Mixin for prefix-free using of linear gradient background

Mixin

@mixin linear-gradient($direction, $colors...)

Arguments

$direction:
[to bottom, to right, to top right, 45deg, ...]
- direction of linear gradient defined by word or with degrees.
$colors:
[#000, #999, #000 25%, rgba(0,0,0,0.5) ...]
- comma-separated list of colors for linear gradient

Usage example

Demo

Elements with various linear gradient backgrounds.

span Linear gradient to bottom

Linear gradient to right

Linear gradient to top right with color stops

Linear gradient with defined angle

radial-gradient

Mixin for prefix-free using of radial gradient background

Mixin

@mixin radial-gradient($sizeShapePos, $colors...)

Arguments

$sizeShapePos:
[circle, 50px 20px ellipse, circle at left, ...]
- definition of radial gradient type (check specification)
$colors:
[#000, #999, #000 25%, rgba(0,0,0,0.5) ...]
- comma-separated list of colors for radial gradient

Usage example

Demo

Elements with various radial gradient backgrounds.

Simple radial gradient

Simple ellipse radial gradient

Radial gradient with color stops

Radial gradient at right

Radial gradient with implicit size

background-color

Mixin for using transparent backgrounds with fallbacks.

Mixin

@mixin background-color($oldcolor, $color)

Arguments

$oldcolor:
[blue, #00f, ...]
- fallback color for old browsers.
$color:
[rgba(0,0,0,0.5) ...]
- transparent background color.

Usage example

Demo

Element with transparent background color and fallback.

Transparent background

background-image

Mixin for prefix-free using of multiple background images containing gradients. To generate gradients use _linear-gradient() or _radial-gradient() functions. Syntax is same as for linear-gradient and radial-gradient mixins.

Mixin

@mixin background-image($images...)

Arguments

$images...:
[_linear-gradient(to top, white, black), _radial-gradient(circle, white, black), url(image.png).]
- comma-separated list of images

Usage example

Demo

Elements with various multiple backgrounds.
Other mixins used in demo: background-size

Linear gradient and image

Carbon pattern by Atle Mo, Sébastien Grosjean

Carbon fibre pattern by Atle Mo, Lea Verou

background-size

Mixin for prefix-free using of background-size property.

Mixin

@mixin background-size($arguments...)

Arguments

$arguments...:
[20px, 50%, cover, contain]
- size of background images

Usage example

Demo

Elements with various background sizes.

100px

75%

cover

contain

background-clip

Mixin for prefix-free using of background-clip property.

Mixin

@mixin background-clip($arguments...)

Arguments

$arguments...:
[border-box, padding-box, content-box]
- clip of background images

Usage example

Demo

All elements have 10px semitransparent orange border, 10px padding and turquoise background but different background clips.

Border box

Padding box

Content box

background-origin

Mixin for prefix-free using of background-origin property.

Mixin

@mixin background-origin($arguments...)

Arguments

$arguments...:
[border-box, padding-box, content-box]
- origin of background images

Usage example

Demo

All elements have 10px semitransparent turquoise border and 10px padding but different background origins.

Border box

Padding box

Content box

_linear-gradient

Function to generate linear gradient for background image property with all prefixes.

Function

_linear-gradient($direction, $colors...)

Arguments

$direction:
[to bottom, to right, to top right, 45deg, ...]
- direction of linear gradient defined by word or with degrees.
$colors:
[#000, #999, #000 25%, rgba(0,0,0,0.5) ...]
- comma-separated list of colors for linear gradient

Usage example

Demo

Element with linear gradient background.

Linear gradient

_radial-gradient

Function to generate radial gradient for background image property with all prefixes.

Function

_radial-gradient($sizeShapePos, $colors...)

Arguments

$sizeShapePos:
[circle, 50px 20px ellipse, circle at left, ...]
- definition of radial gradient type (check specification)
$colors:
[#000, #999, #000 25%, rgba(0,0,0,0.5) ...]
- comma-separated list of colors for radial gradient

Usage example

Demo

Element with radial gradient background.

Radial gradient