Recently I've been playing about with some of the potential of CSS2. Unfortunately many of the tricks I've been wanting to try don't work in certain browsers. But if you decide to be satisfied with the less capable browers getting a reduced user experience things get nicer.

This is a quote. Nice isn't it?

One thing I like is code to create boxes with image based borders, normally rounded but this will apply with most image based bordering. One problem with most of the techniques people have put forward is they either require very specific markup to work. Or they require you to add extra structural elements just to place images in.

  1. Fully CSS compliant.
  2. Degrades gracefully.
  3. No special markup required.
  4. Future proof.

I wanted a method to easily say; "This should have an image border" without having to do more than assign a class. For demonstration I thought floating quote boxes would be nice. I've seen these on a few sites so quickly whipped up a basic image and set about to implement the plan.


.quote {
  float: left;
  width: 30%;
  max-width: 500px;
  background: #8695d4;
  color: #fff;
  font-weight: bold;
  font-style: italic;
  font-size: 150%;
  text-align: center; 
  padding: 5px 10px;
  margin: 10px;
}
.quote:before, .quote:after {
  display: block;
  height: 80px;
  width: auto;
  text-align: left;
}
.quote:before {
  content: url( quote-tl.png );
  background: url( quote-t.png ) no-repeat top right ;
  margin: -5px -10px 0px -10px;
}
.quote:after {
   content: url( quote-bl.png );
  background: url( quote-b.png ) no-repeat top right ;
  margin: 0px -10px -5px -10px;
}

.second {
  float: right !important;
}