Posts Tagged ‘CSS’

Web – Guitar Gears Gallery

Guitar Gears Gallery

Here’s a fun website I’ve created, dedicated to my guitars, effects pedals and amps. It was created using HTML and CSS in Dreamweaver and took roughly a week to complete.

I started with some quick design ideas in Photoshop for the general look and then once I was satisfied with the layout; I progressed through to Dreamweaver for the coding design.

The photos were taken using a Canon 20D dSLR and then underwent some enhancements in Photoshop with level adjustments and colour correction. I used the High Pass filter to sharpen the images up.

Lightbox script plug-in was used for the gallery section as it’s a simple and nice way of viewing the photos.

I tried implementing some cool CCS3 functions that I learnt along the way and played around with transition effects which really adds dynamic to the site.

The drop down menu was done using HTML unordered lists and CSS to hide the menu, I used ‘absolute’ position to make the list appear on top of the menu, turning it into a “drop up” menu system.

The homepage was the last page to be created and took me awhile to figure the best method for linking the images.

The illustration images are in PNG format with transparency, I tried seeing if I could use the hover link state in CSS to create a mouseover, I found out this didn’t work since the cursor still interacted with the transparent background.

To create the end result I used the Image Map in HTML to draw the link poly shapes and added a javascript for the onmouseover action.

I added a preload javascript for the mouseover images to give a better result with no delay when users first hover over the illustration links in the homepage.

I tested the site through various browsers and there were a few small compatibility issues mainly with fonts which has mostly been fixed, there’s still an issue with Firefox support on cursive font which causes not to the display the primary custom heading font, I found this quite odd since all the other browsers support these fonts.

I also had checked the site in older IE browsers and there was a problem in IE7 not displaying the content, this is now fixed with a CSS code specifically for IE7 only with a small alteration in the positioning of the container element.

Overall, I really enjoyed making the site and was a lot of fun!

Tags: , , , .

    Comments Off on Web – Guitar Gears Gallery

Web – New Star Restaurant

New Star Restaurant

Here is a website that I made a while ago for a Chinese restaurant situated in Liverpool.

It’s one of the first websites I’ve created using HTML and CSS and it was a good learning experience.

I started off by coming up with design ideas in Photoshop; then moved onto Dreamweaver for the actual site creation.

The method I use for making websites is to do everything in Code based, this allows me better control of the design layout and personally find it easier to make adjustments.

Some of the newer features of CSS has been added to enhance the design of the site such as drop shadows and custom fonts. The viewing of the site has been carefully optimized to fit all resolution size above or at 1024×768 view.

I’ve tried to keep the site simple and user-friendly with a traditional yet modern approach in design.

Tags: , .

    Comments Off on Web – New Star Restaurant