CSS: The All-Expandable Box 152

CSS: The All-Expandable Box

In HTML, if you don't specify a specific width, block-level elements are vertically expandable by their nature. Think of an unordered list. That list will grow be be as big as it needs to be to fit all of it's list elements. If a user increases the font size in their browser, the list will expand vertically, growing to fit the larger content. Sometimes it feels like vertical-only expansion is limiting and it would be nice if the element could grow horizontally as well as vertically with a font size increase by the user.

View Demo Expandable Box

Download Demo ZIP

Best of CSS Design 2007 674

Best of CSS Design 2007

For those who don't know, I'm also the guy behind Best Web Gallery and N.Design Studio. In 2006, I started Best Web Gallery as a gallery site where I feature the best CSS and Flash sites. I'm glad that I started the project because it gives me the opportunity to keep my design sense up-t0-the-trend. In the past year, I've seen a lot of sites from the submissions (some are great, some are horrible). As 2007 is wrapping up, I would like to share the best design sites with you. Here is a list of 50 websites hand-picked from Best Web GalleryBest of CSS Design 2007.

Free Christmas Icons for You 395

Free Christmas Icons for You

Last year I did a free Christmas icon pack for fun. They are still looking fresh and cute. So, I just want to announce again in case you missed it last year. The pack included 49 icons in various formats: GIF, PNG, ICO (favicon purpose), and vector EPS (print purpose). It is free. You can use them for any purpose — commercial or personal. Only restriction is you can not resell/redistribute them (ie. upload to istock or offer download on your site). If you like my icon design, you can check out my stock icons.

Go Download Christmas Holiday Icons

Vector Polishing Techniques 582

Vector Polishing Techniques

Someone emailed me and asked how did I do the illustration background on Next2Friends. It inspired me to write this article. He asked "Did I do it in Photoshop or Illustrator?" Well, it is a mixture of both. First I created the artwork in Illustrator, then polished it in Photoshop. Here I will unveil all my secret techniques. This tutorial includes 9 Photoshop techniques that will show you how to add more depth, color, contrast, and texture into your vector art.

Review: PayPal Redesign 173

Review: PayPal Redesign

What do you think of the recent PayPal redesign and the new PayPal branding? In my opinion, I think the new design is very unprofessional and lack of consistency. My very first reaction to the new PayPal redesign was "What happened to PayPal? Got hacked!?" PayPal has made such a drastic change that it doesn't even look or feel like PayPal (the PayPal that we used to). I think it will take us a while to adapt to the new design. Don't get me wrong, I'm not saying change is bad. Changes are good if the results are positive. Here are my thoughts on the new PayPal design...

Advanced CSS Menu 612

Advanced CSS Menu

Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

View Demo CSS menu

Download Demo ZIP

Design Watercolor Effect Menu 225

Design Watercolor Effect Menu

This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article), I will show you how to design a watercolor effect menu in Photoshop. Then in next tutorial, I will show you how to slice the menu and code in CSS. If you need some inspiration on creating an artistic menu, visit our previous post on artistic websites. Ready? Let's begin Part 1. (Update: Part 2 is ready - Advanced CSS Menu)