Code

Discussion on CSS3 Shadow Pack

Discussion on CSS3 Shadow Pack

Cart 993 sales

cosmocoder supports this item

Supported

46 comments found.

Thanks, I got it working. Cool library.

Thanks! :)

It works perfectly now! Thanks so much for the hard work in making sure the shadows look good in all browsers!!

Good to know that the shadows are working for you now, and thanks for your kind comments.

The shadows work perfectly in FF & Chrome but I can’t get the shadows to show up in IE. Any help would be great!


<!DOCTYPE HTML SYSTEM>
<html lang="en">
<head>
<title>Valley Bible Fellowship | TEMPLATE PAGE</title>
<meta charset="utf-8" />
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />

<link href="css/nivo-slider.css" rel="stylesheet" />
<link href="css/layout.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/shadows.css" rel="stylesheet" />
<link href="css/prettyPhoto.css" rel="stylesheet" />

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Colaborate-Thin_400.font.js" type="text/javascript"></script>
<script src="js/jcarousellite.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>

<!--[if IE 8]>
        <link rel="stylesheet" href="css/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.6.1/jquery.min.js"></script>
        <script src="js/jquery.transform-0.9.3.min.js"></script>
        <script src="js/shadows-ie.js"></script>
<![endif]-->
</head>
<body id="page3">

<div class="wrapper pad_bot1">
                <div class="wrapper col2 line2 marg_top1">
                      <div class="pad_bot2 ">
                        <strong><img class="BottomShadow BSmall BNormal" src="images/podast_banner.jpg" alt="Victorious Living  Podcast" /> </strong>
                      </div>

                <p>Now you can listen to Valley Bible Fellowship messages at anytime from anywhere! Podcasting is a free and simple way to receive and listen to messages from Valley Bible Fellowship every week. You only need to subscribe to our podcast one time. After that, new messages will automatically be downloaded to your computer.  You can listen to the sermons on your computer, take them with you by synchronizing the files to your mp3 player (like an iPod) or burning (copying) the messages to a CD. </p>

</div></div></body></html>

You are applying the shadow class directly to an image. This should not work anywhere except Opera, but maybe Firefox and Chrome has made some changes in their updates, so you can see the shadows there.

Please read the documentation carefully where I have explained how to apply shadows on an image.

It’s a very cool file, and works perfectly! I love the warp shadows. :)

Thanks for your comment and I am glad that you liked it !

thanks for you answer … but the problem is when height is smaller … for exemple : 60 px with BottomShadow …

The shadows won’t work properly for too small boxes. I have mentioned in the documentation what should be the minimum size of a container for a particular shadow type. So please go over the documentation carefully.

Why this don’t work please :

div class="right BottomShadow BSmall BDark" style="width: 255px;height: 60px;background: #fff;padding: 5px;" img src="../images/pave-bonsplans.jpg" width="255" height="60" alt=""

Do you mean the shadow does not show?

You have applied the shadow classes correctly although the html code that you have posted is missing proper tags. It should be
<div class="right BottomShadow BSmall BDark" style="...">
    <img src="..." alt="" />
</div>

I cannot offer much advice without more information. Let me know if the problem persists.

hi Cosmocoder, thanks for the response, its definitely something i’m doing wrong, but its not the z index issue as nothing shows at all, I used a simple css3 shadow thing since which worked but nowhere near as professional as your script, – there as a ‘photos’ class which I removed and used your calls in its place which should have worked but for some reason it didn’t, the php code is all setup using tables rather than div’s maybe its something awkward in the code I’m using – sorry for the hassle its a classy script jony.

I cannot offer any advice without understanding the problem better. Can you provide me with a link? You can also contact me through my profile page and try to send a more detailed description of your problem. I am sure your problem can be sorted out, but as I said I need to understand it better.

I bought this and have tried every which way for hours now and no way will it work for me, I’m trying to put it into a php site – this sucks as the shadows look classy.

What is the problem that you are facing exactly? Is the shadow disappearing? If so then maybe you are having a z-index issue, and I have described the solution in the documentation in detail.

Please describe your problem accurately in order for me to help you, or better still post a link to your site.

Just purchased this and I have it working. But when I put it inside a container or wrapper as my body the shadow is still there but does not bend. If I take it out of the container and have it directly on the page it works. How can I resolve this issue?

Thanks for purchasing!

I think you maybe having a z-index issue. Please read the documentation where this has been discussed in detail.

Hi
I purchased CSS3 Shadow Pak and GalleryGen.
Could be nice if you add Shadow Pak to GalleryGen as an option instead of have it individually.
Please, let me know if you add this feature to GalleryGen.
Thanks.
MikeCode

Hi there, I have replied to both of your comments in the page for Gallerygen.

Thanks, excellent support and files, 5 Star!

You are welcome, glad to be of help!

Hi, just purchased and I’m having some issues seeing the style? If I send you the URL could you have a look. I added a div around the img tag and gave it an id, set it to relative and z to 0 but still no go? Thanks

I have sent the solution to you by email.

Really amazing, great work!

Hi.

Looks like a great shadow component and my first CodeCanyone purchase!

Two questions:

1) Does it work on small images, like thumbnails?

2) Does it work if I don’t know the size of the images, so I cannot specify height and width in the container div?

Thank you!

Thank you for purchasing !

As to your questions:

1) The Warp Shadow and Left Right Perspective Shadow styles can work on thumbnail sizes as small as 150px. You will find details in the documentation.

2) You don’t actually have to mention any width/height for the container to which you want to apply the shadow. But you should keep a few things in mind. As I have mentioned in the documentation, these shadows do not work directly on images, and hence the images have to be wrapped by a div and the shadow has to be applied to that div. If you do that then in order for the div to be of the size of the image, you have to mention its width and height. This is because a div has display block by default and will encompass the total width of its parent container if its width is not actually set and so the shadow will also span that width and will of course be greater than the width of the image, which is undesired. But I guess that problem can be overcome if you set display: inline-block for the div. Or maybe you can wrap the image with a span instead, and I think that will work too. So take note of these things when you want to wrap an image with a div and then apply the shadow.

Nice look that you have made very easy to manipulate.

I too, was initially having the problem with z-index mentioned in previous comments. Perhaps you could use some of the instructions regarding this in an updated help file.

Nice to know that you like it.

I plan to release an update very soon with the solution of the z-index problem in the instructions. So stay tuned !

nice work :) , u should launch a version 2 ;)

Thanks, I have plans for a v2.0 :) !

If you want to see any specific shadow styles in the new version then let me know.

That has fixed it perfectly. Thank you for getting back to me.

After you said place it on the parents, parent so to speak that made perfect sense straight away.

Again Thank You!

Can I say by saying this is a great item and it’s a really cool/clever way adding these popular shadow styles.

I seem to be having the same problem as ‘ttrapani’ where the shadows are not showing at all. The problem seems to be with the z-index: -1; line, when this line is commented out the shadows show, but are on top of my when I add the line they disappear completely.

I have tired adding the z-index: 0; to my , but this causes the shadows to display on top.

Do you have any ideas what is causing this? Or know of I solution?

I am glad to know that you like this item.

I must mention here that the ‘z-index: -1’ line that you were referring to is essential, because otherwise the shadows will stay on top.

For your problem I suggest that you place a ‘z-index: 0’ line in the styling of the parent element of the element to which you are applying the shadow. For eg. if you are applying the shadow to say, div#someShadow, and its parent element is say, div#wrapper, then you must set the following style:
#wrapper {
position: relative;
z-index: 0;
}

Doing that will solve your problem. Please note that a ‘position’ style is required to set z-index on an element. If you already have positioned the parent element then you don’t have to do it again.

I am exploring this ‘problem’ and will try to include this solution in a future update.

Sorry I found the error. I had changed the z-index to 0 in the shadow definition area. Works like a charm now.

Thanks for you help!

I was just going to reply to your comment and you beat me to it :) !

I found the previous behavior of the shadow being on top of the image strange, since when I last checked your site the solution that I had mentioned to you earlier was working correctly. Anyway its good to know that you have solved it.

Almost there. The shadows are showing correctly but are now displayed on TOP of the image.

http://nextstepchurch.com/connect/insideout/

Thanks for your help!

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey