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!
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.
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 case. 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.
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.4.4/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:
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. Also the upcoming IE9 is expected to support advanced css3 features, but whether it will be able to reproduce these shadows properly remains to be seen.
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.
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