A Gloom
(info tiddler is the interactive demo, showing the css filters working on an image displayed in a TW)
<<cssfilterimg "image source" "filter type" "filter amount" "image width" "image height">>
CSSFILTERIMG : macro name
• IMAGE SOURCE : URL, or local drive path, or relatve path if image is in directory or subdirectory of wiki – QUOTE MARKS MANDATORY
• FILTER TYPE : blur**, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, sepia
• FILTER AMOUNT : number alone or (number)%, .(number)
• IMAGE WIDTH : optional, number alone (for px) or (number)%
• IMAGE HEIGHT* : optional, number alone (for px) or (number)%
*(if width is set, the browser will autoscale height to match, so height doesn't need to be set)
**blur– requires px along with number, ie: "8px"
**drop-shadow requires following format– "30px 10px 4px grey"
*hue-rotate requires deg along with number, ie: "90deg"
<<cssfiltertimg "https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" opacity 20% 150>>
Creates:
<img src="" style="filter:filter type(filter amount);" width="" height="">
Use for example: https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg
Using CSS filters & in-tiddler styling to change an external image without altering the image or having to edit it, in the following ways– blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, sepia.
This tiddler uses an online image but a local drive image for a TW run on local machine– just change the img src.
style="filter: filter type(filter amount);"
FROM: WIKIWitchery > now you see it... > CSS filters