Code

Discussion on CSS3 Shadow Pack

Discussion on CSS3 Shadow Pack

Cart 993 sales

cosmocoder supports this item

Supported

46 comments found.

What would that syntax look like? I can’t find any reference on how to add that to the div tag. I only see it as part of the .css

Thanks.

Yes you have to add it to the css file. If you don’t want to edit the css file for the shadows itself then you can also add that to div#main. I saw that you have a style declaration for it in your css file, so it should not be a problem. And I also saw that it already has position: relative set, which is required for applying z-index.

Therefore open up your css file ( style.css) and add the following to the style block for div#main that is already there : z-index: 0;

Hope I have made myself clear.

I can get the BottomShadow to work great – but can’t get any of the warp shadows to show. All they show is a small shadow along the bottom edge. I should have enough space, because the bottom shadow works ok. I copied the complete CSS into my sites style.css to make sure nothing was missing.

This is the code that works: [frame_center alt=”“title=”“]http://www.nextstepchurch.com/images/pageimage/promiseland.jpg[/frame_center]

You can view the working image here: http://nextstepchurch.com/connect/promiseland/

This is the code that is not working: [frame_center alt=”“title=”“]http://www.nextstepchurch.com/images/pageimage/promiseland.jpg[/frame_center]

You can view the non-working image here: http://nextstepchurch.com/connect/insideout/

This is a a word press site.

Thanks for you help!

I checked your pages. Even the bottom shadow is not working properly, the edges are missing. The solution I found is very simple. Just put z-index: 0; on the div to which you are applying the shadow and you are good to go.

Hot Stuff Item

are you made by making border below? with

z-index:-1; -moz-tranfrom : skew(4deg); -webkit-tranfrom : skew(4deg);

and the shadow is hard why not smooth???

Good to know that you like it. But I did not quite understand what you were trying to say. And also I cannot openly discuss the underlying code with you ;) .

As to the shadows looking hard, well that is matter of individual preference. Also different browsers may render them differently. If you want to make them more blurry you can easily do so by modifying the code.

Will this works in Wordpress images ?

Do you mean to ask that whether this item will work with images that are present in a site managed by Wordpress?

This item will work with any container to which you have to add some class names. The shadows cannot work directly with an image, the reasons for which are explained in the documentation. But you can wrap an image with a div and apply the shadow to it instead.

Please some examples how it looks in IE and other browsers

Hello ceasar, thank you for your interest in this item.

Since there are quite a few shadow styles it was not possible to post screenshots of the shadows in all browsers. But I assure you that these shadows have been designed with great care so as to look good in all compatible browsers.

Also these shadows do not work in IE, as I have indicated in the list of compatible browsers and also in the documentation. I tried searching for a script that will make these shadows work in IE, but to no avail. So as a fallback you can use CSS3 PIE to produce a suitable box-shadow of your choice in IE, and that will not interfere with these shadows in other modern browsers. I have also indicated this fact in the documentation.

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