Mall:Gradient

Dokumentation

Den här mallen skapar en gradient-bakgrund. Den fungerar för närvarande i Firefox (3.6 och senare), Opera (11.10 och senare), Safari (4.0 och senare), Google Chrome och Internet Explorer 10. I andra webbläsare visas startfärgen som bakgrundsfärg.

Användning

Mallen används inom CSS-taggar. Mallen använder egenskaperna background-color och background-image, så placera mallen efter de andra background-egenskaperna.

Tänk på att nedanstående exempel använder färger med hög kontrast för att visa effekten tydligare. Det är bäst att använda subtila färgskillnader för att förbättra utseendet, snarare än att radikalt förändra det. Subtila färgskillnader minskar också effekten på webbläsare som inte stöder gradienter.

Parametrar

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

start color - Obligatorisk. Startfärgen i gradienten i CSS-format.
end color - Obligatorisk. Slutfärgen i gradienten i CSS-format.
orientation - Frivillig. horizontal (standard) eller vertical, eller specificera startpunkt: left, top, right eller bottom.
stop color - Frivillig. Mellanfärg mellan start- och slutfärg.
stop position - Frivillig. Slutfärgens position, mellan 0% och 100%. Standard är 50%.

Parametrarna måste placeras på sin fasta plats.

Exempel

<div style="{{gradient|#ffdddd|#ddddff|horizontal}}">Lorem ipsum...</div> ger

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="{{gradient|#ffdddd|#ddddff|horizontal|#ddffdd|50%}}">Lorem ipsum...</div> ger

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="{{gradient|#ffdddd|#ddddff|vertical}}">Lorem ipsum...</div> ger

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.

Se även

{{border-radius}}

Ovanstående dokumentation transkluderas från sidan ”Mall:Gradient/dok”. Kategorier ska placeras på den dokumentationssidan.