Mall:Linjär-gradient/dok
Utseende
Det här är en dokumentationssida till Mall:Linjär-gradient. Den innehåller användningsinformation, kategorier och annat innehåll som inte är en del av mallen. |
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
ellerbottom
, 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}}