You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, webpage authors looking to change the image's colouring to a scale of a specific colour must combine the existing filters to approximate said colour or resort to overlays, JavaScript or other methods.
With this in mind, I propose a new filter function:
tint(map, amount)
where map is a <color> or <gradient> used to tint the image, and amount is a <number> or <percentage> used to blend the original with the filtered version, 1 being completely filtered, like it is with sepia().
If map is a <color>, then the image is converted to a greyscale and the dark end is mapped to map, while the light end is mapped to white, other levels being blended accordingly.
If map is a gradient, then the image is converted to a greyscale and each level is mapped to a level of the gradient.
Link to the current spec.
Currently, webpage authors looking to change the image's colouring to a scale of a specific colour must combine the existing filters to approximate said colour or resort to overlays, JavaScript or other methods.
With this in mind, I propose a new filter function:
where
map
is a<color>
or<gradient>
used to tint the image, andamount
is a<number>
or<percentage>
used to blend the original with the filtered version, 1 being completely filtered, like it is withsepia()
.map
is a<color>
, then the image is converted to a greyscale and the dark end is mapped tomap
, while the light end is mapped to white, other levels being blended accordingly.map
is a gradient, then the image is converted to a greyscale and each level is mapped to a level of the gradient.Example
Photo taken by me and available on https://commons.wikimedia.org/wiki/File:Muntii_Retezat_06.jpg under CC BY-SA. Processing done with GIMP.
First image is input, second is output, processed using this hypothetical value:
filter: tint(linear-gradient(#0d7fb8, #ffe600), 100%)
The text was updated successfully, but these errors were encountered: