The following code will be used for educational purposes. It is to demonstrate various way that the box-shadow property can be used. Any feedback on areas where I have not used best practices would be great.

Working example

HTML:

<!DOCTYPE HTML>
<html>
<body>
<!-- Introduction to the text shadow property -->
<div class="container one">
</div>
<div class="container two">
</div>
<div class="container three">
</div>
</body>
</html>


CSS:

body{
background: #ccc;
margin: 0;
}
.container{
overflow: hidden;
}
.box{
background-color: #fff;
width: 500px;
height: 200px;
}
.left{
float: left;
}
.right{
float: right;
}
}
box-shadow: inset 0 0 10px black;
}
background: #F2F2F2;
box-shadow: inset 3px 3px 3px #BFBFBF, inset -3px -3px 3px #8C8C8C;
}
box-shadow: 0 20px 10px -10px rgba(150,150,150,0.8);
}
position: relative;
overflow:hidden;
}
content: "";
position: absolute;
z-index: 1;
width: 96%;
top: -15px;
height: 15px;
left: 2%;
}
content: "";
position: absolute;
z-index: 1;
width: 96%;
bottom: -15px;
height: 15px;
left: 2%;
}
position: relative;
overflow:hidden;
}
content: "";
position:absolute;
z-index: 1;
width:10px;
top: 5%;
height: 90%;
left: -10px;
}
content: "";
position:absolute;
z-index: 1;
width:15px;
top: 5%;
height: 96%;
right: -15px;
}

• One comment, more about the style than the code. Since your are demonstrating the shadows, I would: a) set the body background to white. Make clearer what is the shadow. b) set a distinct border on all the elements (may be blue, or green) make clearer when the shadow is inset or outset, and the relationship of it with the border
– vals
Feb 22 '14 at 21:15

they are all .box class.

I am thinking that you should get rid of the container divs and get rid of the .box class and give it to all divs because after you get rid of the container divs all the divs will be the boxes.

you should do one of those fancy HTML5 Tags for the content section instead of having a container classed div.

check this out, I have removed some tags and some CSS classes to make the code a little cleaner. the output is slightly different but I think this is a little bit better. if you need a width on the content you can add that as well.

what happens when the browser window is resized is that the boxes are now hugging the left and right sides of the content, if you want to keep it to two rows at the max you would just add a width to the content tag

UPDATE

I changed some more things to make this so that you could add more examples with ease, and so that it would be more view-able on mobile devices.

This is the New Version that I came up with

I removed the Left and Right Classes, and moved the float left into the Styling for the Div tags, this way the boxes will wrap the viewport is resized.

I also changed the size of the boxes.

I removed the container classes as they weren't needed.

I added the styling from the box class to the div's themselves.

I am apparently wrong about sizing the content tag that I created, maybe it's not proper HTML5 or I was doing something wrong.

Here is the code that I have after the changes that I made

<!DOCTYPE HTML>
<html>
<body>
<!-- Introduction to the text shadow property -->
<content>
</content
</body>
</html>


CSS

body{
background: #ccc;
margin: 0;
}
content{
width:1000px;
}
div {
background-color: #fff;
width: 500px;
height: 200px;
margin:15px;
}
.left{
float: left;
}
.right{
float: right;
}
}
box-shadow: inset 0 0 10px black;
}
background: #F2F2F2;
box-shadow: inset 3px 3px 3px #BFBFBF, inset -3px -3px 3px #8C8C8C;
}
box-shadow: 0 20px 10px -10px rgba(150,150,150,0.8);
}
position: relative;
overflow:hidden;
}
content: "";
position: absolute;
z-index: 1;
width: 96%;
top: -15px;
height: 15px;
left: 2%;
}
content: "";
position: absolute;
z-index: 1;
width: 96%;
bottom: -15px;
height: 15px;
left: 2%;
}
position: relative;
overflow:hidden;
}
content: "";
position:absolute;
z-index: 1;
width:10px;
top: 5%;
height: 90%;
left: -10px;
}
content: "";
position:absolute;
z-index: 1;
width:15px;
top: 5%;
height: 96%;
right: -15px;
}


Some other things that I noticed while pasting this new code is that you assign a z-index of 1 to some of your shadow styles and not to the others, I don't think that this is necessary for what you are doing here. the z-index defaults to 1 or 0 if I remember right, and that should be fine for what you are doing here so you don't even need to add that in there.

• Thanks for your feedback, very helpful. I like the simpler html and good point about the z-index. Feb 19 '14 at 17:01
• There is no content element. You probably mean the main element. It would be better to have the general styling on a shadow-box class instead of div. Feb 20 '14 at 8:13
• I agree with you on the shadow-box class, except for this is just for a demonstration of the shadows, if there was anything else on the page, then yes I would use a Shadow-box class, so I guess that I would break the rules to follow the rules one this one. there isn't anything else that is being styled like that and isn't going to ever be anything on this page styled like that. good thing to mention though @kleinfreund
– Malachi
Feb 20 '14 at 13:17
• It's more about not selectin div because div's are everywhere. You need something more specific. What's better than the class I suggested? Feb 20 '14 at 13:20
• I agree with you @kleinfreund. I am just saying this is an example, no need to make it more complicated than it is by adding more elements than needed to show the concept of shadows. the good point was that what you are saying should also be taught, probably not in the same lesson though. instead of divs they could have been p tags or a tags, anchor tags probably would have been a better choice, maybe? and really the divs are colored one way and the Shadow is a separate class even in my example. so it really does do the styling you suggest
– Malachi
Feb 20 '14 at 13:28