I would like to use WebKit's box-shadow css property for a little drop-down. The code would look like: .drop_down{ -webkit-box-shadow: 1px 1px 4px #888; box-shadow: 1px 1px 4px #888; } However, for browsers that do not have this capability, I would like to use borders to approximate this drop shadow, like so: .drop_down{ border...
Does adding a box-shadow property to a div change it's dimension? For example, what is the correct width in compliant browsers for the div MyDiv? 202px (borders and width) 203px (borders width and horizontal shadow size) 207px (borders width and shadow blur) None of the above div.MyDiv { width:200px; border:1px solid #cccccc; -moz-...
I'm not sure whether this bug applies to Firefox only or also to WebKit-based browsers, but it's really, really annoying. I've got a template/framework for my CMS interface, using box-shadow on a few elements with a width of 100%. Since this causes shadow on the right side of the element, a scroll bar appears. To hide the ugly scrollba...
Hello, I noticed using the clip property also removes the box-shadow property. Is there a way to use both on the same element? Some background: I have three columns for three types of products. Each product has an image, and each image is different in size. I want to standardize image size so my products display consistently. But I wou...
How do I get an inset CSS3 box shadow to render on top of its children elements? Problem: HTML: <div id="chatroom"> <div class="chatmessage"><b>User 1:</b>Test</div> <div class="chatmessage"><b>User 2:</b>Test</div> <div class="chatmessage"><b>User 1:</b>Test</div> <div class="chatmessage"><b>User 2:</b>Test</div> ...
I'm doing some tests with new features of CSS3, but this combination only works in lastest versions of Chrome and Firefox, but not in Safari or Opera: box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0...
Hi I'm creating multiple borders to element using box-shadow, but they don't show at Webkit. What's wrong with this code? I'm using this four times to create shadow on each side, then border for extra border box-shadow: 1px 1px 0px rgba(0,0,0,0.1); Martti Laine ...
I'm working on HTML for a small web application; the design calls for a content area with rounded corners and a drop shadow. I've been able to produce this with CSS3, and it works flawlessly on Firefox and Chrome: However, Internet Explorer 7 and 8 (not supporting CSS3) is a different story: Is there an easy, lightweight JavaScript...
I have a box in one of my websites that has a these property: -moz-box-shadow:inset 0 0 50px #ecf4de; -webkit-box-shadow:inset 0 0 50px #ecf4de; box-shadow:inset 0 0 50px #ecf4de; This gives the box a nice gradient towards the center. However, Safari does not support the "inset" property and IE doesn't support box-shadow at all. I can...
Hello, I've been experimenting with CSS3 and found something strange. Heres's the part of DIV style: border:#446429 solid 1px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; -moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; ...
Note: CSS novice here. Be gentle. ;-) I have the following CSS: ... -webkit-box-shadow: inset 0px 0px 2px #a00; -moz-box-shadow: inset 0px 0px 2px #a00; ... Now I am trying to extract that color to make the page colors "skinnable". Is there any way of doing this? Simply removing the color, and then using the same key again later ...
I'm trying to get rounded corners and drop shadow working on some div elements. For drop shadow I'm using box-shadow and for rounded corners I'm using border-radius. For the drop shadow in IE I'm using the DXImageTransform.Microsoft.Shadow filter. I need the elements to have rounded corners in IE as well that work with this filter. An...
Hello all, What can we do in order to solve this issue. We are on the last Jquery using slideUp and slideDown on several div elements. If we have one, all runs smooth and fluid. If we have more then one, all effects are not at all smooth. If we disable box-shadow, all works as expected. So, the issue must be the usage of box-shadow +...
Hi, I'm trying to make a box shadow for a div with a dynamic height. wich works fine with filter: progid:DXImageTransform.Microsoft.Shadow(color='#78000a', Direction=180, Strength=15) But only if a specific height is set. But I want a shadow also on an dynamic height. Is this possible ? I also tried min-height but doesnt work. ...
I am having a problem to use both inset box shadow and border radius. This works well with mozzila but with chrome -webkit-box-shadow extends the shadow outside the division. Here is the link to the website: www.rohanjain.in, the corners are rounded for mozzila but i have not enabled border-radius for webkit because of this bug. I am ...
Why does: div { -webkit-box-shadow: 5px 0 20px #c1c1c1; } put a shadow underneath the div when it's clearly set to 0? ...
Hi Guys, I'm having trouble adding the nice shadow on focus for an input box on my ipad for safari. Here's my code /* remember to define focus styles! */ :focus { outline: 0; } input[type=text]{ width: 494px; height: 44px; line-height: 44px; font-size: 24px; border: 2px solid #666666; ...
I'm building this page: http://ss.rsportugal.org/ As you can see, there are two 10 pixel shadows in the page. One just bellow the menu and the other just above the footer bar. These shadows are made using box-shadow: 0 0 10 rgba(...); It works as expected in WebKit engine and for some reason that I am unable to figure out and I could u...
I'm trying to create a blurred drop shadow (similar to the CSS3 box-shadow) in Internet Explorer. The most logical way to do this seems to be to find all elements that need a shadow in IE, and inject a new div inside of them using jQuery. This new div will fill the exact same space as its parent, and it can then be blurred using IE's b...
I want to apply the inner shadow only to the bottom and right sides. Is there a way around this? The few hacks I have seen seem to be relating to regular border shadow, where it's easier to cover up a drop shadow then remove an inner shadow -moz-box-shadow: inset 0 0 10px #161616; -webkit-box-shadow: inset 0 0 10px #161616; box-shadow: ...