{"id":1826,"date":"2011-12-27T04:24:03","date_gmt":"2011-12-27T03:24:03","guid":{"rendered":"http:\/\/raykit.co.uk\/blog\/?p=1826"},"modified":"2012-01-07T23:58:47","modified_gmt":"2012-01-07T22:58:47","slug":"web-guitar-gears-gallery","status":"publish","type":"post","link":"http:\/\/raykit.co.uk\/blog\/2011\/12\/27\/web-guitar-gears-gallery\/","title":{"rendered":"Web – Guitar Gears Gallery"},"content":{"rendered":"

\"Guitar<\/a><\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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

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.<\/p>\n

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.<\/p>\n

The homepage was the last page to be created and took me awhile to figure the best method for linking the images.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Overall, I really enjoyed making the site and was a lot of fun!<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[40],"tags":[42,15,41,11],"_links":{"self":[{"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1826"}],"collection":[{"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=1826"}],"version-history":[{"count":18,"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1826\/revisions"}],"predecessor-version":[{"id":1849,"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1826\/revisions\/1849"}],"wp:attachment":[{"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1826"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/raykit.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}