Slider with transparency - css

I have a problem with coding of sliders with transparency. I don't know how to start? Has anyone seen similar examples?

With use the css:
.name_slider {
background: rgba(0, 0, 0, 0.2);
}
the last value (0.2) is the opacity : 1 is black, 0 is transparent. Just try diferent value to find the desired opacity.

Related

Chartist-js X and Y scale colour

Does anybody know how to change the grey x and y scale to black in the JavaScript graphing library chartist-js? I've looked in the CSS file but I can't seem to find anything.
In Chartist.css, Search for .ct-label, and change last value in rgba, which is the opacity value between 0 and 1. E.g to:
.ct-label {
fill: rgba(0, 0, 0, 0.8);
color: rgba(0, 0, 0, 0.8); }

IE8 and below MS filter not same as RGBa

For modern browsers I use background: rgba(0, 0, 0, 0.75); for a full viewport div overlay.
It wasn't working for IE8 and below, so I searched for a solution and I found this on css3tricks but tweaked the values a little:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
It works, however its not the equivalent of background: rgba(0, 0, 0, 0.75);. <- This one appears lighter then the other one. But I have set the opacity on the MS filter to 99% but it's still appears lighter.
Does anybody know how I can get the same result?
Quote from MSDN http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx:
Color is expressed in #AARRGGBB format, where AA is the alpha hexadecimal value, RR is the red hexadecimal value, GG is the green hexadecimal value, and BB is the blue hexadecimal value. The alpha value controls the opacity of the object. An alpha value of 00 is transparent, while a value of FF is opaque.
This means:
#3f000000 == rgba(0, 0, 0, .25)
#7e000000 == rgba(0, 0, 0, .50)
#bd000000 == rgba(0, 0, 0, .75)
So the following CSS should produce equivalent background on IE6, IE7 and IE8:
background-color: rgba(0, 0, 0, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bd000000,endColorstr=#bd000000);
You should put the filter property inside a conditional CSS for < IE9, otherwise IE9 seems to apply both properties and the result gets darker.
However, I'd instead suggest using a small semi-transparent PNG with the desired color as background-image with background-repeat: repeat; for better browser support - if needed.

Using CSS3, solid black background that is 95% transparent?

Using CSS3, what RGB-like value should replace VALUE below in order to achieve a solid black background that is 95% transparent?
div { background: VALUE }
Thanks Folks!!!
RGBa (a for alpha)
div { background: rgba(0, 0, 0, .05)};
You can use an RGBA notation.
R for red, G for Green, B for Blue and the A for aplha (percentage of transparency, as you've asked).
So the best answer is :
div {
background : rgba(0, 0, 0, .95);
}
And don't worry, it's supported by all the major browsers (even IE since IE 9) : http://caniuse.com/css3-colors
RGBa, i think:
div {
background:rgba(0, 0, 0, 0.95);
}
Folks i took a challenge test online and the following is the answers they provided to my question above:
div { background:rgba(0, 0, 0, 0.05); }
To check, I ran a test on my system and #Blingue is definitely correct.
Use div {background:rgba(0,0,0,0.05)}

How to remove webkit tap highlight border only?

If you don't like webkit to highlighting links when tapping them, you can remove that effect with:
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
Actually I want this effect, but not the extra border added around the tapped element.
Is there a way to remove highlight border only?
If you are talking about that orange borders around inputs on focus, you might want to try to add outline:none; to your CSS properties.
Like so :
input { outline:none; }
a is missing
should be -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

How to change the opacity of the selected text?

I have almost invisible text on the webpage with opacity: 0.1;
I want it to become visible when selected.
However, the selection is also almost invisible.
Unfortunately, ::selection doesn't change the opacity.
You won't be able to use the opacity property with ::selection. It was never one of the allowed properties, and even if it were implemented, it wouldn't make sense as you're not modifying the opacity of the element itself anyway.
You can use rgba() colors with the text and background rather than opacity on the entire element instead. It's not the ideal workaround, but it works at least for colors:
body {
color: rgba(0, 0, 0, 0.1);
}
::-moz-selection {
color: rgba(0, 0, 0, 1);
}
::selection {
color: rgba(0, 0, 0, 1);
}
<p>Almost invisible text that turns opaque on selection.
Instead of using opacity, just set the alpha in the rgba color like so...
::selection {
background: rgba(255, 255, 0, 0.5)
}

Resources