Posts made in September, 2013


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