10-Aug-2013

Melbourne City Locksmiths

Portfolio

Melbourne City Locksmiths needed a simple brochure site so that customers could find and call them.

First version. Melbourne City Locksmiths website, August 2013.

This was my first site built without a CMS for a long time. Using Dreamweaver without the complex CSS rules that can cause conflict made building the site a breeze.

jQuery

The site features a pleasing animation using a few commands from jQuery, see the listing below:

 $(window).load(function() {
             $("#headertext").animate(
                            { top: '15px',opacity:1 }, 
                            { 
                                duration:6000, 
                                easing:'swing' 
                             }
                         ); 
   });

To ensure the animation happens early the load function is used to start the script.

The image was split into a foreground and background using Fireworks, and the text scrolls up in between them.

Mobile Service Badge

This was created using Fireworks and tips from Painting the Web, by Shelley Powers. The shiny effect is quite easy to achieve once you know how. A tutorial will be done for this site soon.

Shading

The background and product shading is not with an image but using the more recent trend of using commands in CSS to achieve the look required.

Using the Ultimate CSS Gradient Generator by ColorZilla is the easiest way to build your own patterns using the interface provided. Preset patterns are also given and make an excellent starting point for your own which can also be saved for later use.