Photo effects in CSS

While creating this effect is fairly simple to do in Photoshop, it can also be performed solely through CSS and HTML. It is very simple process that gives a pretty cool result. The reason to do this technique is CSS rather than Photoshop is that if you do not like how the effect turned out, instead of going back in to photoshop to redo the entire vignette, the problem can be fixed easily in the CSS code.

Screen Shot 2014-02-18 at 11.51.54 PM

 The first step is to create a div with the desired image set as the background. The picture I’m using for this post is taken directly from my recovery project, so I know the exact dimension already (900*600). Once the dimensions are set begin coding for the webkit (which helps render CSS elements for browsers) and select  “box shadow.” Enter down a line and code the “inset” and set  the vertical and horizontal offset (the first two numbers) to 0. After this select a color, most likely #000, which is black. I repeated this process three times because with only one inset, the edges were not quite dark enough.  Use the same inset shadow for all three different browsers (webkit, moz, and box-shadow).  

Screen Shot 2014-02-18 at 11.20.38 PMScreen Shot 2014-02-18 at 11.51.20 PM

I used a 200px shadow in my photo due to its size, but each image is unique and the size of the shadow should be tailored as such.

This is just a simple div class, there is no special HTML coding that is required.

Screen Shot 2014-02-18 at 11.51.30 PM


Screen Shot 2014-02-18 at 11.51.43 PM        After

Screen Shot 2014-02-18 at 11.51.54 PM


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s