Mall:Box-shadow

Dokumentation

Användning

Med den här mallen kan man lägga till skuggor. Den använder CSS-koden box-shadow och inkluderar prefix för att utöka stödet till fler webbläsare, vilket inkluderar Opera, Firefox, Safari, Chrome och Internet Explorer.

Den används som CSS-kod i style-attributet. Parametrar är valfritt att ange.

Namnlösa parametrar

Mallen har fyra namnlösa parametrar:

<div style="{{box-shadow | X-offset | Y-offset | blur radius | color}}">Lorem ipsum...</div>

X-offset – Högerförskjutning av skuggan. Negativa värden ger vänsterförskjutning. Default är 4px.
Y-offset – Förskjutning nedåt av skuggan. Negativa värden ger förskjutning uppåt. Default är 4px.
blur radius – Utspridning av skuggan. Högre värden ger ljusare och större skugga. Minsta värdet är 0, som ger en skarp skuggkant. Default är 4px.
color – Skuggans färg. Default är #ccc.

Exempel

<div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{box-shadow}}">Lorem ipsum...</div> ger en box med default-skugga:

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="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{box-shadow|4px|4px|8px|#A0A080}}">Lorem ipsum...</div> ger en mer uttalad och färgad skugga:

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.

Parametern "d"

Istället för ovanstående syntax, kan man använda sig av parametern d= för att definiera allt i en enda mallparameter.
I grunden fungerar det som ovan, men att värdena för en skugga separeras med mellanslag.

Exempel: {{box-shadow|d=4px 4px 8px #A0A080}}

En fördel med detta är att samma element då kan ges flera skuggor, separerade med kommatecken. Det medger även ytterligare parametrar som finns tillgängliga för CSS-koden box-shadow.

Se även

Externa länkar

Box-shadow – en sida med mer info om funktion och kompatibilitet, på Mozilla Developer Network.

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