Using CSS3: box-shadow to create a photo vignette.

The CSS3 property: box-shadow allows you to create simple drop-shadows on block level elements within a webpage. The box below shows this effect in action:

.selector{ box-shadow: x-direction y-direction blur-amount colour; }

The box-shadow property also allows you to place the shadow within the element using the inset value, this allows you to create some pretty cool effects including: photo vignettes.

Take this photo for example:


A pretty photo I am sure you will agree, but let us see what it’s like when we add a vignette!


There we go! Now, how about a slightly different colour?


To create this effect I simply added the following style to a DIV & placed it on top of my image:

  -moz-box-shadow: 0 0 180px #000000 inset;

  -webkit-box-shadow: black 0px 0px 180px inset;

The -moz-box-shadow covers Firefox & the -webkit-box-shadow covers all webkit enabled browsers (Safari, Chrome etc.).

I love the box-shadow property especially the inset value, you really can create some cool depth effects within a web page - all of which would have been previously done using layered divs with shadow images.

Do you have any cool effects created using the box-shadow property? Let others know in the comments below!

Filed under:

Rewilding the planet with freelance animation and motion design

We've only got one planet, and right now it needs all the help it can get. Climate change and biodiversity loss are massive challenges that we need to tackle head on.

That's why, for every freelance animation project over £1000 a donation of 1% of the total budget will be made to the World Land Trust, on your behalf.

The money will go towards WLT's "buy an acre" programme; buying up and protecting vital habitats around the world, and helping fight against climate change.

Any motion design projects under £1000 will have a tree planted on your behalf.

Acres saved so far:

Thanks to my wonderful clients and the animations we've produced, enough money has been donated to save around:

17.5 Acres of vital habitats around the world.

Just think, your animated explainer video or logo animation could also be helping fight the climate crisis!

If you're interested in some freelance animation work and saving the planet, get in touch and let's chat!