Colored-Rainbow-Text

Posted by Helmut_pdorf on 22 Jun 2020 17:22, last edited by Helmut_pdorf on 23 Jun 2020 11:17
Tags: color colour rainbow span text

1. Span

[[module CSS show="true"]]
<style>
.rainbow-text span{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 23px;
    text-shadow: 1px 1px 0px #A3A3A3;
    display: inline-block;
}
</style>
[[/module]]
[[div class="rainbow-text"]]
[[span style="color:#9400D3"]]D[[/span]][[span style="color:#4B0082"]]o[[/span]] [[span style="color:#0000FF"]]y[[/span]][[span style="color:#00FF00"]]o[[/span]][[span style="color:#FFFF00"]]u[[/span]] [[span style="color:#FF7F00"]]m[[/span]][[span style="color:#FF0000"]]e[[/span]][[span style="color:#FF7F00"]]a[[/span]][[span style="color:#FFFF00"]]n[[/span]] [[span style="color:#00FF00"]]w[[/span]][[span style="color:#0000FF"]]i[[/span]][[span style="color:#4B0082"]]t[[/span]][[span style="color:#9400D3"]]h[[/span]] [[span style="color:#4B0082"]]R[[/span]][[span style="color:#0000FF"]]a[[/span]][[span style="color:#00FF00"]]i[[/span]][[span style="color:#FFFF00"]]n[[/span]][[span style="color:#FF7F00"]]b[[/span]][[span style="color:#FF0000"]]o[[/span]][[span style="color:#FF7F00"]]w[[/span]] [[span style="color:#FFFF00"]]t[[/span]][[span style="color:#00FF00"]]e[[/span]][[span style="color:#0000FF"]]x[[/span]][[span style="color:#4B0082"]]t[[/span]] [[span style="color:#]]t[[/span]][[span style="color:#4B0082"]]h[[/span]][[span style="color:#0000FF"]]i[[/span]][[span style="color:#00FF00"]]s[[/span]] [[span style="color:#FFFF00"]]?[[/span]]

[[/div]]

Gives:

Do you mean with Rainbow text this ?

2. Using html

This is easier with the Rainbow-Text-Generator:
https://www.html-code-generator.com/html/rainbow-text-generator.php

• put in the text you want to create in html coding into the 1. window "Enter Your Text here"
• Example: "Is Rainbow text a colored text with all colors varying?"
• setup the fontsize and color codes,
• click on generate
• copy the result boxes into an [[html]]...[[/html]] block and see:

Done with

[[html]]
<style>
.rainbow-text span{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 24px;
    text-shadow: 1px 1px 0px #A3A3A3;
    display: inline-block;
}
</style>
<div class="rainbow-text">
<span style="color:#ff1b00">I</span><span style="color:#ff3700">s</span> <span style="color:#ff6f00">R</span><span style="color:#ff8b00">a</span><span style="color:#ffa600">i</span><span style="color:#ffc200">n</span><span style="color:#ffde00">b</span><span style="color:#fffa00">o</span><span style="color:#e7ff00">w</span> <span style="color:#b0ff00">t</span><span style="color:#94ff00">e</span><span style="color:#78ff00">x</span><span style="color:#5cff00">t</span> <span style="color:#25ff00">a</span> <span style="color:#00ff12">c</span><span style="color:#00ff2e">o</span><span style="color:#00ff4a">l</span><span style="color:#00ff65">o</span><span style="color:#00ff81">r</span><span style="color:#00ff9d">e</span><span style="color:#00ffb9">d</span> <span style="color:#00fff1">t</span><span style="color:#00f1ff">e</span><span style="color:#00d5ff">x</span><span style="color:#00b9ff">t</span> <span style="color:#0081ff">w</span><span style="color:#0066ff">i</span><span style="color:#004aff">t</span><span style="color:#002eff">h</span> <span style="color:#0900ff">a</span><span style="color:#2500ff">l</span><span style="color:#4000ff">l</span> <span style="color:#7800ff">c</span><span style="color:#9400ff">o</span><span style="color:#b000ff">l</span><span style="color:#cb00ff">o</span><span style="color:#e700ff">r</span><span style="color:#ff00fa">s</span> <span style="color:#ff00c2">v</span><span style="color:#ff00a6">a</span><span style="color:#ff008b">r</span><span style="color:#ff006f">y</span><span style="color:#ff0053">i</span><span style="color:#ff0037">n</span><span style="color:#ff001b">g</span><span style="color:#ff0000">?</span>
</div>
[[/html]]

---

+ Show Backlinks

Backlinks (Links to this page from others):

+ Show Comments

Comments:

Number of Comments: 0)