Increase revenue by 150% in 90 days by introducing 1 webpage of CSS3 animations!

If, like me, you've got what feels like 100's of web pages to keep fresh and alive and interesting you'll need to know this stuff! Then if you get asked as a web designer what value you give the business you definitely need to read on!

A sprinkling of CSS3 goodness over an otherwise plain collection of images can help to bring them to life and inject a little more personality to a page. Using simple CSS3 techniques we can create simple, yet effective, interactions which provides a subtle level of eye-candy. Amongst a plethora of nice things that CSS3 provides us there are a few new styles and properties that we can leverage very simply to our page. But first, we must lay down the building blocks for our images - the HTML:


Here we are creating a series of 5 images each linked to its own image source. Each image has the class polariod applied along with a rotate class - the purpose of these will become clearer a little later. The CSS to style the basic images is thus,


The result is a somewhat uninspiring series of stock images,


To give each image a slighty more polariod look and feel we can update the css to apply a shadow, background gradient and subtle corner rounding:




Back in ye olde' days, I often wrote on the polaroid itself with a short description of the image, noting the people in the photo, location, date etc. We can achieve a similar effect here by altering the structure of the html to include a wrapper for each image and including some paragraph text,


Alterations to the css are fairly minimal. We'll need to set the pen colour up (biro blue works for this).



Now that the images are contained within a div wrapper we can also apply styling to the image specifically. So, why not sprinkle a little more CSS3 around...

Pass the Pritt-stick

I used to stick my polaroids in a physical photo album. Some used to come with feint lines horizontally and vertically across the page to help you to place the photos nice and neatly ensuring that they were straight and equi-distant from each other. However, many didn't provide this aid meaning that you were often placing images by eye and aften the result was a little chaotic. To be honest, I quite liked that look as it felt more real and homely rather than manufactured. CSS3 allows us to mimic this positioning using the transform / rotate style. We don't really want every image to be placed with the same degree of rotation, so we'll vary it. Remember the rotate styles that we added to, what are now, the polariod wrappers? This is how we'll rotate either (P)ositivly or (N)egativly by a few degrees,

Sprinkle some gloss

I suppose we could stop there; we have images that are not dissimilar to the polariods of olde'. But, we're working with slightly more enhanced tech here, so we can add a few nice touches. We could rotate the images back to 'straight' on mouse hover. Note that although IE will simply 'turn' the images, it won't animate it unless you're using IE10+,


We could also alter the scale and opacity of the polariod. We'll very slightly dim the opacity of the image until the user hovers over the wrapper. At which point we'll fully brighten and enlarge the image by a small factor,


Again, IE will perform the scale and opacity functions, but unfortunately not with smooth animation.


The final html & css are:

Summary

Now you're asking yourself how does all this clever stuff increase revenue...well I was recently asked to add some "bedazzle" to one of our most visited and popular websites, www.crystaltraining.co.uk so I applied this style format to our page containing the details of our valued consultants and trainers from our Business Intelligence Team. Between them this team have over 100 years of Crystal Report development experience and a reputation for delivering some of the best BI projects in the business so I thought I’d better honour them somehow!.

Come and check out the look www.crystaltraining.co.uk/instructors, be sure to use a proper web browser like Firefox or Chrome to get the true wow factor!

Now I don’t know whether its connected to my amazing new website animations but a colleague recently told me we’d increased our training revenue in the last three months by 150%, that's an amazing increase and you'll excuse me but I'm gonna be humble and for the sake of artistic license take the glory!

That's now adding CSS3 styling to 1 page of your website can increase your organisations revenue by 150% in 90 days!

To find out more about CSS3 check out this forum To find out more about some of our successful BI projects check out our case studies or visit us at our next free seminar.


Written by: Mick Stup, DSCallards
Visit: www.dscallards.com