Freebies: HTML theme

So today I was developing a web theme and I got stucked a few times. I’m thankful for these issues because I was able to find fixes.

First, I’d always used the ::before and ::after pseudo-class out of context but it really sunk in today. We shouldn’t undermine the ability of these classes as they can do amazing stuffs in our designs. You can sneak in a candy bar after or before an element in your web just by using these guys. I’ll take you through one of the numerous stuffs the ::before can do.

Ok, we have a background-image and you really need to have an overlay on it. Yeah, I know the first fix that would probably come to mind is splashing your image with a low opacity value in your psd or sketch too. But Im talking about having an overlay on an image in css. Now the ::before pseudo-class comes in handy.

.contact-section {
background-image: url(../img/footer-bg.jpg);
background-position: center center;
background-size: cover;
display: block;
width: 100%;
position: relative;
}
.contact-section::before {
content: “ “;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: rgba(17, 17, 17, 0.7) none repeat scroll 0 0;
}

So the above is a snippet of how it works. A few things should come in mind incase you get stucked like i did. Your parent element carries a relative position and so your ::before element should have an absolute position. Hence, the pseudo-class element can easily sit well on her parent element.

Oh you guys can download and use the theme i developed. My gift to the community. View theme here

Like what you read? Give Jide Lambo. a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.