Mall:Linjär-gradient

Dokumentation

Användning

Mallen skapar en gradient bakgrund. Funktionen fungerar i följande webbläsare: Firefox (3.6 och senare), Opera (11.10 och senare), Safari (5.1 och senare), Google Chrome (10 och senare) och Internet Explorer (10 och senare).

Mallen kan enbart användas som en CSS-tagg (style="{{Linjär-gradient}}")

Parametrar

style="{{Linjär-gradient | startposition | #färg [stopp], #färg [stopp], #färg [stopp], ...}}"

startposition – Obrigatorisk. Specificera startpunkt för gradienten: left, top, right eller bottom, eller en kombination, t.ex. top left. Detta gör att man kan starta gradienten från åtta olika startpunkter.
färg – De första två färger är obligatoriska. Färgerna separeras med ett kommatecken. Färger kan anges som hexadecimalnummer (t.ex. #FFC0CB) eller namn på webbfärg (t.ex. pink, red, green, blue). Lista över exempel på färger finns under artikeln HTML-färger.
stopp – Valfri. Man kan specificera en startposition för vardera färg med hjälp av procent (t.ex. 45%) eller antal pixlar (t.ex. 60px).

Exempel

<div style="{{Linjär-gradient|left|#ffdddd, #ddddff}}">{{Lorem ipsum}}</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="{{Linjär-gradient|left|#ffdddd, #ddffdd 50%, #ddddff}}">{{Lorem ipsum}}</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="{{Linjär-gradient|top|#ffdddd, #ddddff}}">{{Lorem ipsum}}</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="{{Linjär-gradient|top|lightgreen, skyblue}}">{{Lorem ipsum}}</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Omdirigeringar

{{Linear-gradient}}

Se även

{{Border-radius}}

Ovanstående dokumentation transkluderas från sidan "Mall:Linjär-gradient/dok". Kategorier ska placeras på denna dokumentationssida.