Sjabloon:Radial-gradient

Uit Apowiki
Versie door ap>Pastacht op 1 mei 2017 om 19:46 (Nieuwe pagina aangemaakt met '<includeonly>background-image: -moz-radial-gradient({{{1|}}}, {{{2|}}}, {{{3|}}}); background-image: -o-radial-gradient({{{1|}}}, {{{2|}}}, {{{3|}}}); background-image...')
(wijz) ← Oudere versie | Huidige versie (wijz) | Nieuwere versie → (wijz)

Use within a CSS style tag. The template uses the background-image property.

<div style="{{radial-gradient | position | shape [size] | #color [stop], #color [stop][, #color [stop], ...] }}">Lorem ipsum...</div>

  • position – Mandatrory. Specify the X and Y position of the center of the gradient. This can be any valid CSS position value.
  • shape – Mandatory. Specify the shape of the gradient using keywords or CSS size values. Valid keywords are:
  • ellipse
  • circle
  • size – Optional. Specify the size of the radial using keywords or CSS size values.note 1 Valid keywords are:
  • farthest-corner; Extends the radial to the farthest element corner, ensuring the gradient covers the entire element. This is the default.
  • closest-corner; Extends the radial to the closest corner.
  • farthest-side; Extends the radial to the farthest edge.
  • closest-side; Extends the radial to the closest edge, ensuring the gradient does not extend beyond the element's borders.
  • color – The first two colors are mandatory. You can define any number of additional colors, separated with commas.
  • stop – Optional. You can specify a stop position for each color using a percentage (e.g. 45%) or pixels (e.g. 60px).