Octopus Engine
Posted 2 years, 8 months ago at 2:03 am. 34 comments
By far one of the best shadowing techniques out on the web right now, this tutorial will get your site looking better than ever. Always wanted to get those ugly square boxes nice and rounded, maybe with a nice shadow? Or even the entire wrapper of your site? Have you ever wanted to have them scale perfectly no matter what the resolution or size?
I have an answer for you, The Octopus Engine. Using a combination of very small and fast loading images, with simple CSS and XHTML, you can wrap any box in a gorgeous drop shadow or glow. The article has multiple demonstrations and a download including all the demos, photoshop files, xhtml, and css.
Check it out here, you definitly want to add this to your CSS toolbox. Also note, there is a JS version in the works to decrease the amount of XHTML and improve overall efficiency.
This Is one of the best ways to accomplish this,
But it lacks one thing -
You cannot use transparent corners because the Sides and top extend along the whole side.
anyone figure out how to do this?
Another solution is to utilize a CSS3 feature, multiple background images. Safari atleast supports this. Advantage is that only one DIV is required.
The first example would then become:
…content goes here …
CSS becomes:
.octopus {
background-image: url(north.png),url(east.png),url(south.png),url(west.png),url(west.png),url(ne.png),url(se.png),url(sw.png),url(nw.png);
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y, no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top, right, bottom, left, top right, bottom right, bottom left, top left; }
Details of this are here:
http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering
Edit: DIV tags disappeared in above comment, it should read line this:
The first example would then become:
<div class=”octopus”>
…content goes here …
</div>
David, that sounds like what this truly needs to be. Anyone know what the current status is on CSS3 support right now?
Suggestion:
Remember to set the background color of your body tag to #FFF. It will make all of your hard work on your round corners and shadows look so much prettier.
Nice work.
CSS3 truly would be the best solution, as it requires only one or containing element. In fact, you can specify stretching or repeating borders, even demanding, for example, “the top border should repeat, yet stretch so only a whole number of repetitions occur.”
Unfortunately CSS3 Backgrounds and Borders remains in “Working Draft.”
In fact, they weren’t sure, last I knew, whether to have authors specify 8 images or just 1, which would be split into 8 (or 9?) by the browser.
Read the official spec:
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image
MS has said IE7 won’t support CSS3 because it is not final yet.
So we can’t use CSS3 borders until approximately 2013 A.D.
I guess I should have explained the date:
MSIE7 comes out “late 2006″ meaning July 2007.
It will take at least four more years until MSIE8 comes out (coinciding with Windows NX, meaning either Next or Not LinuX), including CSS3 support. However, when IE8 is released in 2011, it will have buggy, incomplete support.
Thus we’ll wait until Windows NX Service Pack 5, in 2013, to fix CSS3 support.
Yes, CSS3 is great, but then we can’t use it yet so till then we have to use these dirty CSS and javascript tricks till we can (it’ll be a while).
While they were making it so you could use one bg image, why not just make it so you could use multiple in the first place… It’s a crazy world I tell you!
Having the final step as
…content goes here …
would be immpressive.
Perfect!
I mean I was going to builde something similar to morrow and found this today. Time saved :)
Yeah I still don’t get why everyone at digg is bagging on this. Didn’t their mommas ever teach em, “If you can’t say something nice, don’t say anything at all”?
I happen to think it works great. It needs to be perfected of course to decrease the amount of XHTML markup, but that will definitly be coming soon. Dragon Labs and Whale Salad are gonna be doing some great things real soon, so keep in touch!
@Leon, that would sort of be impossible because the browser would have no way of diferentiating between the different segments of a site. If you just put down some content the browser would not know where or how to render it. I can’t wait for CSS3 or even being able to create our own tags such as, <content> </content> or <navbar> </navbar>.
@Michael, I’m not sure about this but isn’t the point of XML that you can create your own tags? Or well, have your own custom markup language?… I’ve never seen it done though. Oh well
You didn’t test this very well in Opera. I’m using 8.51 and the demo is completely unusable. It keeps adding divs inside it for infinity. When divs can no longer fit inside, it isn’t even usable with CSS turned off, as it completely takes away the content.
I am using Opera and I thought this was some sort of novelty site, what with those infinite divs that C.S. points out.
Same problem with my Opera 8.5
what a waste of time and effort. ever hear of ‘divitis’ ? this is exactly opposite of the entire purpose of semantic markup.
Yes there is some wierd stuff going on in Opera. We have found out why it does that (glitch in Opera) and are working on getting it fixed right away.
Sorry everyone… the opera bug was due to a small glitch in the javascript. it’s fixed now!
I tried to encapsulate an ASP.Net TreeView within a div tag and surrounded it with the Octopus tags. Only part of the TreeView had a box around it - I tried all kinds of combinations but could not get it to work. The TreeView had a SiteMap as a DataSource.
VS: I’m not sure I get what you’re trying to do… perhaps if you could explain more or show your code. It sounds like your content isn’t a block level element or something (are you using absolute positioning?). Or perhaps it is floated… in which case I would advise you use the Clearfix, or clear the last element.
Excellent work! I used something very similar to this on my own site, slightly different implementation, yours is cleaner though, good job. http://nodelist.com/js/guifuncs.js
Ok, so I have this all set up and I really dig it. My only problem is that in using the liquid column, the box breaks if it gets too tall. The outer frame stays together OK, but the inside begins to open up at the bottom, showing the color of the page underneath it.
I know this has something to do with my image slices, because I put them into the “seahorse” demo, and it has the same effect as it does on my page… Truly strange.
I don’t know if this site can show images or not, but I’ll try to include it here. If not, you can see the image at http://truepersonalgrowth.com/octopusengine.tiff
[img]http://truepersonalgrowth.com/octopusengine.tiff[/img]
Any help with this would be very appreciated.
sorry, this was one of those “too tired to be working” kind of errors. My north slice was a vertical slice of the whole photoshop box - so when the box on my web page would get taller than the original in photoshop, I would start to see the bottom of my orignial box again…
I have no idea if that makes sense, but the problem is fixed. Sorry for taking up space here on something silly like this.
I really appreciate that you’ve put this out here. It has helped me immensely!
Thanks for sharing.
This is simple…………and as for the semantics nazis that are ever more evident, stomping across the net in their size 10 jackboots, get real………..if we don’t bend the rules a little we get nowhere.
This semantics business, is becoming as boring as political correctness in the real world.
This technique,
works………and is simple and easy to implement.
What more could you want.
First I want to say thank you for publishing this tutorial! I’m not normally a web programmer or designer so it really helped me with my site design!
I do have one question though. My boxes look great on every browser that I test, with the exception of netscape on the pc. Netscape wants to break the boxes. Fortunately, it breaks them all in the same way. The top is completely gone, and showing the pages background color. And, the right side has a gap between the contents and the frame image, which also shows the background color.
Anyone have any ideas?
I have to agree with (24) Giuliano… Symantic markup is nice to strive for, but when you want to acieve a balance of nice asthetics as well you needto make some sacrifices to symantics. Look at the sites of the John Allsops of the industry… I mean, as much as I love their discipleship to standards compliance their websites are simply ugly as hell. And as ugly as John Allsops site is it is virtually unusable becasue it’s a headache to look at. So how then is symantic markup any sort of benefit?
Given time we will be able to move closer and closer to symantics, but guess what, the Octopus engine maintained well-formedness and your code can still validate… and its not using tables for layout like 98% of the hypocrites bashing this engine are turning around and doing for their clients & themselves… this includes a one Mr. John Allsop again… rethink your forms AllsLop…
P.S. (screw Opera anyway, Opera sucks soooo bad and anyone who uses it is simply not worth “fixing” anything for. They are the type of people that complain that the hamburger in the picture has 4 pickels and theirs only has 3… get over yourselves already and download Firefox, go ahead.. we wont watch.)
Anyone out there?
Found the Octopus Engine, and on first glance it seemed terrific. As I´m not that into round corners, it was the drop shadows that got me. Excellent!
However, I´m having serious problems getting the Javascript-version to work. What´s the proper syntax?!
content
What goes instead of the ???, “swordfish”? And does that insert the border aswell? When looking at octopus.js I don´t see any mentioning of the border (although I´m not the sharpest javascript-dude on the planet ;)
Extremely grateful for any help.
I like the way the octopus engine fluidly expands vertically if you increase the font size. I was wondering if it is possible to have it expand horizontally depending on how much text is contained inside of it (the way a would)?
I tried replacing div with span in the .js file but this makes the spacing of the bg images funny. Any suggestions?
Thanks
sry didnt realize html was turned on in these posts, edit to my last post: (the way a span would)
It does’nt work in Opera. Someone mentioned javascript fix. How can I find
this Opera fix .
Thanks
Q: “I was wondering if it is possible to have it expand horizontally depending on how much text is contained inside of it (the way a would)?”
A: If you have …Content…
Define .stretch’s width in terms of em, for example:
.stretch { width: 10em; }
Now you can make the text biggor or smaller and the div will expand and contract with it, because the width definition was in a relative unit.
True beginner here,
I was looking for a way to create rounded corners
and drop shadows and came across the octapus today.
I’m really impressed and appreciate your generosity
in making it available. I’ve just downloaded it.
I’ve never uploaded a script before and don’t even have
photo shop. Do I just put all the files in one folder
in my public html files on my server?
I would’nt mind just using the gifs you provided with
the download seeing as how I got nothing to slice with.
I know I should just get photo shop from adobe but this
8 year old pc w/ win98 doesn’t have the right reqs.
If it’s not asking too much could you please explain
to me how it should be set up on my server (as is) so
I can get a few sharks after some of the surfers out there.
By the way this 8 year old pc has IE6 and Firefox & also
the new YBrowser and your demos look good in all three too!
Appreciate any help you could lend.
Thanks, and Ill check back in soon.
Have your Octopus Engine working fine with one problem. When I print the page the shadows generated disappear.
Any ideas?
Octopus engine is very good