I am trying to use CSS filters to create a "disabled" look for components I am working on. I am trying to make it so that everything is "washed out" a bit. I can create this effect by using opacity(0.75) for components which are on white background: then black becomes gray and all strong colors become a bit more white. But the issue is if the component is not on white background, then opacity does not work as I would like. So how could I use CSS filters to create this "wash out" look? Like to multiply with white color a bit all colors.
I tried contrast but it looks like everything goes to gray, not white (so black stays black much longer than with opacity, while other colors are already washed out).
Using a combination of Contrast and Brightness filters might give you what you need:
filter: contrast(30%) brightness(150%);
Related
Regarding color contrast:
In this example, do I need to be careful of the blue background even though there is no copy directly on top of it? I.e. do I only need to be concerned with background color when there is copy on top of it, and I could hide the element with the background color from screen readers without causing an issue?
And in this one, do I need to be careful of the contrast between the light blue background and the button or am I only concerned with the contrast between the copy and the button? (I know the image is blurry. It's just an example.)
Both examples are fine as they are.
There are two things that are applicable here.
The first is contrast between text and the background for that text - you must have a contrast ratio of 4.5:1 for normal text and 3:1 for large text / bold text to be WCAG AA compliant. In the first example it is essentially black on white so it will pass easily.
The second is for controls. Buttons, inputs etc. should have a contrast ratio with their background of 3:1 minimum, no matter what state they are in (so if your above button turned white with black text on hover it probably wouldn't pass). In your second example your button is black on light blue so it certainly passes this also.
Also worth noting is that text within controls (your button) has the same 4.5:1 contrast requirement. Yet again white on black passes easily so you are fine.
Just check the contrast (almost certainly fine) on the red button with white text, reds and oranges can be deceiving in their contrast ratios (but as it is quite a dark red I am 99% sure you are fine just by looking at it).
For clarity your blue background in the first one could be 1% darker than the white box and it would be fine as it is not an interactive control that it surrounds.
Strange I faced this question just now - are there any differences between css background color overlay and same looking color? For ex: designer designed buttons for hover, focus etc. On hover he wrote - overlay #FFF 15%. Now sice we use mixins and colors are hex, I have two choices - wrap element with other div or convert my rgba color rgba(255,255,255,0.15) to rgba #FFFFFF26 and use a pseudo class to apply it on hover.
It looks ugly, why not just other background color on hover?
I can get a hex color like this rgba(255,255,255,0.15) and it looks the same...
What are the benefits of overlay color (are there any?)?
If you have overlay with transparency then the background color will be seen through the overlay. If you apply directly on the button then what is behind it will show (in most cases white) so you have 2 different results
I’ve searched and I haven’t found a way to get a certain level of transparency in a colored button while the text of the button is 100% visible.
There has been options to get certain levels of transparency in a button, but the text also becomes transparent and that’s not what I want.
Any pointers?
Do do it in code, you can use:
yourButtonName.getBackground().setAlpha(int alpha)
where alpha is an int between 0 and 255.
Do do it in XML, you would add something like this to your button attributes:
android:background="#8000FF00"
This would yield a 50% opaque green color.
To better understand how we arrive at the code "#8000FF00" , look here.
:)
Currently busy on creating a range input. However, the range input should be a different background-color, depending where the thumb is.
So far it is working fine, but the thumb is barely visible. Is there some way I can get the thumb on top of the slider? Tried all sorts of styling; position, z-index, display etc.
Here is a snippet of what I have so far.
My expected behavior would be a white circle as thumb, around 20x20.
Use gradient background on the track
You could style the track in such a way that you achieve the same result, using a gradient as background. For a slider at 20% it would be something like:
background: linear-gradient(to right, blue 20%, purple 20%);
A full working example can be found here: https://jsfiddle.net/jkrielaars/frdyr15L/7/
Add styles to CSS
Unfortunately, we can not access the track style directly from js. A workaround for this problem is to add all the possible values in CSS, and than activate them by changing the class, or an other attribute on the input element. (I use style in my example)
This can easily done using some SASS magic.
For a range input from 0 to 100 it could look like this:
#for $i from 0 through 100 {
input[type=range][style=v#{$i}]::-webkit-slider-runnable-track {
background: linear-gradient(to right, blue round(percentage($i/100)), purple round(percentage($i/100)));
}
}
(Note that you can't just use a numeral value in the style attribute. I've adde a letter to make it a string.)
Update element using javascript
Updating the style attribute can be done with some simple javascript. Using the oninput attribute you can make the style update as you slide around.
<input type="range" style="v20" value="20" oninput="this.setAttribute('style', 's'+this.value);"></input>
In an image like this, I want to remove the white background but keep the grayness of the dropshadow. Reomving mapping the actual image is not a problem!
This is what I enden up doing instead after lots and lots of trial and error.
Duplicate the layer with the paper in it.
Invert the new layer.
Painting the "paper-part" clear white
Using the inverted layer as a mask on the first layer.
Worked like a charm, perfect masking!
Two options that I can think of:
a) Edit the image in photoshop and make the background transparent.
b) Overlay the "white" background w/ a div overlay that has a white background.
a is the preferred option. Post a comment on this reply if you need me to do this for you.
did you make that image? Why not make the image on a transparent background?
But if you didn't make the image, I don't know if you really can unless you plan on putting it on another whitish background because the dropshadow itself is going to be a little transparent and whatever is underneath it will show through.