Create a Glossy Photo Effect with CSS3
More and more we find ourselves creating effects that would normally be done in design software like Adobe Photoshop, using just CSS. And more recently the new effects achievable with CSS3.
In this tutorial I'm going to show you how to recreate this common effect of making a glossy image, by using some CSS3 gradients.
Okay, so for this short mini-tutorial, we're going to be using a very basic HTML5 setup. With the least amount of things possible, for this effect wants to be achieved using mainly CSS. Therefore it's best practice to keep the HTML as clean and semantic as possible.
So apart from the page structure and wrapper, we basically have just one
DIV element (with a class of photo) that we've stuck an
IMG tag inside of.
That's it for the HTML! So let's get onto the CSS side of things.
First of all we'll just set up the page so that we can concentrate on the photo element. Here we are just adding a background colour to the whole page, and setting up the page wrap DIV.
Styling the photo container DIV
Next step is style the containing div. So here we're specifying the height and width of the block element. This is the most important point in this step, that and setting the position value to relative. Everything else is purely for aesthetic purpose. Like the cool double box shadow around the whole image, and the 1px border.
Now the image looks good. But we're missing one thing, the gloss effect itself. That's the last step in this mini-tutorial.
Styling the :before pseudo element of the photo
Here's the most important step of the whole effect, we're going to style the :before pseudo element of the
div. That way we can add the style of the glossy look over the top of the photo without having to add extra markup in the HTML side of things. That way it's more semantic. Here we're absolutely positioning this element over the photo (that's why it's important to set position: relative; in the step above), and we're applying some CSS3 gradients to the background of this new pseudo element.
Now I know that all those numbers might be quite scary looking for beginners. But they're basically all RGBa values (color values that we can apply opacity to) inside of "stops" for the gradients. So to describe what's happening .. we have 2 halves of the gradient, going from the TOP LEFT corner, to the BOTTOM RIGHT one. The first half goes from fully transparent all the way to 50% transparent white. The second half goes straight back to fully transparent (that's what creates the diagonal line) and stays that way.
That's it for this mini-tutorial. Don't hesitate to hit me up in the comments if you have any questions or suggestions. I've put the whole end product up on Github, so feel free to come over and fork it!
I hope you enjoyed this tutorial, and found it useful.
SHARE THIS POST
ABOUT THE AUTHOR
Onextrapixel is a leading online magazine and resource site for designers and web developers. The Singapore based portal aims to collect, explore, as well as share useful tips, news, tutorials, tools and resources; on design, development and other inspiration. We hope that everyone will find something here that is useful and interesting.