CSS (Cascading Style Sheets)

 skriv ut »

Övertoning (gradient)

Övertoning (gradient) ger en mjuk övergång mellan två eller flera färger. Du kan använda två typer av övertoningar, linear-gradient (linjär övertoning) och radial-gradient (radiell övertoning).

Dessutom kan du ange att övertoningen ska upprepas enligt ett angivet intervall genom att använda repeating-linear-gradient och repeating-radial-gradient

Linjär övertoning

Den linjära övertoningen ger en övergång mellan två färger. Parametrar som kan anges är direction (riktning), color1 (färgvärde 1), color2 (färgvärde2) osv. Du kan ange flera färger än två.

Riktningen på övertoningen kan anges som top, bottom, left, right. Du kan även ange riktningen i grader, tex 180deg

Exempel på parametrar:

linear-gradient(top, rgba(255,255,255, 1), rgba(0,0,255, 1) );

I exemplet ovan anges en vertikal övertoning (to-top) från Vitt till Rött. Färgen anges som RGBa ( läs mer om RGBa här » ) men du kan använda hexadecimala värden istället: linear-gradient(top, #fff, #ff5 );

Exemplet nedan använder linear-gradient på en Box (DIV) från Grönt till Vitt:

Klicka här för att se fler exempel  

CSS-koden:

HTML-koden:

Flera färgsteg i övertoningen

Du kan använda flera färger genom att ange färgsteg i övertoningen. Start och stopp kan anges procentuellt som en del av längden av den totala övertoningen.

Exemplet nedan använder linear-gradient i flera färgsteg utan angivna start och stopp:

Klicka här för att se fler exempel  

CSS-koden:

HTML-koden:

 Exemplet nedan använder linear-gradient i flera färgsteg med angivna start och stopp:

Klicka här för att se fler exempel  

CSS-koden:

HTML-koden:

Radiell övertoning

Den radiella övertoningen ger en övergång mellan två eller flera färger. Parametrar som kan anges är shape (form), color1 (färgvärde 1), color2 (färgvärde2) osv. Du kan ange flera färger än två.

Formerna som kan anges är circle eller ellipse och du kan ange var övertoningens centrumpunkt ska starta. Positionen på övertoningens centrum-punkt kan anges som ett X- och Y-värde för horisontell och vertikal position. Ange positionen procentuellt eller med ett värde i pixlar.

Storleken på övertoningen kan anges genom att ange var den ska sluta. Ange om ytterkanten ska sluta vid en sida eller ett hörn. Värden som kan anges för storlek är: closest-side, farthest-side, closest-corner och farthest-corner.

Exempel på parametrar:

radial-gradient(60px 80%, circle closest side, rgba(255,255,255, 1), rgba(0,0,255, 1) );

I exemplet ovan anges en cirkelformad övertoning från Vitt till Rött. Positionen är 60 pixlar horisontellt och 80% vertikalt. Övertoningens ytterkant slutar vid den närmaste sidan.

Färgen anges som RGBa ( läs mer om RGBa här » ) men du kan använda hexadecimala värden istället: linear-gradient(180deg, #fff, #ff5 );

Exemplet nedan använder radial-gradient på en Box (DIV):

Klicka här för att se fler exempel  

CSS-koden:

HTML-koden:

Upprepade övertoningar

Du kan upprepa en övertoning genom att använda repeating-linear-gradient och repeating-radial-gradient som automatiskt upprepar färgstegen i båda riktningarna.

Exemplet nedan använder repeating-linear-gradient på en Box (DIV):

Klicka här för att se fler exempel  

CSS-koden:

HTML-koden: