Tuesday, March 18, 2014

CSS Gradients

Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Notation of CSS gradients in browsers was changed several times. We hope that today's notation for CSS Gradients already remains unchanged. On the other hand, the signature of CSS Gradient methods are from the perspective of a programmer terrible.

The gradient method is defined as the value of the background-image.


We can use:
  • Linear gradients
  • Radial gradients
  • Repeating Gradients


You can look at support of CSS Gradients in your browser:


Linear Gradient



/**
* Draw linear gradient
* @param {String=} direction - (“to ” + ( top | right | bottom | left ) | number + ( ‘deg’ | ‘rad’ ))
* @param {...String} color - color | color + stop-color
*/
linear-gradient( direction, color_1, color_2, color_n)


Stop-color is the border, where the previous color ends and the new color begins.



Direction
  • top: 0
  • right: 90deg
  • bottom: 180deg
  • left: 270deg


Radial gradient


/**
* Draw radial gradient
* @param {String=} shape_direction - (ellipse | circle) | (ellipse | circle) + ‘at ’ + ( top | right | bottom | left )
* @param {...String} color - color | color + stop-color
*/
radial-gradient( shape_direction, color_1, color_2, color_n)




Repeating Gradient



  • repeating-linear-gradient
  • repeating-radial-gradient




The size of the gradient is determined by the final stop-color.


Reference