I'm a CSS All Star Sunday 30 August 2009 06:10
Posted in category Me Me Me

This week I've been featured in Web Designermagazine as a CSS All Star!

I'm a CSS All Star - Web Designer Magazine I'm a CSS All Star - Web Designer Magazine

www.rdbrown.me.uk is the personal showcase for Norwich based freelance web designer Richard Brown. The site was designed in December 08 and launched in January 2009. At the time of the design process I was adamant on staying well away from the sketchy/homemade look which was a very common design trend of the moment. As much as I liked it, I just couldn’t bring myself to design something that had already been done 1000 times before and something I would be bored with after only a few days or weeks from launch. I wanted something clean and minimalist that would allow the work in my portfolio to speak for itself, something that wouldn’t confuse visitors and displays what I do from an instant glance.

The css and scripts used are extremely simple yet effective. There’s a nice jQuery script called Sliding Boxes for the latest portfolio pieces. I’ve also used twitter and flickr badges to pull in my latest social networking feeds.

Sliding Boxes
For my portfolio site, I used a really simple yet effective Sliding Box jQuery script by designer Sam Dunn to display my latest work at a glance. All of the sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. I decided upon using just one sliding effect to keep the selections consistent, but there are actually six different transitions you can select from, you can take a look at the options here http://buildinternet.com/live/boxes/.

Using the script itself is extremely painless. Simply insert the script in the header of your page, here you can specify the size and duration of the transition. Customize the css to fit the style of your website, then simply insert a line of code specifying the div class, alter the image path, description of the project if necessary and amend the link path to the correct destination. 



Comments

Add comment


 


Click to change captcha

biuquote
  • Comment
  • Preview
Loading



Richard Brown | Freelance interaction designer, digital creative & front-end developer.



Comment RSS