Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

coole Design-CSS-Box mit animierten Farbverlauf für Schlagschatten

Greifen wir tiefer in die CSS-Trickkiste und erzeugen eine Box mit umherwandernden animierten Farbverlauf als Schlagschatten.

CSS-Box mit Schlagschatten und animierter Farbverlauf
CSS-Box mit Schlagschatten und animierter Farbverlauf

Für unseren animierten Farbverlauf greifen wir in die CSS-Trickkiste und verwenden neben den üblichen CSS-Anweisungen auch:

  • :before / :after
  • calc()
  • animation

Das Video zum Tutorial:

Vorbereitung HTML-Bereich

Für unser Farbverlaufstrick benötigen wir in HTML nur ein DIV-Element, dem wir eine Klasse mit dem Namen „schattenmitfarbverlauf“ mitgeben:

<body>
<div class="schattenmitfarbverlauf">
    <p><b>CSS-Trickkiste:</b><br>
    Bereich mit Schlagschatten und umwanderndem Farbverlauf</p>
</div>
</body>

Das war es auch schon im HTML-Bereich.

CSS für animierten Farbverlauf

In CSS werden wir die grundlegenden Einstellungen nun machen. Farben wirken auf schwarzen Hintergrund erst richtig gut – daher stellen wir für unseren Webseite die Hintergrundfarbe auf Schwarz.

body {
    background-color: black;
    font-family: sans-serif;
}

Unsere Box bekommt nun ihr Größe zugeteilt, ihre mittige Position und einen Farbverlauf:

.schattenmitfarbverlauf {
    width: 420px; /* relativ ist auch möglich mit z.B. 60% */
    height: 220px;
    margin: 100px auto;
    background: linear-gradient(0deg, #000, #333);
    position: relative;
}

Farbverlauf erstellen

Nun wollen wir unseren Farbverlauf erstellen. Dazu setzen wir die Pseudoklasse „:before“ ein.

.schattenmitfarbverlauf:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: yellow;
}

Das bisherige Aussehen:

Bereich für Box festlegen
Bereich für Box festlegen

Unseren Farbverlauf erzeugen wir, indem wir der CSS3-Anweisung „linear-gradient“ die entsprechenden Werte mitgeben. Dazu ist es das einfachste, einmal um den Farbkreis zu gehen.

Zur Erinnerung – unser Farbkreis (siehe https://www.html-seminar.de/css3-farbmodell-hsl.htm) können wir über das Farbschema „hsl“ ansprechen. Mit dem ersten Wert wandern wir im Uhrzeigersinn und Gradangaben um den Kreis. Somit wären dann die Farben „rot, orange, gelb, grün, blau, indigo und violett in hsl:

background: linear-gradient(45deg, hsl(0, 100%, 50%), 
   hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), 
   hsl(240, 100%, 50%), hsl(300, 100%, 50%));

Was uns einen Farbverlauf über die komplette Farbenkreis erzeugt.

Farbverlauf über hsl-Farbschema erstellen
Farbverlauf über hsl-Farbschema erstellen

Wer es kürzer mag, kann auch einfach die Farben mit den englischen Farbnamen angeben. Wichtig ist einfach, dass die Zusammenstellung gefällt.

background: linear-gradient(45deg, red, orange, yellow, 
   green, blue, indigo, violet);

Wir wollen die Farben nur am Rand sehen – daher schieben wir diese in den Hintergrund über den z-index: -1;.

Somit ist nichts mehr von unseren Farbverlauf zu sehen – wobei wir diesen ja nur an den Rändern wollen. Unser bisheriger CSS-Code:

.schattenmitfarbverlauf:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: linear-gradient(45deg, red, orange, yellow, 
       green, blue, indigo, violet);
    z-index: -1;
}

Um diesen nur an den Rändern zu sehen, müssen wir unseren :before-Bereich größer machen. Jetzt könnte man auf die Idee kommen, der Breite und Höhe einfach 4 Pixel dazu zu geben. Wir haben ja die Breite des Elements .schattenmitfarbverlauf mit 420 Pixel und die Höhe mit 220 Pixel definiert. Würde funktionieren, macht aber keinen Spaß, wenn sich die Größe des Elternelements ändern. Daher lassen wir von CSS einfach selber die Breite und Höhe berechnen über calc(100% + 4px);.

.schattenmitfarbverlauf:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
    /* height: 100%; */  
    background: linear-gradient(45deg, red, orange, yellow, 
       green, blue, indigo, violet);
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);  
}

Somit haben wir unseren Rand – wenigstens schon mal zum Teil:

der sogenannte Teilrand
der sogenannte Teilrand

Um diesen auch oben und links zu sehen, arbeiten wir mit negativen Angaben bei top und left:

.schattenmitfarbverlauf:before {
    content: "";
    position: absolute;
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* height: 100%; */  
    background: linear-gradient(45deg, red, orange, yellow, 
       green, blue, indigo, violet);
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);  
    top: -2px;
    left: -2px;
}

Und nun haben wir den kompletten Rand.

Rand mit erstelltem Farbverlauf
Rand mit erstelltem Farbverlauf

Für das Verständnis werden wir nun den inneren Bereich leicht durchsichtig machen (am Ende wird dieser wieder dunkel):

.schattenmitfarbverlauf {
    width: 420px; /* relativ ist auch möglich mit z.B. 60% */
    height: 220px;
    margin: 50px auto;
    /* background: linear-gradient(0deg, #000, #333); */
    background-color: hsla(0, 0%, 0%, 0.7);
    position: relative;
}

Was dann folgendes Aussehen ergibt:

innerer Bereich durchsichtig
innerer Bereich durchsichtig

Um unseren Farbverlauf animieren zu können, muss dieser als Hintergrund deutlich größer sein als der Bereich. Also erhöhen wir diesen über background-size: 500%;

.schattenmitfarbverlauf:before {
    content: "";
    position: absolute;
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* height: 100%; */  
    background: linear-gradient(45deg, red, orange, yellow, 
       green, blue, indigo, violet);
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);  
    top: -2px;
    left: -2px;
    background-size: 500%;
}

Somit wird nur noch der Farbverlauf von Rot nach Gelb sichtbar:

Farbverlauf nur von Rot nach Gelb sichtbar
Farbverlauf nur von Rot nach Gelb sichtbar

Animation des Farbverlaufs erstellen über animation:

Und nun können wir unsere Animation des Farbverlaufs erstellen. Dazu verwenden wir @keyframes. Die Animation wir um Bereich .schattenmitfarbverlauf:before aufgerufen:

.schattenmitfarbverlauf:before {
    content: "";
    position: absolute;
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* height: 100%; */  
    background: linear-gradient(45deg, red, orange, yellow, 
       green, blue, indigo, violet);
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);  
    top: -2px;
    left: -2px;
    background-size: 500%;
    animation: wandernderFarbverlauf 30s linear infinite;
}

Und wir benötigen dann die Animation, in der wir die Hintergrundposition verändern:

@keyframes wandernderFarbverlauf {
    0%   { background-position: 0 0 }
    50%  { background-position: 500% 0 }
    100% { background-position: 0 0 }
}

Und schon wandern die Farben in unserem Rand (und auch im Hintergrund). Je nachdem wie schnell wir es haben wollen, kann man an der Zeit (gerade sind 30 Sekunden eingestellt) drehen.

Jetzt fehlt noch der verwischte Farbverlauf im Hintergrund. Diesen erzielen wir über ein neues Element .schattenmitfarbverlauf:after und den filter: blur(25px);. Dieser Filter steht zwar in alten Browserversionen nicht zur Verfügung, aber für aktuelle Browser ist es kein Problem.

.schattenmitfarbverlauf:after {
    filter: blur(25px);
} 

Unser Bereich .schattenmitfarbverlauf:after soll auch alle Eigenschaften haben wie das :before. Also erweitern wir den Aufruf von :before

Unser kompletter CSS-Code:

body {
    background-color: black;
    font-family: sans-serif;
}

.schattenmitfarbverlauf {
    width: 420px; /* relativ ist auch möglich mit z.B. 60% */
    height: 220px;
    margin: 50px auto;
    background: linear-gradient(0deg, #000, #333);
    position: relative;
}

.schattenmitfarbverlauf:before,
.schattenmitfarbverlauf:after {
    content: "";
    position: absolute;
    background: linear-gradient(45deg, red, orange, yellow, 
       green, blue, indigo, violet);
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);  
    top: -2px;
    left: -2px;
    background-size: 500%;
    animation: wandernderFarbverlauf 30s linear infinite;
}

.schattenmitfarbverlauf:after {
    filter: blur(25px);
}

@keyframes wandernderFarbverlauf {
    0%   { background-position: 0 0 }
    50%  { background-position: 500% 0 }
    100% { background-position: 0 0 }
}

Und schon haben wir unser fertiges Ergebnis:

cooler CSS-Effekt mit animiertem Farbverlauf für den Schatten
cooler CSS-Effekt mit animiertem Farbverlauf für den Schatten
weitere eigene Projekte: