46 besökare, 1 medlem och 3 Studenter är online nu
Loopia

CSS (Cascading Style Sheets)

Ö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:

Linjär övertoning i en box (div)

background:
linear-gradient(0deg,
rgba(255,255,255, 1),
rgba(100,151,100, 1));

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 200px;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
background: linear-gradient(0deg, rgba(255,255,255, 1), rgba(100,151,100, 1));
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

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:

Linjär övertoning i en box (div)

background: linear-gradient(180deg,
rgba(255,0,0,1.00),
rgba(255,153,0,1.00),
rgba(255,255,0,1.00),
rgba(0,255,0,1.00),
rgba(0,51,255,1.00));

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
background: linear-gradient(180deg,
rgba(255,0,0, 1.00),
rgba(255,153,0, 1.00),
rgba(255,255,0, 1.00),
rgba(0,255,0, 1.00),
rgba(0,51,255, 1.00));
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

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

Linjär övertoning i en box (div)

background: linear-gradient(180deg,
rgba(255,0,0,1.00) 0%,
rgba(255,0,0,1.00) 18%,
rgba(255,153,0,1.00) 22%,
rgba(255,153,0,1.00) 38%,
rgba(255,255,0,1.00) 42%,
rgba(255,255,0,1.00) 58%,
rgba(0,255,0,1.00) 62%,
rgba(0,255,0,1.00) 78%,
rgba(0,51,255,1.00) 82%,
rgba(0,51,255,1.00) 100%);

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
background: linear-gradient(180deg,
rgba(255,0,0, 1.00) 0%,
rgba(255,0,0, 1.00) 18%,
rgba(255,153,0, 1.00) 22%,
rgba(255,153,0, 1.00) 38%,
rgba(255,255,0, 1.00) 42%,
rgba(255,255,0, 1.00) 58%,
rgba(0,255,0, 1.00) 62%,
rgba(0,255,0, 1.00) 78%,
rgba(0,51,255, 1.00) 82%,
rgba(0,51,255, 1.00) 100%);
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 

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):

Radiell övertoning i en box (div)

background: radial-gradient(circle,
rgba(255,0,0,1.00),
rgba(255,153,0,1.00),
rgba(255,255,0,1.00),
rgba(0,255,0,1.00),
rgba(255,255,255,1.00));

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 200px;
margin: 10px;
padding: 20px;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
background: radial-gradient( circle,
rgba(255,0,0,1.00),
rgba(255,153,0,1.00),
rgba(255,255,0,1.00),
rgba(0,255,0,1.00),
rgba(255,255,255,1.00));

}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 

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):

Upprepad övertoning i en box

background:
repeating-linear-gradient(180deg,
rgba(255,255,255,1.00) 10%,
rgba(255,0,0,1.00) 20%);

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 200px;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
background: repeating-linear-gradient(180deg,
rgba(255,255,255,1.00) 10%,
rgba(255,0,0,1.00) 20%);

}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>