Looks hot! Insanely slick CSS, well done! And.. for *beep*’s sake.. now I’m trying to code myself a menu using just one image.. My first try was a close and worked, but was small. I can’t seem to keep an overview using a bigger image and so I get lost in the coordinates. :-( Lol.
Creating a graphical navigation is easy with just a pinch of maths. Its all about moving the background image along for each link. The best way to start off is to set up your navigation with a standard width for each button so you get the hang of it. So lets say each button in our navigation has a width of 100px, and the navigation is horizontal. Every button as you move from left to right must be set with a background position value of -100px left everytime.
So, if you have 10 buttons at 100px wide, the last button will have a background position of -900px left (You do not need a negative value on the first button!). Then all you need to do is alter the vertical positions on your hover states. The apple website uses this exact technique for their website.
Nice website Rob. It looks very inspired by the FOWD/FOWA websites at http://events.carsonified.com/ (I thought it was one of their websites when I first saw it!) but that’s not a bad thing – and I think I actually prefer your version to their’s actually!
August 24th, 2009 at 6:42 pm
[...] See the rest here: Hull Digital Live 09 [...]
August 24th, 2009 at 7:08 pm
Rob,
It was a pleasure working with you, and the site looks just superb!
Many thanks once again,
Jon :-)
September 3rd, 2009 at 2:22 pm
Congratulations on making CSS Remix again with this website!
September 3rd, 2009 at 6:22 pm
A really fantastic looking website, very inspirational!
September 9th, 2009 at 10:21 pm
Looks hot! Insanely slick CSS, well done! And.. for *beep*’s sake.. now I’m trying to code myself a menu using just one image.. My first try was a close and worked, but was small. I can’t seem to keep an overview using a bigger image and so I get lost in the coordinates. :-( Lol.
Again, well done!
September 9th, 2009 at 10:30 pm
@Danny
Thanks for your comments!
Creating a graphical navigation is easy with just a pinch of maths. Its all about moving the background image along for each link. The best way to start off is to set up your navigation with a standard width for each button so you get the hang of it. So lets say each button in our navigation has a width of 100px, and the navigation is horizontal. Every button as you move from left to right must be set with a background position value of -100px left everytime.
So, if you have 10 buttons at 100px wide, the last button will have a background position of -900px left (You do not need a negative value on the first button!). Then all you need to do is alter the vertical positions on your hover states. The apple website uses this exact technique for their website.
Hope that makes sense!
Rob.
September 22nd, 2009 at 1:17 pm
Congratulations to a fantastic website Jon! Reminds me a lot of the FOWA websites.
Cheers and good luck with the event.
/Sebastian
September 30th, 2009 at 5:31 pm
Nice website Rob. It looks very inspired by the FOWD/FOWA websites at http://events.carsonified.com/ (I thought it was one of their websites when I first saw it!) but that’s not a bad thing – and I think I actually prefer your version to their’s actually!
October 9th, 2009 at 9:35 am
I definitely prefer this site to the Carsonified event sites.
November 26th, 2009 at 7:17 am
Beautiful site. Love it! Did you do the main illustration too?
February 9th, 2010 at 7:56 am
I really love this fantastic sketch-like style!
How did you create the illustration?