Bilder-Farbrotation mit Gradient

Der CSS Blend-Mode - Ist ein Mischmodus um zwei Ebenen (Hintergrundbild und Hintergrundfarbe) anhand von Farbformeln visuell miteinander zu verschmelzen.

       


<style>

/* Bilder-Farbrotation mit Gradient */

div.rotate {
 
backgroundurl("hintergrundbild.png"),
 
linear-gradient(233deg#E56420#C22525#3D9C31#37BBDE);
 
width444px;
 
height207px;
 
background-sizeCover;
 
background-blend-modehard-light;
 
animationhue-rotate 20s linear infinite;
}

@
keyframes hue-rotate {
 
from {
  
filterhue-rotate(0);
 }
 
to {
  
filterhue-rotate(360deg);
 }
}
</
style>

<
div class="rotate"></div>

➤ Das Hintergrundbild bewegen: Animierte Box mit Keyframes

Siehe auch: Animationen mit Keyframes, Kompass-Animation und Eine Animation ab einer bestimmten Scroll-Position starten

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<hgroup> Überschriften gruppieren

CSS - Verschieben von Hintergründen

PHP - foreach und list effizient einsetzen

JavaScript - Einen zufälligen hexadezimalen Farbcode generieren

MySQL - Wie oft ist ein Eintrag in einer Spalte vorhanden

Seitentitel
Der Seitentitel ist sehr wichtig <title> Seitentitel </title>, in diesem Teil vorkommende Wörter werden von den Suchmaschinen besonders stark gewertet. Außerdem, wenn die Seite zu den Favoriten/Bookmarks hinzugefügt wird, wird dort auch der Seitentitel angezeigt. Oder können Sie sich unter einem Bookmark mit dem Namen "Seite 2" etwas vorstellen??
Tipp: Wechseln Sie einfach mal zu den diversen Suchdiensten wie Google oder Bing! und geben Sie dort als Suchbegriff "NEWPAGE" ein. Ich habs versucht und schlappe 22000 Treffer erzielt. "INDEX" hat noch mehr ergeben.