CSS overlay vs same looking other color - css

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

Related

How to "wash out" colors with CSS filters?

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

Turn image background into alpha with CSS filters?

I have an image that is a simple coloured text on a black background. Is there a CSS filter (or a hacky combination of filters) that would allow me to turn black colour into complete transparency (essentially leaving me with just text)?

Display Color Wheel using CSS Sprite Technique

Provided the color wheel image how can we display it using CSS Sprites technique adding hover effects over the red, blue & yellow areas ? Clicking on any color area should open respective links.

Disabled QGroupBox title shadow (aka etching)

Look thoroughly at the disabled QGroupBox title (see attached image).
You'll notice a tiny white 1-pixel shadow under the title's letters.
It's barely noticeable on default style sheet, but it can be much more annoying if you set dark background and text color.
What can I do to disable this shadow, or at least change its color?
What style are you using? It looks like the 'basic' Windows style. If you want to get rid of the text shadow, you can implement your own style and change the way the text is drawn for disabled group boxes. Read more about about QStyle and how to create a custom style here. The link is for Qt 5.1, but the principle is the same for Qt 4 as well.
An easier way would be to simply change the palette for the QGroupBox object. Change the color identified by color group QPalette::Disabled and color role QPalette::Light to any color with the alpha channel set to 0, e.g. QColor(0, 0, 0, 0). This will effectively disable the text shadow. However, it will also disable the shadow of the lines so it might not be what you want.
I've found a solution:
Unfortunately, you can't remove disabled text shadow (aka etching), but you can change its color using dirty workaround:
It looks like shadow effect always takes its color from the ColorGroup "Disabled" and the ColorRole "Light" of the current palette. So, you just set this color to the background color of your widget:
QPalette p = myWidget->palette();
p.setColor(QPalette::Disabled, QPalette::Light, QColor(0,0,0)); <- place your widget bg color here
myWidget->setPalette(p);
I've found this solution here

Changing background color and text

In the webform1 by using a color picker i have choosing a color.In the webform2 the color should be appeared as background color and if there is any letters or text in the webform2 it have to change as an opposite color.
for example:
background is black text is white.
background is blue text is red.
in a gmail settings themes are there if we change a theme background is different
color and text is another color.but in that themes colors are already fixed for background and text.but we using color picker
please advise me.
Thanks
This stack overflow question might have some answers for you.
Given a background color, how to get a foreground color that makes it readable on that background color?
Possible other solutions include:
Add picker for foreground color.
Create preset foreground colors for each available background color.

Resources