You’ve got a rad image of a cityscape to chuck on your new site but wait… it’s not looking quite cool enough right? Time for some zing!
Let’s start out with our quaint little
img tag. Simple and elegant.
It saddens me that you can’t use the before/after pseudo elements with an
so we have to go and spoil it all by adding a wrapper…
OK, so it’s not the end of the world. Using the wrapping
div, pseudo elements
can now be used in full force.
The wrapper is positioned
relative so that the pseudo element can sit on top
img and displayed
inline-block so that it wraps happily around the
img inside (though normally done through a reset) is vertically aligned
bottom, removing any weird spacing below the
Finally, the pseudo element is setup to act like normal
div above the
100% height added to also cover it up.
Now for the solo. Add this garishly brilliant gradient to the pseudo element,
followed by a touch of
opacity and we are one step closer to having one
hip image of NYC.
And here we have it, one rad-tastic CSS gradient image.
Taking it further
We can take this one step further and bring it more inline with say what we could achieve using Photoshop.
This time our HTML is simpler, yet we lack an image definition. There are a few different ways to get around this, but lets run with this for now.
The CSS gets a slimming too. The key part here is the multiple backgrounds (the .jpg and the gradient) followed by a CSS blend mode.
This gives us a much stronger outcome and results in some cleaner code. The blend modes can be played with to your hearts content along with the gradient to create that 80s flair.
Don’t get me wrong, blend modes and the 80s
were are cool but please use this
wisely. You may emptly stare at your screen wondering how to make your images better but
this isn’t always the way, 99% of images do the talking for themselves.