In other words, ideally we should be able to express any color as hue, saturation and brightness coordinates relative to sepia grey ( #AC9977). I have made some progress on the maths but they're not pretty ideally I believe any color could be represented at most in the following CSS filters: (-webkit-)filter: contrast(0) sepia(1) hue-rotate(X) saturate(Y) brightness(Z) I plan to implement this as a LESS mixin that takes a color argument, but just guidance on the logic behind the HSB functions is enough. I want to make it be entirely composed of a specific color with CSS (presumably, with the use of filters). Why, and how to make it work? Example of what I'm trying to achieveĬonsider an icon as an image or an element (background-image, CSS-based shape, etc), with any color, and with a shape defined by transparency ( not a rectangular image that could be simply overlaid). Since this is not the kind of stuff to be done by hand, we'll use the LESS preprocessor: - * / / contrast(0) sepia(1) contrast(0) sepia(1) in my understanding, should work. Calculate the brightness difference between both, and use brightness.Calculate the saturation difference between both, and use saturate.Calculate the hue difference between #AC9977 and the color we want, and use hue-rotate.Furthermore, using something like brightness(999) saturates colors (instead of making them white), which would happen in HSV but not HSL.īased on this assumption, we would proceed as follows: This ensures the entire image is composed of a reference color we can do math on specifically, #AC9977.Īt this point, we should be able to turn the entire image from what is now solid #AC9977 to any color we want using hue-rotate, saturate and brightness.įirst, what color coordinates are browsers using? I could not find make sense of the spec to be sure if it's using HSL ( Lightness) or HSV ( Value), but since HSB ( Brightness) is another name for HSV, I suppose it's using HSV. Use sepia(1), because we cannot operate on hue/saturation on a grey image. Use contrast(0) to turn the entire image into solid grey, while keeping the alpha channel (the Mozilla wiki says it'd become black, but in all browsers it becomes grey, must be a typo).Well, CSS filters are now capable of doing both things to arbitrary images, and they now work in all Blink, Webkit and Gecko browsers, and can be expected for future IE/Spartan.Ī text-shadow replacement is easy just use the drop-shadow filter.Ĭoloring the image into a specific color, however, has proven very tricky, despite all the necessary filters being here. That's why icon fonts were invented their main advantage over SVG is being able to recieve color and text-shadow rules from CSS. It is in a data-uri'd optimized SVG inlined in the CSS. I have an icon which I'd like to change the color of, using CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |