Mall:Linjär-gradient/dok

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

Mallen behöver två obligatoriska parametrar, för riktning/startposition respektive färg. Båda är namnlösa och värdena anges direkt.

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

1. Riktning – Anger riktning för gradienten, t.ex. to right, to bottom, to left eller to top, eller en kombination, t.ex. to bottom right. Det finns alltså åtta möjliga riktningar för gradienten.
   
   Det går också bra att istället använda den äldre syntaxen med angivande av startposition. Motsvarande exempel blir då: left, top, right eller bottom, eller en kombination, t.ex. top left.
   
   (Alternativet med vinkelangivelse ska inte användas här, eftersom nya och äldre webbläsare kan tolka vinkeln åt motsatt håll.)
   
   
2. Färg – Minst två färger måste anges. 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 i artikeln HTML-färger.
   
   Stopp – Valfri. Man kan specificera en startposition för vardera färg med hjälp av procent (t.ex. #ffc0cb 45%) eller antal pixlar (t.ex. #ffc0cb 60px).

Exempel

• <div style="{{Linjär-gradient|to right|#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|to right|#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|to bottom|#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|to bottom|lightgreen, white 35%, white 65%, red}}">{{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="width:40%; {{Linjär-gradient|to top right|#eff 50%, #ddd 50%}}">{{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

• {{Radial-gradient}}
• {{Border-radius}}
• {{box-shadow}}