CorNinaber.nl

Random color overlay

After the initial setup it was time to pick a nice starting theme. I wanted something clean and simple, so I choose pico light hiero. Which, as you can see, is a nice minimal theme. But a little bit of color never hurt anyone, so was looking for adding some brightness to the page.

I did a search for doing this through specifiing the hue, because I thought it would give a better/easier result then doing it with rgb. The first link I found (forrst.com), showed that it was possible to do something like this. It shows  how to randomly generate a hue color with php and using this in the css. Basically what it describes is creating a function to randomly draw a value between 0 and 359 with the php rand function, and then using this function to specify colors in the css

This was sort of what I wanted, but I wanted a random color overlay on top of the top banner. Which was exaclty what was proposed on a thread on css-tricks.com. What is suggested is, to create a new css class that is essentially nothing more than a empty block and has a transparent background. In other words another object with no content, only a semi-transparent background, overlaying a picture.

Now I had the 2 main ingredients (random color generating and color overlay), I had to combine them. With a little help of www.w3schools.com I figured out what the different variables were for color specifying, and which ones I wanted to keep static and which to be random.
The method I used for specifying the color is hsla, which takes the arguments hue, saturation, lightness, alpha. Were hue specifies the color to be used (and will be randomly generated), and alpha is the level of transparency
Below the resulting code.
The newly created css class I added inline in the header.php file, because it holds a bit of php code, so thought it would be the easiest solution to be let it evaluated there.

[sourcecode language=”css”]
<style type=”text/css”>
.overlay-img { position:relative; display:inline-block;}
.overlay-img:before {
content: ‘ ‘;
display: block;
position:absolute;
width:100%;
height:100%;
background: hsla(<?php echo rand(1,360)?>,100%,50%,0.4);
pointer-events: none;
}
</style>
[/sourcecode]

Then to get this using on the header image, I changed the image line in the header.php file to:

[sourcecode language=”html”]
<span class=”overlay-img”><img id=”headerimage” src=”<?php header_image(); ?>” alt=”Overlay Img” /></span>
[/sourcecode]

And thats it.., I have a banner which changes color every time it is loaded.

Next Post

Previous Post

Leave a Reply

© 2020 CorNinaber.nl

Theme by Anders Norén