Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Create a Midnight Rainbow with a little HTML and CSS

3.25/5 (7 votes)
22 Apr 2015CPOL 20.6K  
Simple example for kids and novices of using HTML and CSS to create a colorful midnight rainbow effect

Startling Revelation

I went to school with Roy G. Biv; I'm proud to say that he was a friend of mine. Roy G. and his buddy Hue saturated me with colorful knowledge, and they were on the level.

So, I'm "paying it forward," kids, and showing you how, with a modicum of HTML and CSS, you can create a rainbow in the midnight sky (or so it seems, if you use your imagination).

Here is the HTML:

HTML
<h1>
<span class="r">R</span>
<span class="o">a</span>
<span class="y">i</span>
<span class="g">n</span>
<span class="b">b</span>
<span class="i">o</span>
<span class="v">w</span>
</h1>
<p>Look, Ma (and/or Pa)! I created a "Midnight Rainbow" with a little HTML and CSS!!!</p>

...and here is the CSS:

CSS
h1 {
    font-size: 500%;
    font-family: "Palatino Linotype", "Century Gothic", "Baskerville", "Consolas", "Candara", "Lucida Sans", serif;
}
body {
    background-color: black;
    font-family: "Lucida Sans", serif;
    color: white;
}
.r {
   color: hsl(0, 100%, 50%);
}
.o {
   color: hsl(30, 100%, 50%);
}
.y {
   color: hsl(60, 100%, 50%);
}
.g {
   color: hsl(120, 100%, 50%);
}
.b {
   color: hsl(240, 100%, 65%);
}
.i {
   color: hsl(280, 100%, 60%);
}
.v {
   color: hsl(300, 100%, 50%);
}

You can see an example of this here.

Or, if you sprained your clicking finger, it should look something like this:

Regenbogen

TiNSTAaFT

(That stands for, "There is No Such Thing As a Free Tip"). If you like this, make a paper-machete statue of good ol' Roy G. Biv and paint it the colors of the rainbow (red, orange, yellow, green, blue, indigo (AKA blue-violet), and violet)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)