diedVIPs

html knowhow

Farbgraduierung gestalten













Farbgradierung

Das

So sieht´s aus
Linearer Verlauf - links oben nach rechts unten


Linearer Verlauf - rechts mit Übergängen nach rechts


Radialer Verlauf - innen mit Übergängen nach außen
Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
#grad1 {height: 150px;background-image: linear-gradient(to bottom right, green, yellow);font-size: 1.5em;color: white;text-align: center;padding-top:20px;}
#grad2 {height: 150px;background-image: linear-gradient(to right, blue, red);font-size: 1.5em;color: white;text-align: center;padding-top:20px;}
#grad3 {height: 150px;width:auto;background-image: radial-gradient(white, grey, green);font-size: 1.5em;color: white;text-align: center;padding-top:20px;}
</style>
<head>

<body >
<div id="grad1">Linearer Verlauf - links oben nach rechts unten</div><br/><br/>
<div id="grad2">Linearer Verlauf - rechts mit Übergängen nach rechts</div><br/><br/>
<div id="grad3">Radialer Verlauf - innen mit Übergängen nach außen</div>
</body>

</html>









Kontakt    Datenschutz   Impressum