CSS shadows not visible
July 11, 2013 12:00 AM
Using CSS I added a shadow to img elements with the name kbshadow (images of something that need a shadow to stand out)
But the shadows are not visible. When I drag the image in Firefox I do see the shadow applied to the semi-transparent image you see when dragging an element of a page.
Setting a Z-position didn't help. Does anyone have any tips how to make the shadow visible?
See the result below of the pic on the page (no shadow) and when dragging the element (with shadow)
[ATTACH=CONFIG]462[/ATTACH]
Edit: It's important that the fix works in IE 9/10!
Discussion (5)
When you say "img elements with the name kbshadow", what do you exactly mean? Are you referring to the images by the object name in Lectora? You should use class names added in Properties -> Appearance.
Looking up things about the shadow I read about margins.
Setting a margin in firebug did show the shadow. But also moved the image...
[ATTACH=CONFIG]463[/ATTACH]
@ssneg 51152 wrote:
Here's a sample: https://dl.dropboxusercontent.com/u/11433463/trivantis/shadowsample.zip
The trick is that Lectora clips the image to its exact size, thereby clipping the shadow around it, if there's any. So you have to add an extra rule "clip: inherit! important;" to override Lectora's clipping and make your shadow visible.
Thanks a lot! It works ;)
This also allowed me to shrink the size of the frame meaning even people with small screens wont get scrollbars of the shadow goes off screen!
Here's a sample: https://dl.dropboxusercontent.com/u/11433463/trivantis/shadowsample.zip
The trick is that Lectora clips the image to its exact size, thereby clipping the shadow around it, if there's any. So you have to add an extra rule "clip: inherit! important;" to override Lectora's clipping and make your shadow visible.
@ssneg 51142 wrote:
When you say "img elements with the name kbshadow", what do you exactly mean? Are you referring to the images by the object name in Lectora? You should use class names added in Properties -> Appearance.
Thanks for your reply.
I looked in the CSS with Lectora webinar and saw some codes there.
I tried using your suggestion by filling in a class name and setting up the shadow in the css file, but it didn't work.
Do you have an example where it does work?
Discussions have been disabled for this post