If you like the Octopus Engine, want to use it or just want to mess around, feel free to download the package which contains the HTML, CSS, Javascript and PSD's for all the demos and more! The Octopus Engine and the included imagepacks are free to use but a link back would be appreciated!
The Octopus Engine Expansion Pack features an exotic new addon - Jellyfish - which uses transparency and borders to emulte a soft inner shadow. Also included are a variety of new image packs.
Dragon Labs & Gilbert Hyatt proudly present... The Octopus Engine!
The Octopus Engine attempts to unify techniques for rounded corners, drop shadows, custom borders and faux columns, all in one pretty package. It’s an all-in-one, one in all approach, encompassing whatever effects one needs.
The advantages of this technique are that you can create custom corners, use repeating borders and scale vertically and horizontally. Unlike most rounded corner or drop shadow techniques, with this you can also do inner glows, or similar effects. Since this is a true background, the effects can extend underneath the text.
One problem with most similar techniques is that the content cannot start till the corner (which includes the shadow edge) is finished. This leads to rather abrupt corner shadows, while Octopus Engine lets the transitions be as smooth as they need to. Also, I would like to point out that though there are other methods out there, most of them are real good. I am aware of Roger Johansson's superb technique, and actually did try to use it a long time ago for Dragon Labs. What happened? It just wasn't suitable for what I needed to do - the content couldn't start from the top without the corners looking very choppy.
The Octopus Engine's elegance lies in the fact that it can be adapted to just about any style and configuration that you want. It is ultimate in flexibility and the possibilities are endless. It is also very simple and easy to implement, CSS or web novices should have no trouble.
If you want to see what the Octopus Engine can allow you to do, check out the demos, which are also at the end of the article.
I've tested it in Firefox 1.5, Opera, IE6, IE5 and many others. I'm pretty sure it works universally but if you see a bug, please let me know!
But enough talk! Let's get to the good stuff..
First we’re going to set up the HTML required. We need 8 divs nested around the div which we want to style. The innermost (9th) div can have automatic dimensions or defined. The 8 octopus divs wrapping around it will resize to wrap around it, making the effect vertically and horizontally scalable.
Now we want to name them. We’ll use the compass rose to help us here. The corners will be named northeast (ne), southeast (se), southwest (sw) and northwest (northwest) - respectively clockwise. (For those of you who don't know your cardinal directions, a simple pnemonic device is "Never Eat Sour Watermelon", going clockwise). The divs for the sides will be north, south, east and west. This way it’ll be a lot easier to relate to which div does what. We’ll use classes so that we can reuse the effect on the site.
<div class="octopus">
<div class="north">
<div class="east">
<div class="south">
<div class="west">
<div class="ne">
<div class="se">
<div class="sw">
<div class="nw">
Content...
</div></div></div></div></div></div></div></div>
</div>
Now the order is somewhat important. We went clockwise just for convention's sake, but it is important that the corners (ne,se,sw..) come after (nested within) the others. This is because the innermost div comes up on top, and then our precious corners would be covered up!
If you want to use a fixed width or a fixed height, or perhaps a very simple style, you may not need all this markup. We will go over that in the variants at the end of this article.
Here is where you need to use all your creativity and imagination. I recommend creating the desired effect in Photoshop first. Blending options can be used for drop shadows and glows. The Rounded Rectangle tool (U) is good for rounded corners. Though borders can be done with CSS, you can also make them with Photoshop. Unless you’re using web safe colors, the image and browser rendered colors look a little different.
After we’ve created what we want it to look like, we are ready to slice it up. The corners should contain all the other effects so that they merge smoothly. As for the four sides, the pattern repeats so we only need 1 pixel thin slices.
If you are familiar with slicing, you may skip this minisection. We use the Slice Tool (K) to create slices, quite unlike the crop tool. It doesn’t destroy the rest of the image, but merely divides it. When you save the file, the slices are each an image of their own. You can also generate the html which puts all the slices together, with tables or CSS.
After making a slice, we can right click it and rename it. When we make one slice, Photoshop automatically makes a few more, to keep things in a grid. Though it is not necessary, you can edit the extra slices to output no image. That way, when you save your images for the web, It will only output the 8 images you need. If not, no big deal. You will get a few extra junk slices, and the eight which you need. Feel free to download the PSD, which is already sliced as a sample.
Now that we have our images, we have to apply them to our HTML by summoning our CSS lore. This is the crux of the design.
What we’re going to do is position each image to its appropriate corner. The divs cascade and create an onion skin, each successive div layered over the others. You’ll note that the corners come last. First we build the four sides, and then patch the edges with our cornerpeices.
.north { background: url(north.png) repeat-x top; }
.east { background: url(east.png) repeat-y right; }
.south { background: url(south.png) repeat-x bottom; }
.west { background: url(west.png) repeat-y left; }
.ne { background: url(ne.png) no-repeat top right; }
.se { background: url(se.png) no-repeat bottom right; }
.sw { background: url(sw.png) no-repeat bottom left; }
.nw { background: url(nw.png) no-repeat top left; }
That is pretty much all the CSS markup we're going to need. As you can see, it's very simple. If necessary, we can add a little padding later on. The last element that we can style is the innermost div [class="octopus"]. We can make it fixed width, or height. However, if we want to use a percentage, we have to make the outermost div [class="north"] a percentage value. That is because a percentage uses its parent element's width, and if applied to the Octopus div, it just wouldn't work.
The Dragon Labs homepage uses a minimum and maximum width, along with a percentage value on the north tentacle to scale to the browser viewport. Now we'll illustrate some examples.
It is possible that some of this is overkill for your purposes. No problem, taking things out is always easy than adding things.
A fixed width box is much easier because the north and south section and the corners all go into two images, one for the north and one for the south. Then all is needed is one image, for east and west. You can have a faux column, specially recommended for the thinner columns, or those with details in the center. Alternately, you can have a small image repeating for the left and right side, but merged into one and used by using different background-position properties. Either way, with a fixed width, the design can be reduced to only three images.
<div class="octopus">
<div class="faux">
<div class="north">
<div class="south">
Your Content Goes Here
</div></div></div></div>
.octopus { width: 300px /* Can be any value, as long as it is the same as the image size */
.octopus .faux { background: url(faux.png) repeat-y center; }
.octopus .north { background: url(north.png) repeat-x top; }
.octopus .south { background: url(south.png) repeat-x bottom; }
Though this is a more rare case, a fixed height box would use exactly the same implementation as fixed width, except of course the vertical and horizontal components would be reversed.
With a dropshadow applied to the lower right, we only need half the design. North, West and NW can be discarded. You want to use a browser safe color for this, though, because we will be aligning HTML borders over the images. We'll line up the border so that it overlaps the shadow that we have - calibrate it using the padding on div[class="sw"]. This technique is also known as onion skinning.
<div class="octopus">
<div class="east">
<div class="south">
<div class="ne">
<div class="se">
<div class="sw">
<div class="border">
Your Content Goes Here
</div></div></div></div></div></div></div>
.east { background: url(east.png) repeat-y right; }
.south { background: url(south.png) repeat-x bottom; }
.ne { background: url(ne.png) no-repeat top right; }
.se { background: url(se.png) no-repeat bottom right; }
.sw { background: url(sw.png) no-repeat bottom left; padding: 9px;}
.border{ border: 1px solid #acacac; padding: 15px;}
If you are fanatic about having semantically pristine code, and don't want it cluttered with extra divs, you can use Javascript to dynamically add them. However, one should note that the javascript in this case would amount to more characters (and filesize) than just a few extra divs. Also, an external javascript file would cause another server request. Using the extra divs only comes out to around 200 characters. Therefore, using Javascript only saves filesize if you implement it frequently, . That said, having clean code is quite important so the javascript is reccomended.
We'll use the Javascript to add in the 8 (or however many, we'll have one for fixed width and one for drop shadows also) divs.
<div class="octopus">
Your Content Goes Here
</div><
Note that the CSS is exactly the same. It is as if the divs were still in HTML, only they are being dynamically added through the use of a javascript function. I must confess I don't know much about Javascript, so my friend Gilbert Hyatt set it up for me.
function addEvent(obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
function initOctopus() {
classTree = new Array(3);
classTree[0] = ["north","east","south","west","ne","se","sw","nw"];
classTree[1] = ["faux","north","south"];
classTree[2] = ["north", "east", "west", "south"];
classNames = ['octopus', 'squid', 'swordfish'];
tempdivs = [];
divs = document.getElementsByTagName('div');
for (i=0;i<divs.length;i++) {
for (j=0; j<3; j++) {
cdiv = divs[i];
if (cdiv.className.indexOf(classNames[j]) > -1) {
tempinner = cdiv.innerHTML;
cdiv.innerHTML = "";
prevdiv = cdiv;
for (a=0; a<classTree[j].length; a++) {
tempdivs[a] = document.createElement('div');
tempdivs[a].className = classTree[j][a];
prevdiv.appendChild(tempdivs[a]);
prevdiv = tempdivs[a];
}
prevdiv.innerHTML = tempinner;
}
}
}
}
if (document.getElementById && document.createElement) { addEvent(window, 'load', initOctopus); }
And add this to your header...
<script src="octopus.js" type="text/javascript"></script>
You can download it at Octopus.js or get it in the source package, which contains all the javascript, html and psd's.
The javascript has three parts. If you have a classname of Octopus, it adds the standard eight divs. If you have a classname of squid, it uses the 3 div fixed-width variant and 'swordfish' gives the onion skin drop shadows! Just make sure your CSS is setup correctly!
Here are a few demos of the Octopus Engine in action! Additionally, I have created a Zip archive with all the source code and PSD's of the demos for your experimentation! Feel free to use them on your site. A link back to this article or to my site would be appreciated!
Another article worth reading, which may be better for some of your needs is Roger Johansson's Transparent custom corners and borders. It's main advantage is that it supports transparency. In my method, which uses onion skinning / layering, transparency would break the design.
If you want to leave a comment, head on down to my friend Whalesalad's, where we have a commenting system setup...
