CSS Box Model Info Graphic in 3D
I’ve never had a need to use any of Photoshop’s 3D features and probably never will, but the other day I decided to play with it a bit. The play resulted in this CSS Box Model info graphic.
CSS is a 2D medium and representing it’s box model in 3D was a little tricky. But I think it turned out pretty well. I am using one PNG graphic as a background image, and some CSS and jQuery for positioning and interactivity.
Margin - Clears an area around the border. The margin does not have a background color, and it is completely transparent.
Border - A border that lies around the padding and content. The border is affected by the background color of the box.
Padding - Clears an area around the content. The padding is affected by the background color of the box.
Content - The content of the box, where text and images appear.
-
margin: 12px;
-
border: 10px solid red;
-
padding: 8px;
-
width: 100px;height: 100px;
Go ahead and hover over some of the CSS property/value pairs above to see details.
