'filter' attribute pixelates my font?

Question

I am trying to achieve a color of red on a button that only seems possible to get by using filter: brightness(x). The problem I have with this is, most importantly, that utilizing this style slightly but unmistakably pixelates the font of the button, but also it brightens text color along with the background.

I have tried adding the text after the styling, but it is all the same. This JSFiddle demonstrates the problems described.

How can I counter or avoid this effect? Or achieve a brighter color without using brightness filter?

Why would brighten it, instead of just styling it that way using `background-color` and `color`? — Red, Feb 19 '18 at 08:07

Temani Afif · Accepted Answer · 2018-02-19T09:10:49.313

1

First you may notice that the brightness filter has no effect on your background color (remove the text and see that there is no effect) simply because your color is red = rgb(255,0,0) and this filter apply a linear transformation which is a simple multiplication of the RGB values having the max value 255. In you case you have a value bigger than 100% so the color will remain the same!

button {
  color: white;
  display:block;
  font-size: 1.8em;
  font-weight: bold;
  position:relative;
  background:red;
  border:none;
  width:200px;
  height:20px;
}


button:hover{
  filter: brightness(180%);
}

<button></button>

By the way an idea is to use a pseudo-element to create the background on where you apply your filter and avoid changing the text:

button {
  color: white;
  display:block;
  font-size: 1.8em;
  font-weight: bold;
  position:relative;
  background:none;
  border:none;
}
button:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:rgb(180,20,20);
  z-index:-1;
}

button:hover::before {
  filter: brightness(180%);
}

<button>The quick brown fox (hover me)</button>

edited Feb 19 '18 at 09:10

answered Feb 19 '18 at 08:09

Temani Afif

245,468
26
309
415

In the first example when I hover the button, it actually changes color I believe.. it is very, very slight. but it does. Also, if you increase the brightness value it will be very evident that it changes at least. – user2651804 Feb 19 '18 at 08:44
@user2651804 no it doesn't change :) try to pick the color value and see ;) the only change is applied to font and border and thus you have this illusion of color change – Temani Afif Feb 19 '18 at 08:48
In the second example you write `button:before` is it a typo that there aren't 2 colons? – user2651804 Feb 19 '18 at 08:48
@user2651804 no it's not a type ;) both works, check this https://stackoverflow.com/questions/41867664/double-colon-vs-single-colon-at-css-syntax – Temani Afif Feb 19 '18 at 08:53
I'm unable to do that in the dev console.. but I did in fiddle: https://jsfiddle.net/qnhsqv0j/88/ I can both SEE the change, and Colorpicker tool confirmed a change from #ff001f to #ff0038 – user2651804 Feb 19 '18 at 08:53
@user2651804 you used red and red is `#ff0000` and not `#ff001f` – Temani Afif Feb 19 '18 at 08:54
I can understand why a colorpicker tool might be inaccurate, but not why it would label identical colors differently? Either way there is no denying a color change if you increase the brightness value. But I guess that still just transforms the color code, and that is not what I had expected. – user2651804 Feb 19 '18 at 09:02
and if you used `#ff001f` you may see that the ff didn't change the 00 didn't change and only 1f was change to 38 – Temani Afif Feb 19 '18 at 09:04
@user2651804 well i based my logic on simple math calculation .. the brithness apply a transformation as follow `C' = p * C` where p is the value specified in the filter and in this case it will be 1.8 [180%] ... and the value is maximized to 255 ... so if you mutiply 0 by p it will be equal to 0 and if you multiply 255 by 1.8 you will get a big value and thus we keep 255 – Temani Afif Feb 19 '18 at 09:07

score 0 · Answer 2 · answered Feb 19 '18 at 08:00

0

I am pretty sure you can just pick a color you like in a hexadecimal format. You can find plenty of websites that offer pallets to pick from. Then you can just delete the filter like so JSFiddle

button {
  color: white;
  display:block;
  font-size: 1.8em;
  background: #ff0022;
  font-weight: bold;
}

answered Feb 19 '18 at 08:00

aMJay

2,215
6
22
34

Hmm interesting.. so brightening colors just result in different plain color codes? https://jsfiddle.net/qnhsqv0j/77/ In this fiddle I have 3 buttons. Starting from the bottom 1) example of achieving what I want for another color. 2) exactly what I want to achieve for red, but without brightness. 3) failed attempt to replicate button 2. – user2651804 Feb 19 '18 at 08:31

'filter' attribute pixelates my font?

2 Answers2