CSS - Regenbogen Text

Somewhere Over the Rainbow

<style>

.
rainbow-text {
 
font-size3rem;
 
animation-duration3.115s;
}

.
rainbow-text {
 
backgroundlinear-gradient(53.13deg,#FFD33D 0,#FB8532 16.02%,#EA4A5A 28.06%,#8A63D2 56.92%,#2188FF 72.93%,#34D058 84%,#FFD33D 100%);
 
background-sizeauto;
 
background-clipborder-box;
 
background-cliptext;
 
displayinline-block;
 
colortransparent;
 
text-fill-colortransparent;
 -
webkit-background-cliptext;
 -
webkit-text-fill-colortransparent;
 
animationshine 6.28s alternate infinite;
 
animation-duration6.28s;
 
background-size300%;
}

@
keyframes shine {
 
0% {
  
background-position:200left;
  
filterhue-rotate(0);
 }
 
62.8% {
  
background-position:100center;
  
filterhue-rotate(180);
 }
 
100% {
  
background-position:200right;
  
filterhue-rotate(360);
 }
}
</
style>

<
div class="rainbow-text">Somewhere Over the Rainbow</div>

Bausteine  Alle Anzeigen

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

<ruby> Ruby Anmerkung

CSS - Animationen mit Keyframes

PHP - Alte Bilder (einer Webcam) löschen

JavaScript - BBCode konvertieren oder entfernen

MySQL - Datensatz löschen

Hintergründe
Der Hintergrund sollte nicht zu grell sein. Grelle Hintergründe belasten das Auge stark und machen Text schwer lesbar. Falls man ein Hintergrundbild verwendet, sollte es den Besucher nicht zu stark ablenken (keinesfalls: Steinkacheln, 3D-Reliefs, Holzmaserungen, Linienmuster... verwenden). Wichtig ist ein ausreichender Kontrast zwischen Text und Hintergrund. Gut ist zum Beispiel schwarze Schrift auf einem weißen oder pastellfarbenen Hintergrund. Hellgrün auf Gelb ist indiskutabel.