Share on:
Stumble Upon
Delicious
Over the years, CSS and Javascript has enabled clever designers to come up with innovative tricks and solutions to common design challenges.
While it would be impossible to list all such tricks, this post humbly attempts to list a few of the favorites I could recall. Included are resizing and positioning tricks, animations and Javascript trickery. These techniques are unique (or rare) to the best of my knowledge, and have not been discussed anywhere by their designers, please correct me if I’m wrong. Also, don’t forget to suggest any other innovative tricks you have noticed, I’ll add them to part two of this post to be published later.
Paulicious: desktop-like design
A remarkable theme that loads everything via AJAX, and presents content in a desktop-esque feel. You can even choose from a few different wallpapers (click the icon on bottom left corner). The icons are links to posts and videos that the author has choosen to be on the desktop. When clicking on an icon, the post content comes up in a resizeable, draggable window. You can also minimize the ‘windows’ and bring them up again (you can see a few windows I’ve minimized, in the screenshot above).
Will someone ask him to release the source so that we can all learn from it? :)
Dev Thought: clouds and sky
Devthought has draggable, moving, animated clouds and sky, probably depending on real-world climate (I say this because unfortunately, while taking the screenshot, the clouds were not present – damn the sun and bright skies).
HelloWorld.show
I have not described this design in the title for a lack of better words, but the boxes on the page move around depending on how you move the mouse over them. The box over which you hover also pops up with more brightnes. Mouse coordinates are shown live on the top left corner.
iTheme: customizable, drag-drop sidebar
iTheme was one of the earliest WordPress themes to use Javascript for some serious pizzaz – you can rearrange the sidebar boxes, and the theme will remember it.
Icondock: drag-drop shopping cart
Icondock has a shopping tray to which you can load icons for purchase (by clicking plus buttons on icons), and the preview will load in the shopping tray, and the total price of purchase will be updated real-time – all without reloading the page.
Zaum&Brown: moving text boxes
The info boxes are pushed down when you resize to a lower width, and they come back up when resized to a larger width.
ifElse.co.uk: Resolution-depended sidebars
When you resize to a width just more than required for the first two columns of ifElse, the right sidebar repositions itself to a footer. For larger resolutions, the footer is absent, and the sidebar is visible.
Recommended for designers
