Mall:Radial-gradient
[visa] [redigera] [rensa sidcachen]
Dokumentation
Den här mallen ger bakgrundsfärg med radiell gradient. Den använder prefix som ger stöd för CSS-koden radial-gradient även i ett antal äldre webbläsare av olika slag, vilket inkluderar Firefox (3.6 och senare), Opera (12.0 och senare), Safari (5.1 och senare), Google Chrome (10 och senare) samt Internet Explorer (10 och senare).
Användning redigera
Används som CSS-kod i style-attributet.
<div style="{{radial-gradient | startposition | form [storlek] | #färg [stopp], #färg [stopp], #färg [stopp], ...}}">Lorem ipsum...</div>
Parametrar redigera
Alla parametrar är namnlösa.
| Parameterplats | Funktion | Typ | Beskrivning | |
|---|---|---|---|---|
| 1 | Startposition |
Obligatorisk | Ange centrum för gradienten i X- och Y-led, med valfria CSS-värden för position. | |
| 2 | a | Form |
Obligatorisk | Ange gradientens form med bestämningdord (keywords) eller storleksvärde. Giltiga ord är:
|
| b | Storlek |
Valfri | Bestämmer färggradientens storlek, eller utbredning, med bestämningsord eller CSS-storleksvärde.a Giltiga ord är:
| |
| 3 | a | Färg |
De två första färgerna är obligatoriska. | Man kan definiera valfritt antal färger, separerade med kommatecken. |
| b | Stopp |
Valfri | Man kan ange stopposition för varje färg, med procenttal (t.ex. 45%) eller pixlar (t.ex. 60px). | |
^a : Firefox stöder inte sådant storleksvärde än, endast bestämningsord.
Exempel redigera
<div style="{{radial-gradient|100px center|ellipse|#ffdddd, #ddddff}}">Lorem ipsum...</div>ger:
<div style="{{radial-gradient|center|ellipse closest-side|#ffdddd, #ddffdd 50%, #ddddff}}">Lorem ipsum...</div>ger:
<div style="{{radial-gradient|top|circle|#ffdddd, #ddddff}}">Lorem ipsum...</div>ger:
Anmärkningar redigera
Ovanstående exempel använder kontrasterande färger för att visa effekten tydligare. Det bästa är dock att hålla sig till diskreta färgskiftningar. Det minskar också skillnaden mellan webbläsare som stöder respektive inte stöder färggradienter.
Man bör även ange en bakgrundsfärg som alternativ för de webbläsare som inte kan hantera gradienter. Det görs genom att ange en bakgrundsfärg före denna mall.
Mallen använder dessa CSS3-koder för gradienter: -moz-radial-gradient, -o-radial-gradient, -webkit-radial-gradient och radial-gradient.
Kompatibilitet redigera
- Sidan radial-gradient på Mozilla Developer Network har bl.a. information kring webbläsarkompatibilitet.
Se även redigera
{{Linjär-gradient}}{{border-radius}}{{box-shadow}}