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
Related
How am I going to enable my custom scroll in any iOS browser, my custom scroll is working on every android browsers but not on iPhone. I searched on google for the solution, didn't get any solution. I searched everywhere.
My current style I am using is given below.
.custom-slider::-webkit-scrollbar {
width: 0.5em;
height: 4px;
}
.custom-slider::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
margin: 0 40px;
}
.custom-slider::-webkit-scrollbar-thumb {
background-color: rgb(0, 0, 0);
}
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
Please consider the following CSS:
div {
background: rgba(0,0,0,.05);
width: 200px;
height: 200px;
padding: 50px;
}
div > div {
background: rgba(0,0,0,.2);
width: 200px;
height: 200px;
border-radius: 5px;
padding: 0;
box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
}
div > div:hover {
border-radius: 5px 5px 0 0;
background: rgba(0,0,255,.2)
}
with the following HAML:
%div
%div
Hovering on the inner element causes the border radius to change, as well as the background color. However, it also affects the box shadow. This should not happen. Please see snippet below:
https://codepen.io/anon/pen/yGvydK?editors=1100
How can this be explained? Is this a bug in Google Chrome? It doesn't appear to be happening in Firefox, IE or Edge. I run Chrome version 71.0.3578.98 on a 64 bit Windows 10 laptop.
EDIT
Behavior in Chrome (incorrect):
Note how the shadow suddenly looks different on the left, top, and right when hovering.
EDIT 2
Behavior in Firefox 64.0 (correct):
It appears that this was a bug in Chrome 71. Updating to Chrome 72 resolved the issue.
If you hover the mouse over the underlined table headings on this page, a tooltip appears
However, in IE7, the tooltips appear about 300px above their intended position, and on the first table, they don't appear at all.
Also, the tooltips are not as nicely styled when shown in IE, e.g. the corners aren't rounded, and the drop shadows aren't shown. I'm not too concerned about the styling, but I would like to get the tooltips displaying in the correct position.
I'm using the YACOP JQuery plugin to display the tooltips (I've modified this plugin slightly to remove the fading effects). The CSS styles applied to each tooltip are:
.callout {
max-width: 400px;
padding: 5px;
border: 1px solid #7992B0;
background-color: #FFE8A4;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
IE < version 9 doesn't support native or vendor specific CSS3 rules like rounded corners or drop shadows.
As for the IE7 Issue, setup a targeted CSS for IE7 either using conditional comments
<!--[if IE 7]>
.callout_main
{
position: absolute;
display: none;
margin: 0px;
left: 576.5px;
top: -66px;
}
Or the CSS browser selector and reposition the callout div with CSS.
The first table's tooltip doesn't seem to appear because it is poistioned way above the top of the page, so above the browsers "render view."
Update:
In response to your question, there is: <div class="callout_main" style="..."> I'd move these inline styles to a CSS file, and for the the IE/ rules change top: 366px; to top: -66px;. I think this will help to resolve your issue :)
.callout {
max-width: 400px;
padding: 5px;
border: 1px solid #7992B0;
background-color: #FFE8A4;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
You're using Webkit and Mozilla's css attributes, the ones starting with -webkit and -moz. These won't work on IE 6,7,8 (or any previous one) because they lack CSS 3 support. One day, all browsers will, hopefully, support CSS 3, but for now, you'll have to use some workarounds (likely), or force your users to use something that's not IE (depends on your users) if you want to have a nice looking tooltop.
There exists a compatibilty master table that will inform you of what you can and cannot use on various browsers.
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.