Sjabloon:Radial-gradient

Uit Apowiki
Versie door Pastoor (overleg | bijdragen) op 2 feb 2023 om 12:51 (1 versie geïmporteerd)
(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).