Breadcrumb Navigation with CSS Triangles. Did you know you can make triangles with pure CSS? It's pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more.
Often times these are just visual flourishes, undeserving of dedicated markup. Fortunately, pseduo elements are often a perfect fit. That is, using :before, :after, or both to create these block level elements and place the triangle. One neat use that came to mind in this vein: breadcrumb navigation. View Demo Download Files The HTML Markup Let's keep things as absolutely clean as possible, and go with a simple unordered list with a "breadcrumb" class: <ul class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">Vehicles</a></li><li><a href="#">Vans</a></li><li><a href="#">Camper Vans</a></li><li><a href="#">1989 VW Westfalia Vanagon</a></li></ul> The CSS. Case Study: Getting Hardboiled with CSS3 2D Transforms. This is part of a series of guest posts covering tips and tricks for working with CSS.
These techniques, along with web fonts, make rich interactive sites achievable with simple and accessible standards-based markup and CSS. Today’s guest post was written by Andy Clarke, author of Hardboiled Web Design. In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards. There are a number of transform properties we can use, including: translate: moves an element horizontally and verticallyskew: distorts an element horizontally and vertically (not covered in this article)rotate: rotates an elementscale: increases or decreases the size of an element The basic syntax for transforms is simple: transform: transform type(value); There’s no getting away from the fact that CSS transforms are an emerging standard.
Setting up the HTML <div class="vcard"><h3 class="fn">The Fat Man</h3><p>Private Investigation</p><p>$50 a day plus expenses. WebKit Clock. Type study: An all CSS button. This is part of a series of guest posts covering tips and tricks for working with fonts on the web. Today’s post was written by Dan Cederholm of SimpleBits. A few years ago I gave a talk about why a button made a great place to bring in type from a branding element (such as a logo).
My point was that if the type in your logo was an image, and stylish buttons were also often images, then why not align the fonts in both to bring some cohesiveness to the typography. This was probably four years ago, and we’ve come a long way since. Now, in certain situations, CSS can replace the inflexible image buttons we used in the past. Add on top of that the advances made in @font-face and you have yourself a powerful combination for creating a wide variety of interface elements that are reusable and will degrade well in older browsers. The button is also a great place to showcase many of the new CSS3 properties in one place, which is another reason I’m particularly taken with buttons at the moment.