5
\$\begingroup\$

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>
<head>
    <title>Box Shadow</title>
    <link rel="stylesheet" type="text/css" href="boxshadow.css">
</head>
<body>
    <!-- Introduction to the text shadow property -->
    <div class="container one">
      <div class="shadow1 box left"></div>
      <div class="shadow2 box right"></div>
    </div>
    <div class="container two">
      <div class="shadow3 box left"></div>
      <div class="shadow4 box right"></div>
    </div>
    <div class="container three">
      <div class="shadow5 box left"></div>
      <div class="shadow6 box right"></div>
    </div>
</body>
</html>

CSS:

body{
        background: #ccc;
        margin: 0;
}
.container{
    padding: 20px 50px;
    overflow: hidden;
}
.box{
    background-color: #fff;
    width: 500px; 
    height: 200px; 
}
.left{
    float: left;
}
.right{
    float: right;
}
/* Basic Shadow */
.shadow1{
    box-shadow: 5px 5px 0 rgba(150,150,150,0.5);
}
/* Inset Shadow and blur radius Variety */
.shadow2{
    box-shadow: inset 0 0 10px black;
}
/* Inset Shadow and blur radius */
.shadow3{
  background: #F2F2F2;
  box-shadow: inset 3px 3px 3px #BFBFBF, inset -3px -3px 3px #8C8C8C;
  border-radius: 10px;
}
/* Spread radius Shadow */
.shadow4{
    box-shadow: 0 20px 10px -10px rgba(150,150,150,0.8);
}
/* Curved Shadows */
.shadow5{
    position: relative;
    overflow:hidden;
}
.shadow5:before{
    content: "";
    position: absolute;
    z-index: 1;
    width: 96%;
    top: -15px;
    height: 15px;
    left: 2%;
    border-radius: 100px / 5px;
    box-shadow: 0 0 39px rgba(0,0,0,0.6);
}
.shadow5:after{
    content: "";
    position: absolute;
    z-index: 1;
    width: 96%;
    bottom: -15px;
    height: 15px;
    left: 2%;
    border-radius: 100px / 5px;
    box-shadow: 0 0 39px rgba(0,0,0,0.6);
}
.shadow6{
    position: relative;
    overflow:hidden;
}
.shadow6:before{
  content: ""; 
  position:absolute; 
  z-index: 1; 
  width:10px;  
  top: 5%; 
  height: 90%; 
  left: -10px; 
  border-radius: 5px / 100px; 
  box-shadow:0 0 13px rgba(0,0,0,0.6); 
}
.shadow6:after{
  content: ""; 
  position:absolute; 
  z-index: 1; 
  width:15px;  
  top: 5%; 
  height: 96%; 
  right: -15px; 
  border-radius: 5px / 100px; 
  box-shadow:0 0 13px rgba(0,0,0,0.6); 
}
Improve this question
\$\endgroup\$
1
  • \$\begingroup\$ 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 \$\endgroup\$
    – vals
    Feb 22 '14 at 21:15
5
\$\begingroup\$

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>
<head>
    <title>Box Shadow</title>
    <link rel="stylesheet" type="text/css" href="boxshadow.css">
</head>
<body>
    <!-- Introduction to the text shadow property -->
  <content>  
      <div class="shadow1"></div>
      <div class="shadow2"></div>
      <div class="shadow3"></div>
      <div class="shadow4"></div>
      <div class="shadow5"></div>
      <div class="shadow6"></div>
  </content
</body>
</html>

CSS

body{
    background: #ccc;
    margin: 0;
}
content{
    width:1000px;
}
div {
    background-color: #fff;
    width: 500px; 
    height: 200px;
    padding:15px;
    margin:15px;
}
.left{
    float: left;
}
.right{
    float: right;
}
/* Basic Shadow */
.shadow1{
    box-shadow: 5px 5px 0 rgba(150,150,150,0.5);
}
/* Inset Shadow and blur radius Variety */
.shadow2{
    box-shadow: inset 0 0 10px black;
}
/* Inset Shadow and blur radius */
.shadow3{
    background: #F2F2F2;
    box-shadow: inset 3px 3px 3px #BFBFBF, inset -3px -3px 3px #8C8C8C;
    border-radius: 10px;
}
/* Spread radius Shadow */
.shadow4{
    box-shadow: 0 20px 10px -10px rgba(150,150,150,0.8);
}
/* Curved Shadows */
.shadow5{
    position: relative;
    overflow:hidden;
}
.shadow5:before{
    content: "";
    position: absolute;
    z-index: 1;
    width: 96%;
    top: -15px;
    height: 15px;
    left: 2%;
    border-radius: 100px / 5px;
    box-shadow: 0 0 39px rgba(0,0,0,0.6);
}
.shadow5:after{
    content: "";
    position: absolute;
    z-index: 1;
    width: 96%;
    bottom: -15px;
    height: 15px;
    left: 2%;
    border-radius: 100px / 5px;
    box-shadow: 0 0 39px rgba(0,0,0,0.6);
}
.shadow6{
    position: relative;
    overflow:hidden;
}
.shadow6:before{
    content: ""; 
    position:absolute; 
    z-index: 1; 
    width:10px;  
    top: 5%; 
    height: 90%; 
    left: -10px; 
    border-radius: 5px / 100px; 
    box-shadow:0 0 13px rgba(0,0,0,0.6); 
}
.shadow6:after{
    content: ""; 
    position:absolute; 
    z-index: 1; 
    width:15px;  
    top: 5%; 
    height: 96%; 
    right: -15px; 
    border-radius: 5px / 100px; 
    box-shadow:0 0 13px rgba(0,0,0,0.6); 
}

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.

Improve this answer
\$\endgroup\$
5
  • 1
    \$\begingroup\$ Thanks for your feedback, very helpful. I like the simpler html and good point about the z-index. \$\endgroup\$
    – icottam91
    Feb 19 '14 at 17:01
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – kleinfreund
    Feb 20 '14 at 8:13
  • \$\begingroup\$ 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 \$\endgroup\$
    – Malachi ♦
    Feb 20 '14 at 13:17
  • \$\begingroup\$ 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? \$\endgroup\$
    – kleinfreund
    Feb 20 '14 at 13:20
  • \$\begingroup\$ 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 \$\endgroup\$
    – Malachi ♦
    Feb 20 '14 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.