“CSS3 Shadow Pack” Documentation by “Nilok Bose” v2.0.2


“CSS3 Shadow Pack”

Created: 20/12/2010
By: Nilok Bose
Email: cosmocoder@gmail.com

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Introduction
  2. CSS Files and Structure
  3. Instructions for IE and Safari

A) Introduction - top

The main source code for "CSS3 Shadow Pack" is contained in the file called "shadows.css". There are 11 different shadow styles and each style in turn comes in 3 intensity variations and 3 length variations, thus providing you with 99 variations in total !

Applying a particular shadow style to a html container is very simple. You just have to add the appropriate class names to the container. This aspect has been divided into 3 parts. First and foremost you have to add the class name that identifies a particular shadow style. Then you have to add another class name for the shadow projection length you want for that particular shadow style. Finally add another class name for the shadow intensity that you want.

For eg. suppose that you want to add a warp shadow to <div id="container"></div> Also say you want that to have a large projection length (relatively speaking) and a medium intensity. Then the class names that you would add would look this:

<div id="container" class="WarpShadow WLarge WNormal"></div>

That would produce a nice looking warp shadow on that div. The class names for all the shadow styles will be stated in the next section.

Since these shadows are created by using :after and :before pseudo elements, therefore they will only work on elements that support those pseudo elements. Hence if you try to apply these shadows directly to an img tag, it will not work ( except in Opera which supports :after and :before for img tag ). This also holds true for form input elements. So if you find that these shadows are not working when you apply them to a certain html tag, then just wrap that tag with a div and apply the shadow to that div instead. With all that being said, these shadows will work directly on the majority of html tags that are in common use.

As to browser support, these shadows will work in Firefox 3.5+, Safari 3.2+, Chrome 3.0+, Opera 10.50+, and IE8+. Support for IE has been provided as of v2.0 . The files/scripts used to produce the shadows in IE are contained in the folder named "shadows-for-ie". Applying the shadow styles in IE is the same as in the other browsers and the details will be given below. Also note that 3 new shadow styles included in v2.0 - "Hover Shadow", "Stand Shadow", "Fold Shadow", require a bit of javascript help to work in Safari. These javascript files have been included in their respective demo folders.


B) CSS Files and Structure - top

As mentioned earlier the shadow styles are all defined in "shadows.css", which is contained in the folder called "Source". This file has been divided into sections using css comments, and the individual sections constitute the shadow styles. Further each section also contains style blocks defining the shadow projection lengths and intensity variations.

The major sections are:

	/******* WARP SHADOW ********/

	some code

	/******* RIGHT SIDE WARP SHADOW ********/

	some code

	/******* LEFT SIDE WARP SHADOW ********/

	some code

	/******* LEFT SIDE PERSPECTIVE SHADOW ********/

	some code

	/******* RIGHT SIDE PERSPECTIVE SHADOW ********/

	some code

	/******* BOTTOM PERSPECTIVE SHADOW ********/

	some code

	/******* HOVER SHADOW ********/

	some code

	/******* STAND SHADOW ********/

	some code

	/******* FOLD SHADOW ********/

	some code

	/******* RIGHT SIDE CURL SHADOW ********/

	some code

	/******* LEFT SIDE CURL SHADOW ********/

If you would like to edit a specific section of the file, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Given below are the available class names for each shadow style and their corresponding projection lengths and intensity :

SHADOW STYLE MAIN CLASS NAME SMALL MEDIUM LARGE LIGHT NORMAL DARK
Warp Shadow WarpShadow WSmall WMedium WLarge WLight WNormal WDark
Right Side Warp Shadow RightWarpShadow RWSmall RWMedium RWLarge RWLight RWNormal RWDark
Left Side Warp Shadow LeftWarpShadow LWSmall LWMedium LWLarge LWLight LWNormal LWDark
Left Side Perspective Shadow LeftPerspectiveShadow LPSmall LPMedium LPLarge LPLight LPNormal LPDark
Right Side Perspective Shadow RightPerspectiveShadow RPSmall RPMedium RPLarge RPLight RPNormal RPDark
Bottom Perspective Shadow BottomShadow BSmall BMedium BLarge BLight BNormal BDark
Hover Shadow HoverShadow HSmall HMedium HLarge HLight HNormal HDark
Stand Shadow StandShadow SSmall SMedium SLarge SLight SNormal SDark
Fold Shadow FoldShadow FSmall FMedium FLarge FLight FNormal FDark
Right Side Curl Shadow RightCurlShadow RCSmall RCMedium RCLarge RCLight RCNormal RCDark
Left Side Curl Shadow LeftCurlShadow LCSmall LCMedium LCLarge LCLight LCNormal LCDark

An important thing to note is that the 3 warp shadow varieties have an extra class name called smallBox, that is to be applied to html containers having widths between 150px and 350px. If that class name is not applied to such boxes then the shadows will inevitably look bad. So please keep that in mind. This point has also been indicated in comments in "shadows.css". Similarly the Left and Right Side Perspective shadows will only work for boxes having size greater than 150 x 150 px . But no special class name has been provided here. This fact has also been indicated in the css file using comments. In fact all the shadow styles provided will look good on large boxes, that have width greater than 400px or so. Use your discretion in applying a proper shadow style to a box of a particular size.

When you apply a shadow style to particular container, then DO NOT forget to set a z-index on its immediate parent container. On failing to do so will make the shadows invisible, especially if the parent has a background set. This happens because the pseudo elements :after and :before have a z-index of -1, in order for the shadows to remain below the container to which they are applied. So for eg. if you want to apply a shadow to say <div id="someShadow"></div>, and its parent is say <div id="wrapper"></div> then you would set the follwing style on div#wrapper

	#wrapper {
	    position: relative;
	    z-index: 0;
	}

Note that a position declaration is required to set a z-index on a container. If you already have a position set on the parent container then of course there is no need to do it again. Also setting a z-index: 0 is enough to make the shadows visible, but if your project requires setting a higher z-index on div#wrapper then that is alright too. It must be mentioned here that if the container to which you are applying the shadow is a direct child of the body element, then there is no need to set a z-index on the body element as shown above, and the shadows will show just fine.

Another important thing worth mentioning is that, the html container to which you apply the shadow, must have a suitable bottom margin ( left/right margin if you use Left/Right Perspective Shadow or Left/Right Curl Shadow ). This is needed because then otherwise the succeeding container will ignore the presence of the shadow of its previous container and overlap it. Depending on its z-index, the succeeding container will either go above or below the shadow of its previous container. This is in fact a standard feature of css box-shadows. So you must apply a proper bottom margin to the conatiner to which you apply the shadow. You may also instead add a suitable top margin to the succeeding container. Its your choice !

An example of applying these class names has already been given above. For further illustrations please check the provided demo files and their source code to get a proper grasp of this.

Also note that you must not add more than one class name for shadow projection lengths or intensity. The same goes for shadow styles also.

Great care has been taken to make the shadows look good in all modern CSS3 capable browsers. But still there can be slight rendering differences between browsers in some cases. The shadow projection lengths and intensity variations have been designed in such a way so that they look good in most situations. But you may of course feel the need to tweak the parameters to your taste. Feel free to do so !

On a final note, if you find that you are not using more than one or two shadow styles for a particular project, then it would be better if you copied just those shadow styles to your main style sheet. In doing so you will save some bandwidth, instead of including the whole shadows.css file, and also the page will render slighltly faster.


C) Instructions for IE and Safari - top

As mentioned earlier the method for applying shadows in IE are quite similar to other browsers. You will of course have to declare the class names as mentioned above. The only difference is that some extra scripts have to be included to make the shadows work in IE. The shadows work in IE through a combination of javascript, proprietary IE filters, and CSS3 PIE. For javascript, the jQuery library is used. So to make the shadows work in IE you have to include the following code block in the <head> section of your html file.

<!--[if IE 8]>
    <link rel="stylesheet" href="../../shadows-for-ie/shadows-ie.css" />
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="../../shadows-for-ie/jquery.transform-0.9.3.min.js"></script>
    <script src="../../shadows-for-ie/shadows-ie.js"></script>
<![endif]-->

The files used here are:

  1. shadows-ie.css - The main css file that contain the shadow style declarations suitable for IE
  2. Dean Edwards' IE9.js - This file makes IE behave like a standards compliant browser and provides support for some features that are present in other modern browsers, but are absent in IE. Strictly speaking this file is not absolutely necessary in this case, but it produces one feature that is helpful for inlcuding CSS3 PIE, that is explained below.
  3. jQuery - A javascript framework that makes coding javascript much easier. Here the latest version at the moment of writing is being referenced from Google servers.
  4. jQuery 2d Transform Plugin - This plugin makes css3 transforms work in IE through the use of IE filters.
  5. shadows-ie.js - The javascript file that contains the code for making all the shadow styles work in IE. If you only want to use one or two shadow styles in your project then you can delete the portions from this file that you don't need. This file has been commented to divide the sections for different shadow styles.
  6. CSS3 PIE - This file has not been explicitly referenced like the above files. Instead it is referenced from within the shadows-ie.css. if you go through that css file then you will find declarations like behavior: url(PIE.htc);. That is how CSS3 PIE is referenced. This htc file makes a lot of css3 features work in IE, that includes box-shadows. Note here that generally the url path of a htc file declared like above is made relative to the html file, and not relative to the css file from where it is referenced. Dean Edwards' IE9.js corrects this non-standard behaviour in IE, and hence you can delcare the htc file path relative to shadows-ie.css . So if you choose not to include IE9.js then you must keep this fact in mind.

As you can clearly see, the above files have been referenced through conditional comments, so that they are only loaded in IE. Further the conditional comments stipulate that these files be only loaded for IE8. These shadows do not work in IE7 due to a z-index bug, which make the shadows appear on top of the conatiner to which they are applied.

As for Safari, it has been already mentioned that it requires the help of javascript to make 3 new shadow styles work. This is due to the fact that Safari has a bug in the use of percentage values in elliptical border-radius. Here also the help of jQuery is taken. The javascript files for these 3 shadow styles are included in the respective demo folders. Note here that since jQuery is required for these 3 cases to make the shadows work in Safari, so for these cases jQuery should not be included within conditional comments, as is done for IE. See the demo files to understand how the files have been referenced. Please note that this Safari bug has been fixed in version 5.1+ .


Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions relating to this item. No guarantees, but I'll do my best to assist. If you have a more general question relating to the items on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Nilok Bose

Go To Table of Contents