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, 0.5);
I really don't know if they fails in the box-shadow itself, in the inset parameter, or in RGBA color. It's a syntax error or simply Safari and Opera lacks on this?
The inset keyword is not supported in Safari 4, but is supported in Safari 5 and Opera 10.5. Check that you're using the latest versions of each.
Sources:
https://developer.mozilla.org/En/CSS/-moz-box-shadow#Browser_compatibility
http://dev.opera.com/articles/view/css3-border-background-boxshadow/#box-shadow
This might help the web programmers: opera box-shadow bug , but hopefully the browser developers will notice it too and fix this tiny but unpleasant issue.
Related
I have problem because shadow in my components doesnt work on safari.
I tried to change box-shadow to filter: drop-shadow() but this doesnt work in internet explorer 11.
box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.12);
Do you know some similar command that I can swap and show same effect as box-shadow?
Here's a good link: https://css-tricks.com/almanac/properties/b/box-shadow/
.shadow {
-webkit-box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.12); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.12); /* Firefox 3.5 - 3.6 */
box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.12); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
Update:
You can see the actual browser support and known issues here:
https://caniuse.com/#feat=css-boxshadow
Update2:
You can check this thread also - it may contain relevant info to you regarding the safari problem (color, sizes, etc.). The 0.12 may be a to small shadow for safari, according to the 1st answer.
css box shadow property is not working in safari
I have a form with orange background and a shadow:
and I'm trying to make the shadow with css.
the best result I got is here: https://jsfiddle.net/2f903rcr/
box-shadow: 0px 1px 2px 0px #505857, 0px 0px 7px 0px #505857;
Somebody know to do the same shadow in css?
I can't see your code and can't understand your image but there is something for you:
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, .3);
https://jsfiddle.net/2f903rcr/3/
I have an image and my css places it inside circle. The only problem is that it is not working on Opera browser. Any idea how to fix it?
my CSS:
.circular {
overflow: hidden;
width: 48px;
height: 48px;
border-radius: 550px;
box-shadow: 0 0 10px rgba(0, 0, 10, 2.8);
-webkit-box-shadow: 0 0 10px rgba(0, 10, 0, 2.8);
-moz-box-shadow: 0 0 10px rgba(0, 10, 0, 2.8);
background-image:url('img/backg.png');
}
As long as you're running Opera 10.60 or higher, all those properties are supported.
Reference for box-shadow
Reference for rgba (and other CSS3 color properties)
So what that means is, if you ARE running the correct version, you need to post the rest of your code to diagnose underlying issues.
Yes Html5 and css3 is still now under work-in-progress.Most of the browser invoking the latest feature of the Html5 and css3 .So I will suggest you use this two lines of css code to get your desire result for your opera browser.
-o-border-radius: 50px;
-o-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
keep remember some important prefix we have to use for creating css rule
-webkit- for chrome and may be safari
-moz-for firefox
-o-for opera
-ms-microsoft
I am using pie.htc to allow me to have radius corners and drop shadows on my website in old versions of IE.
The trouble is it seems to be making IE run very very slowly.
Here's an example of my code... can anyone see how I can improve this?
div.myDiv {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
behavior: url(/PIE.htc);
}
I used CSS3Pie a lot in projects, because I was forced to make the sites exactly look alike which of course is nonsense in for a technician, but not a sales guy.
Actually, using any kind of .htc files is very slow because pie needs to parse these rules and create according VML-Elements to emulate the according css3-behaviour. If you have bigger projects you will have no choice other than:
Completely omitting CSS3-features for IE8 (and convince your salesguy) <- my favorite option
Omitting pie and using IE filters wherever possible
using a more lightweight framework with lesser support but faster processing, because PIE is (because it has such a superb support) quite bloated and thus rather slow
Using positions like Razor adviced does not really fix the speed issue and prefixing with -ms might give you serious trouble in IE9 trying to use both, css3pie and the prefixed css3-property.
try this for a change
div.myDiv
{
border-radius: 5px;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
behavior: url(/PIE.htc);
position:relative;
}
PIE.htc file loads asynchronously along with DOM when it is ready. Setting the position:relative can certainly give you an edge. i prefix -ms- in code snippet which helps to detect IE. it worked for me. i used latest PIE.htc file.
i was wondering if there is something like text-shadow for DIVs, we all know that text-shadow is only for dropping a shadow to the text, but i want a shadow for a complete DIV.
any ideas?
Thanks
If you're using text-shadow you are using CSS3, so try the box-shadow property.
Actually you can do it with css3 on the newer browsers and filters with IE. I read about it in this extremely good article a while back. Basically you can take the following CSS and apply it to a div and it should work with FF, Safari, Chrome, Opera, IE5.5 and up.
.module {
/* offset left, top, thickness, color with alpha */
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/* IE */
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
/* slightly different syntax for IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}
You could try border-image
border-image: url(shadow.png);
CSS3 Only though
You can use images to get the shadow effects for divs. Alist apart has nice articles on it.