Sjabloon:Linear-gradient

Uit Theowiki
Versie door th>Pastacht op 19 mrt 2017 om 10:10 (Nieuwe pagina aangemaakt met '<includeonly>background-image: -moz-linear-gradient({{{1|}}}, {{{2|}}}); background-image: -o-linear-gradient({{{1|}}}, {{{2|}}}); background-image: -webkit-linear-gra...')
(wijz) ← Oudere versie | Huidige versie (wijz) | Nieuwere versie → (wijz)

Gebruik, komt niet in tekst:
Use within a CSS style tag. The template uses the background-image property.

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

  • start position – Mandatrory. Specify a start point: left, top, right or bottom, or a combination of two of each, e.g. top left. This provides eight starting points.
  • 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).

Technical notes The template does not assign a default background-color, and therefor does not provide an automatic fallback for browsers that do not support gradients. To provide a fallback, always specify a background color in front of the template.

This template uses the new CSS3 properties for linear gradients: -moz-linear-gradient, -o-linear-gradient, -webkit-linear-gradient and linear-gradient It does not use the legacy -webkit-gradient property due to its deviating parameter format. This means that this template does not work in Safari versions below 5.1 and Google Chrome versions below 10.