Closed VSharapov closed 3 years ago
Or maybe white shadow?
Having a hard time finding a satisfactory option.
filter: hue-rotate(180deg)
is neat, but looks like it preserves total luminosity. I couldn't make it useful.filter: contrast(0.5)
can be tweaked a bit (closer to 0.3
) to look okay.text-shadow: 0px 0px 0px white
seems like it shouldn't work, but it does surprisingly well. Not sure about that last 0px
- 1px
and 2px
are also okay (anything higher gets ugly) and I can't tell which is best.Here's the real trouble though:
An image that is all transparent except for someColor
on a background of the same color is invisible. No color transformation can make arbitrary colors stand out on arbitrary colors, i.e. any CSS you apply to links, I can make an image that will look invisible on the background. Shadows work for outlines but they look bad. I am ready to give up and just go with what looks good on black. The real solution is not to mess with images so that images that are links don't get uglified.
Inverting luminosity on the default link colors doesn't really look good. The blue looks too purple and the purple looks too similar. All of this reminds me of when the RedHat logo got changed, it looked pink! The designers pointed out that a #f00
had on a #fff
background looks #f00
but the same thing on a #000
background looks... #e00
- just a little off. Their pink hat felt like #ff0000
on a black background. You can't win.
So, tl;dr, I give up. My gut says:
a:link {color: #79f;}
a:visited {color: #94f;}
...looks good enough. Similar to the debug console color scheme in FF. If you use a #fff
or #000
.png
, it's gonna look bad. Sorry.
P.S. This helped: https://graphicdesign.stackexchange.com/q/20258/149756 ... ...but not in the solutionist sense of the word.
Currently links are inverted, dimmed to 50% and inverted again. Why not just brighten to 200% you ask?
#0000FF
times 2 is still#0000FF
, but if you start with#0000FF
-> invert ->#FFFF00
-> ×½ ->#808000
-> invert again ->#8080FF
.Anyway, I noticed this on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate() Might get better results 🤷 currently overlapping lonks and code blocks get their background brightened: