Drop shadow css styling allows you to creates a drop shadow effect without using any images
This will works in Firefox 3.5+ , Chrome 5+, IE 9+ , Opera 10.5+ and Safary 5+ browsers.
Here we are going to see Drop shadow Effects Examples
1.How to create basic drop shadow Box
.drop-shadow-example1
{
-webkit-box-shadow:0 1px 10px #666;
-moz-box-shadow:0 1px 10px #666;
box-shadow:0 1px 10px #666;
}
Basic Drop Shadow Example
2.Create drop shadow Box with inset css property
.drop-shadow-example2
{
-webkit-box-shadow:0 1px 10px #666 inset;
-moz-box-shadow:0 1px 10px #666 inset;
box-shadow:0 1px 10px #666 inset;
}
CSS Inset Shadow Example
Drop Shadow with inset css property – This “inset” make the shadow inner side of the box
3.Create double color border using drop shadow method
.drop-shadow-border
{
border:4px solid #438ead;
-webkit-box-shadow:0 0 0 2px #554b1c inset;
-moz-box-shadow:0 0 0 2px #554b1c inset;
box-shadow:0 0 0 2px #554b1c inset;
}
CSS double color border Example
CSS double color border Example – This “inset” make the in-side border for the box
4.css image shadow and image drop shadow
.image-shadow
{
padding:0.5em; margin:2em 10px 0em; background:#fff;
-webkit-box-shadow:0 1px 10px #666;
-moz-box-shadow:0 1px 10px #666;
box-shadow:0 1px 10px #666;
}
.image-drop-shadow
{
-webkit-box-shadow:0 5px 10px #666;
-moz-box-shadow:0 5px 10px #666;
box-shadow:0 5px 10px #666;
}
Recent version’s of all browsers will support CSS opacity Effect., For lower versions of IE we have to use filter property.
Example for transparent Image css
<style>
.image_transparent{
opacity:0.2;
/* For IE */
filter:alpha(opacity=20);
}
</style>
<body>
<img src="../images/discover_css.gif" class="image_transparent">
<img src="../images/discover_css.gif">
</body>
Also this effect can be applicable for transparent text and Background image transparent
Example for Back ground image transpatent and Text Transparent CSS
<style>
.bgimage_transparent{
background-image:url("../images/discover_css.gif");
opacity:0.2;
/* For IE */
filter:alpha(opacity=20);
width:550px;
height:200px;
display:block;
}
.text_transparent {
opacity:0.4;
/* For IE */
filter:alpha(opacity=40);
}
</style>
<p>Non Transparent Text</p>
<p class="text_transparent">Transparent Text</p>
<p>Transparent Background below</p>
<div class="bgimage_transparent"></div>
Non Transparent Text
Transparent Text
Transparent Background below
To improve website performance we need to preloaded the images which used in hover and rollover effects
Instead of using jquery or javascript to preload the images, we can do that using CSS.
The following Example show you how to preload all images
<html>
<title> preloading Images</title>
<style>
.load_images
{ display : none; }
<body>
<div class="load_images">
/* You can Load Multiple no images like this */
<img src="preloaded_image1.jpg" />
<img src="preloaded_image2.jpg" />
<img src="preloaded_image3.jpg" />
<img src="preloaded_image4.jpg" />
<img src="preloaded_image5.jpg" />
</div>
</body>
</html>
The “load_images” class will load and hide all images., So the roll over images will load smoothly.
What is the need of preload the image ?
Pseudo-selectors like :hover, :focus and :active will become more widely used in website designing. One common problem is the rollover image getting downloads only when that event fire., but all the necessary images must be downloaded already, Otherwise the rollover will behave badly.
So here we are going to discuss two methods to handles rollover image loading
Fast Rollovers Without Preload
In this method we are going to use single background image for both rollover and non-rollover images. which means combine both images in to a single image, and then position using the background position css property (CSS Sprite technique). So instead of changing the image when mouse over the element we simply change the background position to reveal the rollover image.
CSS Image preloaded method
Downloading the image before it is required for the rollover. This can be done by applying the image as a background to an element, and then hiding it using the background-position property. The image will then be downloaded but will not be displayed. Then, when the rollover is activated, it will operate smoothly and instantly.
So you need to create one class with the background image property., Use the rollover image as a background image and hide that element by using background position property as seen below.
.load_image
{
background-image: url("rollover-image.jpg");
background-repeat: no-repeat;
background-position: -1000px -1000px;
}
<div class="load_image"></div>
Your rollover image will be loaded while the page was loading. When a rollover is then activated, the image will already be available to the browser and the effect will be instant.
Click here for “Multiple images preload css”
This is the way include css styles for IE browsers
<!--[if IE]>
<link rel="stylesheet" href="all-ie.css" type="text/css"/>
<![endif]-->
