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
Related
I am trying to add a blur/glass effect to a Chrome Extension to look like https://css.glass/
These are the styles I used on the <html> of the popup
.extension-html {
background: rgba(0, 0, 0, 0.7);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9px);
-webkit-backdrop-filter: blur(4.9px);
}
And this is how it looks like:
This is how it should look like: (Photoshop edit)
Is adding a glassy transparent effect like this doable with chrome? If so, any guidance would be appreciated
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 having trouble trying to style a select element in opera.
What happens, is that most of the styles applied to this element in the css is shown in Opera (11.60), but for some reason bits also get left out, like the box shadow effect and border radius.
It seems to me that opera displays the select element above these styles, as I have noticed in the transitioning that the curved border does exist, it's just behind the select element. As in, the select element when unfocused appears to have no border radius effect, but when focus is applied to the element, you then see the border in transistion then it disappears behind the element again.
In IE 9, Firefox 9 and the latest version of Chrome, the select element in question comes out near uniform. And in all, including Opera, the input element comes out perfectly with the same element styles applied.
Here's the HTML:
<div class="searchBox">
<form method="post" action="'.$_SERVER['PHP_SELF'].'" name="search">
<label for="bizName">Biz Name:</label>
<input name="bizName" class="bizName" type="search" placeholder="Search..." />
<label for="bizCategory">Biz Category:</label>
<select name="bizCategory" class="bizCategory" onchange="this.form.submit()">
<option>Choose</option>
</select>
<button type="submit" name="searching" class="search" value="Search">Search</button>
</form>
<!-- end .searchBox --></div>
And heres the pages' CSS:
input, select {
background: #fcfcfc;
border: 0px none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6a6f75;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-background-clip: padding-box;
-webkit-transition: all 0.7s ease-out 0s; /* Saf3.2+, Chrome */
-moz-transition: all 0.7s ease-out 0s; /* FF4+ */
-ms-transition: all 0.7s ease-out 0s; /* IE10? */
-o-transition: all 0.7s ease-out 0s; /* Opera 10.5+ */
transition: all 0.7s ease-out 0s;
}
input {
padding: 7px 25px;
width: 135px;
}
select {
padding: 7px 10px;
width: 185px;
}
input:focus, select:focus
{
background: #6699cc;
color: #e7f3ff;
text-shadow:
-1px -1px 0 #666,
1px -1px 0 #666,
-1px 1px 0 #666,
1px 1px 0 #666;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
.bizCategory {
margin-right: 15px;
}
I don't see why Opera should react this manner, as I believe it does support the W3C spec somewhat?
In anycase, my assumption is that Opera is applying some sort of default style to this select tag. But that is only an assumption.
Would anyone else be able to provide any input in this regard; or would anyone that has experienced this problem before, be able to explain what exactly is going on here?
Thank you in advance to taking the time to read through this!
Improved answer for 2015:
I found my using of styled select lists very needed for the time we're in now - so here is the once that i have the best experience with so far. And there isn't really any none javascript solution to the issue. Tough you could use a unordered list and list elements and style it, and grab the info from the selected li with some javascript and post trough an ajax post method. IE8+ approach for this without any frameworks would look like this:
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
If you are using a framework checkout the build-in selects in angular and bootstrap below.
Angular
Angular select comes from angular material you can style on top of this as crazy as you want or style your own, using the frameworks javascript i done the same.
There is also Bootstrap UI which is an angular framework for all kind of form fields.
Bootstrap
If your not using angular in your project i think the way that bootstrap solved it's the best i've used so far. Bootstrap select
Old answer
Generally i would say never redesign a select button, but anyhow checkout its way to approche it https://gist.github.com/itsadok/1139558
If you only need to hit newer browsers, you can use this, and just style it like any other object:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
See some stuff about it HERE
Or i would go for a javascript solution there's a lot of people out there already done it and shared like this: adam.co/lab/jquery/customselect or this bulgaria-web-developers.com/projects/javascript/selectbox or build it my self like a jquery plugin build on ul and li's
in your issue you could even go for a menu structure like "ul & li", that gave a jquery call on click something like THIS FIDDLE
just take the text from the ".yourtextholder" and send to the url
It is the background of the select element which does not respect the rounded corners. (Similar to ActiveX filters in IE8)
If you don't need a specific background color, you can use a completly transparent background:
select {
background-color: rgba(255, 255, 255, 0.0)
}
The drop down button still overlaps the corners on the right, but at least on the left you get rid of those 'dog ears'.
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.
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.