|
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. This page was inspired by one created by Arve Bersvendsen. He has many more interesting CSS demos. 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:
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:
Screenshot/Bild:
|
