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);
}
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
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.
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 new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.
#header {
background-color: #990000;
width:101.3%;
margin-left:-8px;
margin-top:-8px;
height:40px;
-moz-box-shadow: 1px 1px 10px #D7D7D7;
}
Also, the way i have set the width is it likely going to create cross browser issues?
Here's a version similar to what Twitter has:
This is Twitter's version, more or less:
Live Demo (edit)
HTML:
<div id="top-fixed">
<div id="top-bar"></div>
</div>
CSS:
html, body {
margin: 0; padding: 0
}
body {
padding-top: 50px;
background: #c0deed
}
#top-fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
#top-bar {
height: 40px;
width: 100%;
background-color:#00a0d1;
background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
background-image:-moz-linear-gradient(#00a0d1,#008db8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
The trick that Twitter is using, is putting in an absolutely positioned box and giving that box a width of 100% and the shadow. Using overflow-x: hidden on it´s parent, you get the effect that you are looking for.
I've been doing shadows with .png's. I see no benefit of using this (esp. since I would assume browsers started supporting .png prior to supporting box shadowssee, for example, Mozila's statement that FF started supporting box shadows in FF3.5,) but of course, if this is better than doing shadows via .png, feel free to leave a comment proving me wrong!
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.