I want to share some cross-browser compatible CSS techniques to create shadow effect without using an image.
We have to first remember that shadow means it should be black and should fade gradually as light effect on the div. If the light effect is from a particular side of the div, the shadow will be cast on to the opposite side of the div.
If light effects from above-left , shadow will show on right bottom If light effects from above-right, shadow will show on left bottom If light effects from above-top, shadow will show on bottom left If light effects from above-bottom, shadow will show on top right
We have to create a CSS to handle these features.
First Shadow Colors
If shadow color is black and faded then we have to use 3 different colors from RGB to show shadow 1 – #B8B6B8 –> this is not pure black but gray and closer color of black we are taking this as the first color of the shadow then the second color should be lighter then #B8B6B8 to effect like shadow so 2 – #DBDADB — > and the third faded color be
3 – #F1F0F1 –> this is the last faded color and near to white #FFFFFF so the effect will be like fading to page white background color.
CSS CODE
#shadow-div
{ position: relative; margin-right: 3px; margin-bottom: 3px; }
shadow-div will be the main container which will contain the shadow effect as well as the container for text or content.
Why ? margin-right: 3px; margin-bottom: 3px;
because we are planning to put 3 different background-colors, in 3 different div just back side of the container in the shadow-div area.
NOTE : IF you are planning with 4 colors and 4 divs for better effect you have to take it as 4px
#shadow-div .shadow1,
#shadow-div .shadow2,
#shadow-div .shadow3,
#shadow-div .container {
position: relative;
left: -1px;
top: -1px;
}
Here we are defining the 4 class of 4 divs which we will take inside the shadow-div basically the container will be the area where we will show the text or container data but in shadow1, shadow2, shadow3 are the areas containg the shadow colors.
Why we are writing like #shadow-div .shadow1 so on ?
This is because we need these div container, shadow1, shadow2, shadow3 to have the same property of shadow-div in this way it inherits the property so if you put width:400px; in shadow-div then all div will get the same width and inside we are writing the commin property of each div that is left:-1 and top:-1 you can change it to right:-1; bottom:-1 to have different shadow effect.
Now the time to have the each class defined with own property
#shadow-div .shadow1 {
background: #F1F0F1;
}
#shadow-div .shadow2 {
background: #DBDADB;
}
#shadow-div .shadow3 {
background: #B8B6B8;
}
#shadow-div .container {
border: 1px solid #848284;
padding: 10px;
}
Html part will be in the form of cascading divs
Please check the shadow effect from GPS, tips section. Please check the shadow effect from GPS, tips section. Please check the shadow effect from GPS,
Code snippet
Untitled Document
#shadow-div {
position: relative;
margin-right: 3px;
margin-bottom: 3px;
width:400px;
}
#shadow-div .shadow1,
#shadow-div .shadow2,
#shadow-div .shadow3,
#shadow-div .container {
position: relative;
right: -1px;
bottom: -1px;
}
#shadow-div .shadow1 {
background: #F1F0F1;
}
#shadow-div .shadow2 {
background: #DBDADB;
}
#shadow-div .shadow3 {
background: #B8B6B8;
}
#shadow-div .container {
color:#000000;
border: 1px solid #848284;
padding: 10px;
background-color:#CCCCCC;
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.