Chartist-js X and Y scale colour - graph

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); }

Related

Why is the rgba background value in this css block invalid?

This CSS validator says the background value in this css block is invalid:
.sticky_scroll_box2 {
background: rgba(0.95, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.95);
opacity:1;
z-index: 13;
}
Why is that?
CSS validator says the background value in this css block is invalid because RGBA value can't be in decimal (besides the opacity/transparency)
RGBA only accepts integer, by using a number in floating point, CSS validator will throw an error
You need to change your css to
body {
background: rgba(1, 0, 0, 0.05);
}
RGB only accepts integer numbers (0-255), only the Alpha accepts floats (0.00 - 1.00). You are using float for the Red value.
From this:
background: rgba(0.95, 0, 0, 0.05);
To this:
background: rgba(1, 0, 0, 0.05);

Slider with transparency

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.

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 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