4 ms·
The social icons are neat, but using filter would be shorter than manually setting normal and hover styles, at the cost of having inconsistent gray colors: .
by KTibow 2y ago
The social icons are neat, but using filter would be shorter than manually setting normal and hover styles, at the cost of having inconsistent gray colors:
.icon:not(:hover) {
filter: grayscale(1);
}
- wackget 2y agoWhy go for the simple method when you can instead simply hand-edit SVG code then add two extra HTML elements per icon?
- lolinder 2y ago> at the cost of having inconsistent gray colors Which, to be fair, is a pretty high cost. The consistency of the greys that only differentiate on hover is half the aesthetic value of the effect.
- hnbad 2y agoAlso this would not work for GitHub, for example, where the hover color is black, which is already "grayscale".
- afloatboat 2y agoSVG elements also support currentColor for the fill property, which is linked to CSS’s color property. <svg><path d=“” fill=“currentColor” /></svg> element { color: hsl(0 0% 0%) } One advantage is that you can target the parent element and the SVG will change automatically. You can also create multiple “shades” by having currentColor on multiple paths with different opacity.