Graphics


These are made with 1 image that contains multiple versions of the breadcrumbs. They work no matter how long each breadcrumb is, within about 1000px or so.  Very lightweight code and validates in XHTML 1.0 Strict!  Best of all, it’s cross-browser friendly! You can download the PSD and the PNG files here: PNG File Photoshop File (layered) Here’s the code for the demo above: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS Breadcrumbs</title> <style> #breadcrumbs{background:url(http://430designs.com/snippit/breadcrumbs.png) no-repeat right 0px;text-decoration:none;color:#f1f1f1;font-size:8px;float:left;margin:5px 0 5px 5px} #breadcrumbs a{background:url(http://430designs.com/snippit/breadcrumbs.png) no-repeat right 0px;text-decoration:none;font-size:11px;padding:5px 16px 5px 0px;display:inline-block}#breadcrumbs .begin{background:url(http://430designs.com/snippit/breadcrumbs.png) no-repeat left -550px;width:8px;height:26px;float:left}#breadcrumbs a:hover{text-decoration:underline} #breadcrumbs span.crumb-arrow{color:#fff;font-size:1px} </style> </head> <body> <div id="breadcrumbs"> <div class="begin"> </div> <a href="#">Home</a> <span class="crumb-arrow">&gt;</span> <a href="#">Category</a> <span class="crumb-arrow">&gt;</span> <a href="#">Category 2</a> <span class="crumb-arrow">&gt;</span> <a href="#">Really super long breadcrumb with a lot of text</a> <span class="crumb-arrow">&gt;</span> <a href=""# >Final Breadcrumb</a> <div style="clear:both"></div> </div> </body> </html> Feel free to improve upon them if you’d...

Read More

This was a graphic I wanted to do as a result of reading a post with creative 404 or “Web page not found” pages. I took a Google map and some stock images and created all the dynamic lighting and shadows...

Read More

This was a very fun tutorial to follow. I kind of modified it a little bit and didn’t include everything that was in the original one. But I did create some interesting effects. Original tutorial is here...

Read More

I’ve always been fascinated by abstract scenes and art work.  This was the end product of a tutorial I followed...

Read More

This was just a high-contrast piece that I was going to use as a business card at one point.

Read More

I love the Detroit backdrop and just decided to throw a 430 on the Detroit river. A little reflection and some water effects and we’re in...

Read More