This technique should work on all browsers that support box-shadows and rounded corners. Other browsers won’t show the shadow. As with all CSS3 techniques, the effect is best used for enhancing an already solid design. If a fancy shadow is essential to your design, an image may still be your best option.

What Does it Look Like?

Here’s the basic warp shadow applied directly to a paragraph tag.

Here it is again on a paragraph tag now with a set width. As you can see, the shadow scales so it can be as narrow….

…or as wide as you want.

A few more examples can be found here.

How Does it Work?

The mark up looks like:
<p class=”shadow_box”>Text in paragraph (or other element)<span></span></p>

As far as styling goes, the stylesheet is pretty self explanatory if you want to jump right in. Here’s a brief explanation of the essentials:

.shadow_box – we apply a regular css3 box shadow (in all it’s browser variations) and scoot it down 10px with a glow radius of 5px. I float it left for this site and demos, but can be worked around if you don’t want it floated. Next we apply position:relative so we can position span absolutely based on it’s parent (the element with the .shadow_box class).

.shadow_box span – We give the span the full width of it’s parent container and a height of 15px. We then set it to position:absolute and set it to bottom:-30px. Relying on arithmetic for a second, it means the top of the span is 15px below the div, exactly where the other shadow ends. We then give the span border-radius of something along the lines of 50% / 7px (or pick a reasonable pixel for browsers that can’t define border-radius by %) to shape the span like an ellipse. The last step is to add a border shadow of the color of the background, and scoot it up so it overlaps the other shadow. The net effect is it cuts away the middle portion gradually in an arc shape.

Some things to keep in mind:

• Yes, it does require the inclusion of a meaningless span. Purists may balk. Purists should add the span at run-time with javascript and proceed to take deep breaths. Or they can revert to images.
• Notice there is no background-color of the span. This minimizes the likelihood of anything else being accidentally overlapped or hidden and eases the degradation for older browsers.
• The heights and shadow distances can be changed, but they should be consistent. Remember that you want the beginning of one shadow to overlap the other shadow, but you don’t want the span’s shadow to cover anything else.
• There are many possible variations. The purpose of this isn’t merely to make there be two possible shadow shapes with css3 rather than one. I encourage you to expirement and make it your own. It should be trivial to isolate one corner for a shadow or to move this shadow to the top instead.

So, What do you think?

Is this all just a bunch of css3 hocus pocus that has no place in the real world of design? Can you think (or better yet, demonstrate) any better applications of this technique? Would you consider using this technique for a client’s site? Maybe it’s more useful as a rapid prototyping technique?

Try to Monetize

The appeal of earning money for already completed work is undeniable.

This is (for obvious reasons) a popular choice for designers who are left with excess designs and some time to spare.  The prospect of earning money for work that’s already been completed is quite enticing. There are numerous options for those who wish to make some extra money from unused logo or web designs.

• Sell Designs in a Marketplace - The most obvious solution is to touch-up your designs, remove existing branding, and sell them in a marketplace. The Envato marketplaces such as Theme Forest and Graphic River are popular examples.  Though there is great potential here, generally only the top sites make substantial money and most marketplaces take a significant commission.
• Find a New Buyer – Similar to marketplaces, websites like Brandstack can connect you to people who would be interested in buying your design. They have the distinction that designs are sold only once and for a higher price than most marketplace sites.  Designers also tend to earn higher commissions from websites that can find you a new buyer.
• Sell Merchandise With Design – Websites like Zazzle and Spreadshirt allow you to easily sell shirts, clothing, and other merchandise with your design.  They allow you to set up your own store page and they take care of the printing and shipping.  Obviously this option is less feasible for leftover web designs (though, you never know – shirts printed with awesome web designs may be the next big thing) than it is for illustrations.

Those are just some ideas for getting started; Mashable has a much more comprehensive list. 

Despite the obvious positive potential, there are drawbacks to trying to sell your design.  First, most of these will require some extra time on your part to prepare to sell. It’s also worth mentioning the obvious that you won’t make any money unless you sell. This may mean additional time trying to market your work, responding to questions, etc. Even then, you may have a fantastic design but never sell if it doesn’t reach it’s niche. Please consider that if a client paid you to create multiple drafts, it may be against your contract (or ethics) to sell unused drafts.

Release To The Community

Another good option may be to release your designs to the community. If you give away quality work, the reward may be recognition from the community. Recognition can turn into inbound links and increased PageRank or simply more respect, both of which have their values.

Here's a portion of a design I considered for this site but ultimately decided against. I'm currently adapting it into a WordPress theme.

Releasing a quality web template or, better yet, a WordPress theme for free is a good way to drum up publicity while potentially adding to your portfolio. Additionally, it is common practice to place a link back to your site on themes. Again, the reward is more love from visitors and search engines.

The problem is that while many freelance web designers have extra designs in .psd format, most won’t have complete web pages or themes readily available. This may mean a significant time investment to make it worthwhile to the community.

Save For Inspiration

The quickest and surest solution is to file designs away for future inspiration. When designers get stuck, we tend to go to the web for inspirational galleries. Why not have an additional source of inspiration on your own hard drive? Create a folder specifically for your best unused designs. These can serve as a springboard for new ideas or even used as a framework for future designs.

Other Ideas

These are just three ideas to consider for your unused logo or web designs. Do you have experience with any of these methods? What do you do with your unused designs?

The new web2_0 property in CSS3 can transform entire drab websites into web 2.0 masterpieces in seconds! Actually, this could be the feature to make designers reconsider Internet Explorer.

Quality content should be the focus of any website. It is necessary for search engines but more especially end users. A solid design isn’t complete without content of equal quality. However, design remains an essential part for any website, which is why I suggest the following amendment to everyone’s favorite phrase: content is King, design is Queen. Now lets take the metaphor to absolutely ridiculously lengths.

The Perfect Royal Marriage

It’s always great to have good content or design grace your website. When they’re married, however, they become much more powerful than the sum of their parts.

Design, a loving queen and wife, does what she can for her husband. In the perfect web kingdom she takes care of many things that most of the villagers (visitors) never even think about, from the infrastructure to general beautifying. The kingdom (site) looks great, certainly, but there’s a purpose behind her decorating. The roads (navigation) are orderly and well-marked. Nobody ever has to stop to think twice about which road to take to arrive at their destination. She even uses a grid system for the kingdom’s infrastructure! Design knows that visitors from afar will want to speak to her husband and facilitates this process. On occasion a visitor will specifically thank her for her work, but she is satisfied knowing that foreigners have an easy and safe time in her kingdom.

Content, for his part, takes care of most of the grunt work. He is well-groomed and dressed, but not extravagant. When visitors come, he does his best to keep them engaged and informed. He is formal and professional. Sometimes, however, he is forced to shout at them to get their attention. Other times, a whisper is just as effective. He is grateful for everything his wife does. He has been known to etch her name and address in the Southeast (bottom right) corner of the kingdom, but that’s just weird.

When they’re both happy, so are the visitors. They can easily reach their King and the kingdom’s appearance is oddly comforting.

Design Separated From Content

Where does this metaphor put services like 99designs?

Unfortunately, however, the marriage weakens. Maybe the king has been flirting with a new Design, instead of just realigning with his current Design. Maybe the queen puts up signs that have “404″ scrawled on them all around the kingdom, turning foreigners away. Whatever the cause, sometimes the relationship falters. Design without Content finds herself without purpose, tries to make everything look beautiful, but ends up having to resort to placing “Kingdom in Construction” signs about the entrance. She is distressed to find that no foreigners care how beautiful her signs are without having Content around.

Content Without Design

Content sometimes tries to find a Design that is not so high-maintenance (expensive), and finds himself disappointed at every turn. Without a quality Design, foreigners struggle to even find Content. One Design even put a moat around the kingdom that makes it impossible to enter unless you have the latest version of a rowboat, though they can be rented from the far away kingdom of Adobe (take three guesses at that metaphor…). Other Designs create crooked streets and make it impossible to find Content. And no amount of “glossiness” or “beta” can fix that.

Family Reunion

Your turn to stretch it even further! Who else is in the family tree? What else fits into the metaphor? Is IE6 the jaded uncle who tries to destroy the kingdom (or is it really the devil)? Is Twitter the carrier pigeon restricted to messages that weigh less than 140 characters?

More Content

My previous portfolio site had the virtue of simplicity. It had only one page and said only what it needed to. Unfortunately, the simplicity in structure didn’t carry into quick loading times or easy-to-read content. In effect, it was a stupid simplicity. My goal with this redesign was to improve upon the positive aspects of the previous design while adding more (and better) content and features. By making the design complement – and not compete with – the content, I was aiming for a much smarter simplicity.

A cleaner, easier-to-read design with more emphasis on content.

This iteration includes much more content. Spreading it across multiple pages helps make the information easier to find and keeps each page less cluttered. I added an “about” page, more information about my services, and this fancy WordPress-powered blog. Switching to a multi-page portfolio will make it easier for me to add and manage content in the future without having to worry about compromising the delicate balance of a single page portfolio. The ability to add more content without jeopardizing ease of access should also increase search engine optimization. Furthermore, I wanted to incorporate a blog with my redesign, and implementing a blog on a single page portfolio can detract from the main focus on previous work.

A Fresh Coat of Paint

In order to achieve the aforementioned goals of better content, I ultimately decided I needed to redesign completely. Although I kept a similar color palette (even reusing the icon images and the brown diamond background), I re-evaluated everything.

Ultimately, the primary goal of my portfolio site is to generate leads. This made me realize the importance of showcasing my previous work. Rather than trying to be too “artsy” by displaying obscure thumbnails of my work, I opted for a single screenshot of each design. I want potential clients to be able to take in my work instantly without jumping any hurdles. I have found that when you make a visitor jump hurdles, he or she will trip, fall, and run away crying to your competitor’s website.

Here are some specific design changes:

• CSS Sprite Navigation – Decreases amount of server requests and also ensures that there is no delay for the hover images to load. On my end it makes them easier to edit.
• More Careful Attention to Color – I kept virtually the same color palette as before but used them more sparingly to increase the impact of each color.
• CSS3 Enhancements – If you’re using a compatible browser, you’ll notice I sprinkled in some css3 to my web design. In the title of the article I used the border-radius property to round off the edges, a subtle text-shadow to make the text pop a little more, and rgba to make the blue border partially transparent. None of these make or break an entire design, but I find that sometimes even the smallest details can have a large impact.

Subtle transparency, rounded corners, and text-shadow for compatible browsers.

Fun fact: I picked the color scheme for my website based on the colors of my swim suit. Design inspiration is everywhere!

More Me

The new About Me page and pictures of me on the site should hopefully give the site more of a personal feel. I haven’t run any official tests, but I’m hoping the results will mirror the findings of Think Vitamin. At the very least, showing a little more of me gives the site a bit of a personal feel. Hopefully it tricks you into believing proves that there is a human behind this site.

The Blog

“Why are you blogging?” I hear you asking. “You think you can add something to the design community? Surely you can’t be serious!” Well, maybe not, but how else can I set myself up for Airplane! references whenever I want? Secondary reasons I decided to start a blog include:

• Conversation – The web design community is full of insights and wisdom. If my posts have any value, it will probably be mostly due to conversation in the comments. For that reason, I have elected to format posts so that the articles melt into the comment section.
• Increase Personal Understanding – I have found writing can be cathartic for me. If I can’t decide my stance on an issue, I may write an entry and just see where I end up. Hopefully this blog will be enlightening for me and other web designers.
• Search Engine Optimization – Regularly updated content, increase in keywords, and maybe a few more inbound links are all ingredients for more respect from search engines and all served by a well-written blog.

The Future

In my mind, a portfolio should be a work in progress if only for updating work samples. I don’t doubt that I will tweak a design element or two, but it is “completed” for now. I will add to my blog as I feel the need or desire to write an article on a particular subject.

Discuss!

What do you think of my new portfolio design? If you have a portfolio, what causes you to redesign yours? Old one feels stale? Lack of desirable functionality? Nothing better to do? What are your thoughts on single- vs. multi-page page design portfolios? Why do you (or don’t you) blog?