Thursday 8 March 2012

ROUNDED CORNERS AND SHADOWED BOXES


CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 — and without any tables or extra mark-up.
Of course, rounded borders and shadows will be much simpler with CSS3. For example, to give a paragraph a thick red border with rounded corners, you would need just two lines of CSS3 similar to this:
P { border: solid thick red;
    border-radius: 1em }
And to add a blurry drop shadow half an em below and to the right of the paragraph, just one line would be enough:
P { box-shadow: black 0.5em 0.5em 0.3em }
(You can try here if it works already.) But if you need them now and you don't mind the complexity and lack of flexibility, you can use the technique below. At the very least it will be a nice test for buggy browsers…

FIVE IMAGES ON ONE ELEMENT

The main trick is to use generated content (':before' and ':after') to put four extra images on an element. The ':before' pseudo-element can have a background and a foreground image, the ':after' pseudo-element also, and the element itself can have a background, for a total of five images.
We create five PNG images and put them in the four corners and against the right edge of the element. Here are the images:
top left corner: 
top left corner
top edge and top right corner: 
top right corner
middle part and right edge: 
background and right edge
bottom left corner: 
bottom left corner
bottom edge and bottom right corner: 
bottom and bottom left corner
And here are the CSS rules to position them:
blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote:before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote:after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }
Since our background image is 620px wide, we can't allow boxes wider than 620px, without getting gaps. That's why the 'max-width' property is there. The 'display: block' property is needed to make sure the generated content forms boxes of its own above and below the main content, instead of being inserted on the first and last line. The 'line-height: 0' makes sure there is no room for left open for ascenders and descenders above and below the images in the 'content' property.

THE RESULT

And here is how it looks:
Do you see a pale green box with rounded corners and a drop shadow against a white background? If not, your browser isn't handling the generated content correctly (or maybe not at all).
The HTML source is really no more than it should be:
<blockquote>
<p>Do you see a pale green box with rounded corners
and a drop shadow against a white background? If not,
your browser isn't handling the generated content
correctly (or maybe not at all).
</blockquote>

No comments:

Post a Comment