You can do far simpler than needing to having 9 images. The technique is inspired on sliding doors: where you have 2 nested boxes that let peep the outer on eon one side and the inner onne keeps the other side. As in image you need a really big box, larger than anything you'll ever put in it. Don't worry: compression will keep the files size small enough and loading faster than any 9 individual images will do. Next in your html you need 4 box nested so we can make them slide so that each has a corner visible. e.g.:
<div class="boxbr">
<div class="boxtl">
<div class="boxtr">
</div>
</div>
<div class="boxbl">
Hello!
</div>
</div>
|
|
Notice how I nest the boxes, I need them to slide in each other so they each keep one corner.
The naming I use here is to indicate the corner they will end up. Not a very good naming convention but since we'll need extra elements in the html till we have css3, there's always goign to be pollution in the html using this. Notice the two top ones not having content at all, and ready to slide left/right. They will keep the top and the bottom will be made up out of the outer one sliding with the one having the content itself. Then we'll also let the top and bottom slide just as well. Right now those boxes don't do much yet. We'll need to decide how much "border" we need (it depends on the image itself). Let's assume for this example 20px will do fine. For now we give each of these a color (it's much easier that way than having the eventual image already in there.) So we start from:
.boxtl {
background-color: blue;
}
.boxbr {
background-color: green;
}
.boxtr {
background-color: red;
}
.boxbl {
background-color: yellow;
}
|
|
Not much to look at yet is it ? The easiest one to make pop out is the red top-right one: let's give it some height. It'll stretch the top left one as well in one go. To make the top-left one show a bit we give it some padding-left shifting the top-right one to the right side. So now we need to let the bottom right one some space of it's own and make sure the text in the yellow bottom left one isn't in the corner.
All we need is some margin and padding.
* {
margin: 0;
padding: 0;
}
.boxtl {
background-color: blue;
padding-left: 20px;
}
.boxbr {
background-color: green;
}
.boxtr {
background-color: red;
height: 20px;
}
.boxbl {
background-color: yellow;
margin-right: 20px;
padding: 0 0 20px 20px;
}
|
|
Let's try it at this point in the stardards compliant browsers: works great. Let's also try it in IE6 and IE7 before we put in the images in the background as it's easier to position it all perfectly with colors than with images. All checks out in firefox, opera, safari, IE6 and IE7. No conditional comments needed for IE (that's been a while since I could say that!) So then we grab our image and plaster it in as background instead of the colors, choosing the right corner to align it to each time. This yields:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.boxtl {
background: url(image.jpg) no-repeat top left;
padding-left: 20px;
}
.boxbr {
background: url(image.jpg) no-repeat bottom right;
}
.boxtr {
background: url(image.jpg) no-repeat top right;
height: 20px;
}
.boxbl {
background: url(image.jpg) no-repeat bottom left;
margin-right: 20px;
padding: 0 0 20px 20px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="boxbr">
<div class="boxtl">
<div class="boxtr">
</div>
</div>
<div class="boxbl">
Hello!
</div>
</div>
</div>
</body>
</html>
|
|
Enjoy! Oh there is one drawback: no transparent corners, you need to have the right background color in the image itself (the other parts of the box are under those corners and will shine through). You can give .boxbr a width as needed.
| 
