CSSborder-middle
20071021477
Borders belong on the edge of a box. They are called borders after all – two dimensional walls. But sometimes designs call for border-like aesthetics to run through the middle of a box. While background images can be centered to accomplish this task, it’s fun to destroy HTTP requests and images with CSS.
Horizontal rules
No, not hr’s this time. Problem:
- News site
- Home page has excerpts
- Each excerpt has a read more link, aligned to the right of the column
- The design includes a horizontal line from the left edge of the column to the left edge of the read more text
If the design of that horizontal line matches any combination of the CSS border properties, a combination of line-height and negative positioning along with a bottom border style can accomplish the task eliminating an extra image. See the example for HTML/CSS source. One image may not be much, but consider if there are four different color-coded news sections. Rather than four images, CSS can control the color. Or take a site like this where the color palette changes regularly. This provides a way to change this style without requiring image updates.
A new faux column
Beyond the horizontal application, some browsers allow a similar idea to be applied vertically mimicking the common faux column technique. It’s a bit more limited, finicky and browser picky (IE6 says no thanks) but may be a useful alternative somewhere.
Make something awesome
These examples of border-middle use are admittedly pretty limited in use but perhaps the basic idea could be applied elsewhere. Somewhere awesome.
Comments
Comment
The Header Should Always Point Home
f’ing CSS. seriously, is it not just a giant hack-fest?
Depending on whether the width of the “read more” link was consistent (which I guess it would have to be in this situation anyway) and the complexity of the border (which I assume is limited to the standard CSS borders) you could also use an inverted background image, so your white space is the image and the border color is determined by the background of the box. Is it slick? No. But in the situations you showed, it’s an alternative that still allows for a single image and varying colors.
Hack-fest indeed.
Inverted images work too – that’s how the fish/w2c works – but the goal was to avoid an image completely. But yeah, anything beyond lines and dots and dashes isn’t going to work anyway. And if the design had an icon next to the read more link you’d need the image anyway.
i’m seriously digging these colors that yer flickr photo is producing by the way.
After thinking more:
Inverted border image in p.readmore or whatever the “read more” container is. With a horizontal repeat. Then I’d give the the readmore link itself a white background (and the necessary icon) and the appropriate padding to overlap and essentially end the “border”. I think I’m putting too much thought into this, but it’s easier done than said.
My favorite Flickr’d colors are attached to Exploding Throat Veins.
Most definitely easier done and most definitely more thinking than required, but again, the point was to destroy as many HTTP requests as possible by using CSS to render design elements rather than images. Dots and dashes and lines.
yeah those colors are rad too. i don’t know if i’ve said it before, but this whole “flickr image-generated colors” thing is a pretty nifty concept.
Many thanks. I don’t know if I’ve said it before, but I’m pretty much addicted to all things Flickr. And Google Maps.