CSS3 Slideout menu animation

As requested here is a simple tutorial on how to create a vertical menu that slides out when moused over. Unlike the standard CSS vertical menu that pops out instantly or simply changes color instantly this menu will slide out smoothly using a few of the CSS3 standards.

Before beginning this tutorial it would be a good idea to familiarise yourself with the basics of CSS menu’s. I have a tutorial up on this already Basic CSS Hover menu. Make sure you still have the code from this as we will apply this slide out effect to the previous menu for practice.

(more…)

CSS Hover Menu’s without Images

As a few of you may already know I tend to try to avoid images in my designs where ever possible. I do this to avoid unnecessary HTTP calls and bandwidth usage. It is not always possible as some browsers may not like it so where possible we should then have a fallback method to render the effect as close as possible. In this tutorial I will show one method for creating a menu that does not use images unless it encounters an old browser that does not support the CSS3 used to create our menu. This way no matter what browser views the page our menu will look at the same. Only difference is newer browser will load the page faster with minimal resource costs to your client. (more…)

Multiple Background Images CSS

As designers we sometimes come across situations in which we want to put a background in that consist mainly of a texture or a gradient with another image element or two that doesn’t repeat. Too often I see websites where this is done using either a large image larger than the common screen resolutions OR they repeat the background texture gradient and then place a div to hold the other image.

With the large image method this is an unnecessary use of bandwidth. It can be done better by having the background texture repeating as in the second method and using a second image (which we can use as you will see below)

With the second method the draw back to it is it can throw out a layout on different size screens particularly if you not careful. Even if you are careful this is still the long way to go round it and more time consuming than it should be. (more…)

CSS3 Website Background Gradients

In this tutorial we will be explaining the best way to add a gradient to the background of any webpage element using a method that improves page loading times over other method you may currently use simply by using CSS3 (with fall backs of course)

As designers we all use gradients in backgrounds all the time. To add texture to our designs or make our menu button look fancy for example.

Up until recently this has always been done with images and the most effect method involved just a small slice of a gradient image repeated up or across the image we are adding the background too. However this method involves loading the image (bandwidth) as well the server having to handle the request to get the image (HTTP requests). If we can remove these request particularly for popular website with large amounts of web traffic we should really be trying to do so. (more…)

History of the Internet Time Line

here is the flash timeline I did for our history of the internet assesment.

Sorry, either Adobe flash is not installed or you do not have it enabled

Fairfax Media Flash ads assesment

Last week we were required to produce a flash advertisment for our blog that adhered to the Fairfax media advertising standards.

This is the flash ad I created to advertise my blog. To be used on a fairfax media site only one line of code needs to changed and its ready to go. If I were to publish this line of code elsewhere it would not redirect to my blog when presented on sites not belonging to this group.

Sorry, either Adobe flash is not installed or you do not have it enabled

Castle Fictoria

Also earlier in the year we were given an assignment to create a website for a fake hotel called “Castle Fictoria”.

All images and content were provided for us. We then had to create the site using a text editor. Then later on we had to redo it in dreamweaver as well. Although both my sites looked similar this is what my dreamweaver site ended up looking like. (First website produced on this course)
This website utilised as much CSS3 as I could find use for. Implementations of CSS3 in this website include:

  • Images in main content brighten as you mouse over them.
  • Round corners on both the header, menu items and the footer.
  • Gradients on the menu items and in the header. (only images on that page are the photos in the main content )

 

Moodle Theme

Playing a bit of catch up here. Earlier on in the year we were asked to mock up a few designs for the Launceston Polytechnic Digital Media online learning website done in Moodle. This is the design I presented to the group.

This was my mock up of the theme designed in fireworks.

Photoshop CS5: Favicon Creation and Embedding

Favicon’s for those that don’t know are the little icons that appear up in the address bar before the web address and in a users bookmark list before the webpage name. They are a small icon only 16*16 pixels in size. The purpose of this article is to give a quick run down on how to create and embed them in your website. Although they are not standard we will also include a quick rundown on how to create and use animated favicons as well.

Photoshop, Illustrator and Fireworks CS5: Favicon Creation and Embedding

For a favicon to work first it must be saved in .ico format for IE to recognise and use it.  Although it is possible to use other formats (including animated gif’s) in other browsers we will stick to this format for cross browser compatibility. Also all browsers will instantly recognise and use .ico for a favicon without need for any additional coding if placed on your website root folder correctly. Embedding other formats involves adding code to each page.

Adobe Fireworks, Photoshop and illustrator do not come ready to create .ico files so first we will have to download an extension for this.

Once installed these programs will now be able to export .ico files.

To create a new favicon simply start a new document with a template of 64*64 to make things easier to work with. Once you have finished your icon resize the image to 16*16 pixels then export as .ico format.

Place the image in the root folder of your website and browsers will automatically display them in the address bar, on tabs and in favorites menus giving your site more visibility and user recognition.

To be on the safe side include this line of code in the head of your webpage to cover all bases.

<link rel="shortcut icon" href="/favicon.ico">

If you use any file type or file name other than favicon.ico you need to insert this command. If you wish to use an animated favicon it must be an animated GIF and you need to use this line in your html.

Enjoy

1 2 ... 4 5 6 7 8

  • Ripper Web Design