Code a Rainbow Using HTML and CSS
Hello, world!
I am currently enrolled in a Software Engineering 15 week intensive bootcamp, and I’m basically running on caffeine and tears as we move into week 6. I can get into my experience at a coding bootcamp on another post, but for now, I wanted to take a moment to celebrate the wonderful LGBTQIA+ individuals within the tech community. Together we are helping diversify the tech world, and that in and of itself is pretty amazing!
So far in my bootcamp, we’ve focused on learning JavaScript and React.js fundamentals, which has been incredibly valuable, but we haven’t spent much time at all on CSS or HTML, so I figured I’d take a deep dive into CSS on my own by creating a CSS Rainbow. Here’s what the end product should look like:
To start, you’ll need a basic HTML and CSS file; make sure to link the CSS sheet to the HTML file so they can communicate.
Note: For this project, I’ll be working with Viewport Units. If you aren’t familiar with how these units work, feel free to use pixels for sizing anywhere you see “vw” in my code. Here’s a link to some info on Viewport Units.
Step 1: Write out the color divs in HTML
Inside the body of the HTML file, I made divs for each color I want rendered to the page; the divs should all have class names for CSS styling purposes. Make sure to include a white div in order to render the center of the rainbow!
You can always start out with fewer divs, but I wanted to make an inclusive pride flag inspired rainbow, so I ended up with 11 in total.
You might notice that I wrapped the color divs in a “rainbow-wrapper” div. This will help us achieve the arch shape for the rainbow, and it helps keep the code organized and easy to work with.
Step 2: Initial Format for the Wrapper-Div
This step makes sure we’re covering our bases in formatting and sets us up to render our rainbow to the page.
In this step, I assigned the size of the wrapper div, instructed the div to hide any overflow (this creates the clean line at the ends of the rainbow), centered the div using auto margins, and set the position to relative. Here’s what the code looks like:
Step 3: Choose the Colors for Your Rainbow
This can be as simple as assigning the background-color property for each color div to the name of the color. It might look something like this:
While this sure is the easiest way to assign colors, I wanted to do a deeper dive into CSS, so I used this website to create a custom rainbow color palette. You can create your own, or here’s a link to the palette I created.
Step 4: Format the Color Divs
Now we can move on to the fun part: formatting the color divs! At the end of this step, your page should have a funky square rainbow rendering to the page, like so:
To get this to happen, we need to do a little math. I promise it’s not too complicated if I could do it!
We’ll start with our “red” div. This div should be assigned the same width and height as the rainbow-wrapper since it’s our outer-most arch. The position for this div (and all of the color divs) should be set to absolute; this ensures that the color blocks can easily be positioned inside the rainbow-wrapper and that they will stack on top of each other.
Work inward, one color div at a time to create color blocks that render to the page. Each new color block should be smaller than the one that came before it, and it should be positioned further away from the left and top of the rainbow-wrapper div each time. This is how we create the ~rainbow~ effect using simple blocks of color.
In my example, I used a 2:1 ratio of width:height for my color blocks, and I moved the blocks down and in by 2.5vw increments.
If my explanation isn’t working for you, here’s a video tutorial using the same method (the math is a little different).
Here’s a bit of the example code to get you moving in the right direction:
*I also uploaded the full code to Codepen here!
Step 5: Use a Pseudo-Class to Format the Rainbow
This is probably the simplest step of the process. All we need to do now is tell CSS to round out the rainbow to get rid of the sharp corners. To do this, we’ll access all of our color divs through the pseudo-class of “rainbow-wrapper>div”. Then we can set the border-radius property.
Here’s how I did it!
**Additional Steps Using Webkit**
While we’ve finished making the rainbow, I wanted to go the extra mile and make a rainbow gradient header. This utilizes Webkit, and I learned how to make this happen with the help of this article.
The code itself is just 5 lines, and here’s what mine looked like using my custom color palette:
And there you have it! If you coded along, please share your final project — I’d love to see it! You can also reach out to me on Twitter with any questions. Happy Pride Month and Happy Coding! :)
Resources:
