HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

Various different box shadows

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
codereviewhtmlcssstackoverflow
shadowsdifferentboxvarious

Problem

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:



Box Shadow


















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);
}

Solution

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


    Box Shadow


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.

Code Snippets

<!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>
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); 
}

Context

StackExchange Code Review Q#42151, answer score: 5

Revisions (0)

No revisions yet.