The Hickensian

25.04.05

Technorati Tags boxmodel, cc, webstandards

3D Box Model is now Creative Commons

Since I posted the original 3D CSS Box Model diagram, I’ve had a lot of requests from people who want to re-use and/or adapt it. I always intended that it be free for the taking if someone found it useful, but people seem to like the security of a legal document. So its now released under a Creative Commons license to do with as you wish, and has been moved to a more permanent location at http://www.hicksdesign.co.uk/3dboxmodel.

Also, as Dunstan pointed out to me, the content is actually on top the of the border, rather than underneath it. You have to do some negative margin tom-foolery to see this, but I’ve updated the original diagram to take this into account.

Comments | RSS

No.1

J.D. Myers said 1531 days ago:

Thanks Jon! This is a great image to help one visualize how all the pieces fit together. Very helpful when trying to explain it to people new to CSS.

No.2

Chris J. Davis said 1531 days ago:

Very nice Jon, and a very shiny contribution to the community.

No.3

Luke Barrow said 1531 days ago:

Nice work. I haven’t seen anything like this anywhere else. You’ve filled a gap in knowledge that’s hard to find. Thanks for that. One little thing: There is a typo on your Box Model page, it says “fee free” instead of “feel free”.

No.4

Matthew said 1531 days ago:

I have a copy of this stuck on various walls around me

No.5

Antoine said 1531 days ago:

You’ve so much request about this work ? For translation for example :mrgreen:...

Thanks for your contributions to the community :)

No.6

Josh said 1531 days ago:

Awesome diagram. Something useful for a newbie like me. Keep up the good work.

No.7

tom said 1530 days ago:

awesome! Now I can better explain about css (margin, padding, general layout, etc.) with this diagram to people in my school who just started html. Nice. Thanks Jon. :)

No.8

Justin P. said 1530 days ago:

First I see that the 3D Box Model is CC’d and I say oh cool, that’s a neat diagram. Then I’m off reading a great write-up by Douglas about using the z-index for IR. Then I’m off to his site and I stumble upon his interactive version of the 3D Box Model. Then suddenly I’m back here (12 hours later) looking closer at your Box Model. All that and I’ve never seen it before today…how funny. Very useful visual aid, btw :)