Need a clever way to organize and present all your popular blog tags? Follow Techi.com‘s lead and use this useful and elegantly designed Slider Navigation. You can find their implementation of SliderNav towards the bottom of their right rail.

SliderNav is a JQuery plugin that allows you to add dynamic, sliding content using a vertical navigation bar. It’s made mainly for alphabetical listings but can be used with anything, though longer words can look a bit awkward. The plugin automatically adds the navigation and sets the height for the object based on how tall the navigation is, in order to make sure users have access to the entire list. The example I’m linking to below also uses the overflow: auto; property for the actual content so you can use your mouse wheel to scroll through the content as well. (Clever)

The CSS and jQuery is surprisingly easy to understand and implement so don’t be shy and give it a whirl. Click here to view the demo and download the code.

Want to see a sexy, JS and CSS powered clock? Crank up Chrome, Safari or Firefox 3.5+ and point your browser here.

As mentioned, the clocks are using only JS and CSS rotation to accomplish the animation. No Flash or HTML 5 canvas tags. The way it works is kind of clever, actually… the JS takes images in an { overflow: hidden } <div> and rotates them using the proposed CSS transform property.

The author, Jon Combe, has published some other clever goodies including a function that draws world maps on the fly using HTML 5′s canvas. Pay him a visit, click around and enjoy.

This little piece of awesomeness by Ramon Cortez has been shooting up the CSS charts since he published it earlier this week and it has inspired me to get my preech on.

Passion projects such as this (and the paper bird that proceeded it) is what drives front end designers and developers to invent new forms of web interaction. Many of us with day jobs and families don’t often find the time to experiment with CSS or other DOM scripting but I believe it’s uber important that we strive to make that time. Google’s “20-percent time” for their engineers has proven effective — leading the way for big ideas like Orkut and AdSense to come to life — but why are we so reliant on our companies to set up these types of policies? It’s easier, by far, to make this a lifestyle change on our end while at home.

So, I’ve officially committed my Saturday mornings to doing just that. 2 hours of uninterrupted time on whatever shiny new project UI/UX and design related ideas that come to mind. This Saturday: jQuery to make Ramon Cortez’s CSS Coke can 1) zoom into view,  2) auto-scroll and 3) consider similar applications. Next week: Cinema 4D text experiments. Proper.

Here’s another goodie from Ramon Cortez: Pac-Man CSS!. It’s not 100% in terms of the original game play, but it further illustrates the potential of tapping JS to turn CSS powered designs into engaging pieces of multimedia gold.

One thing I love more than a good beer is a well designed beer website. Yeah, I said it — a website can be better than a beer.

Case in point: Jennings Brewery’s website out of the UK. Slick, transparent PNGs over a massive JPG depicting a refreshing, picturesque mountain setting. Makes me thirsty just looking at it.

Here’s some more CSS powered beer goodness:
beerenberg.com.au (Austrailia)
flyingdogales.com (Denver, USA)
johnboston.com.au (Australia)
odellbrewing.com (Ft. Collins, USA)

It’s safe to assume that Aussies and Coloradans have a large concentration of beer loving front end designers. Cheers to them.

I often find inspiration in the sometimes minimalist, sometimes colorfully-bubbly and always cutting edge style found in UI designs from our Asian counterparts. In fact, some of my favorite work comes from the Eico Design firm out of Beijing which consistently impresses me with their inviting, intuitive and downright slick user interfaces.

Click here for even more beautiful examples from the Pacific rim via Woorkup.com. Domo origato, dudes.

I spend a lot of time thinking about CTAs (or call to actions) over the course of an average work week. My team puts together advertising units, widgets and mini-site mock ups almost daily for big name brands and it’s important to create CTAs that are clear, eye catching and effective in converting to clicks. Some of the things we pay attention to mirror the tips mentioned here but there are a few more things to keep in mind that can help ensure you’re designing an effective CTA:

1) Size matters – make sure the CTA is big but not obnoxious. I’ve seen designs that go so big that the CTA ends up resembling an ad unit rendering it invisible to less savvy users. Find a good balance between your buttons and the surrounding elements but always strive to make it stand out, without scaring the user way.

2) Shape it up – Making your CTA look like a nice, inviting, rounded corner button makes sense about 90% of the time, but if you’re designing within an existing site or ad unit be mindful of the existing style. Sometimes, a link may be your best bet rather than using something resembling a button or badge. Whatever you end up doing, remember to use high contrasting colors to draw the eye and mouse.

3) Stick it where it counts – Positioning the CTA is probably the most important thing to consider. Remember that a user’s eye will generally track from left to right, top to bottom so the top-right portion of whatever you’re designing will be your hot spot. It often seems natural to place the CTA at the right/bottom-right of your design, but we’ve found that even with something like a 728×90 ad unit the CTA on the far left will perform more effectively. This is an excellent example of good positioning. Learn it.

It’s fun to think about what kind of design trends we’ll see with portfolios in 2010. With full on adoption of CSS3 and HTML5 just over the horizon, I sense there will be a lot of experimentation with these technologies and plenty of jQuery sprinkled in.

It also seems like bright, 80′s neon colors against dark backgrounds is making waves with portfolio designs and the ‘Apple’ chrome look is on its way out. I also think we’ll see a continued increase in image sizes as larger screen resolutions become more standard and I hope we’ll see more creative treatments like panoramic background side-scrolling and bubbly, fun, and colorful illustrative treatments.

I personally like the versatility of (and simplicity) of having my portfolio slide show accessible via lightbox on ever changing WordPress skins. Some of which I plan to build from scratch…if I ever find the time.

Here’s even more portfolio design trends to keep an eye out for in 2010.

It turns out there are lots of techniques to create rounded corners with CSS. The only methods I’ve used thus far – outside of corner images – included the use of these proprietary CSS properties:

1. -moz-border-radius: 5px;
2. -khtml-border-radius: 5px;
3. -webkit-border-radius: 5px;

Firefox using the -moz-border-radius property to control the corner radius of a page’s border and Safari doing the same with -webkit-border-radius or -khtml-border-radius properties.

I noticed rounded corners being used more frequently about 4 years ago, just as the ‘Web 2.0′ style became so rampant. At the time, rounded corners seemed like it might be a fad that would go the way of midi audio loops. As it turns out, they’re here to stay and offer an easy alternative to giving page elements an elegant look while defining space more effectively on bucket heavy pages .

I’m looking forward to CSS3 and HTML5 becoming standard and I’m very excited to see all the awesomeness designers throw out in the months to follow.

Every year around this time I stumble across dozens of Holiday themed sites that bring a little merriment to my days at the office. I never bookmark them, of course, but I recently came across this wonderful list of sites that are dishing out yuletime design with some clever CSS and couldn’t help but share. And here’s a list of 25 Holiday inspired wallpapers that also make me happy.

Enjoy!