Hi
I'm trying to replicate the transparent colour effect used on the hero image in the Clean Sky template, but I can't figure out how this has been done. The background colour and transparency seem to be controlled by the font properties for this section, however, when I try to replicate these settings on another BSS project, the color and transparency settings are lost.
I know there are other ways to achieve this effect, but I'd like to understand how this works because it would be super-useful to use elsewhere.
Thanks
It's because the hero image has a before pseudo class applied to it that uses the value currentColor.
.clean-block.clean-hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: currentColor; z-index: 1;
}
It's kind of an odd way of doing this, but I guess the person who created the template had their reasons. You can read more about how this value works here:
https://css-tricks.com/currentcolor/
Thanks for your reply Printninja. I'm using the templates to learn how stuff works but couldn't figure this one out. I'm gonna to look into currentColor some more.
Cheers