Create more 4-color CSS examples

[calvinmorett]

Use the following css variables: --first, --second, --third, --fourth, to create additional examples, like the ones displayed here:

To contribute your examples that will be added to hex.blue:

1. Create a new issue that details your ideas: Title the issue, "CSS Example Submission".
2. Include a link to the code. I suggest using Codepen.io.
3. Add the labels, css, enhancement, and html
4. Create a new .css file with your Github username as the name for the file, example: calvinmorett.css
   • Optionally, add images to post so we can make sure it is how your CSS example(s) should look.

An example of how the post should look:

---

Here's an example:

:root{
    --first:#0f75b7;
    --second:#039dff;
    --third:#59bfff;
    --fourth:#acdfff;
}
hex{
    font-size: 135px
}
hex:nth-of-type(1){
    color:var(--first);
}
hex:nth-of-type(2){
    color:var(--second);
}
hex:nth-of-type(3){
    color:var(--third);
}
hex:nth-of-type(4){
    color:var(--fourth);
}
</style>

<hex>&#x2B22;</hex>
<hex>&#x2B22;</hex>
<hex>&#x2B22;</hex>
<hex>&#x2B22;</hex>

I've utilized the following css variables, within hex.blue. --first, --second, --third, --fourth.

Whenever a user goes to the website a color is generated from one side, to the other side of a gradient. That gradient is split into a pieces, in this case I only show 4. Within those colors I add the values of those colors to the CSS variables, so they're easy to use everywhere within the page.

In the example above, there are four inline elements, called hex.

Using the :nth-of-type() selector, I'm passing in those CSS variables. I've added those colors in the CSS, that I've placed directly into the HTML, within the style tag.

---

Consider elements that are easy to understand where the colors are seperated from, and fun besides just a few squares that gradient downward. e.g.