A Gloom
<<sepiaimg "image source" "sepia amount" "image width" "image height">>
SEPIAIMG : macro name
• IMAGE SOURCE : URL, or local drive path, or relatve path if image is in directory or subdirectory of wiki – QUOTE MARKS MANDATORY
• SEPIA 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 hieght to match)
Creates:
<img src="" style="filter:sepia(sepia amount);" width="" height="">
Use for example: https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg
Using CSS filters & in-tiddler styling– here the sepia filter, to change colors to sepia tones on an external image without altering the image or having to edit it. Other filters– blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate can be made into similar macros.
This tiddler uses an online image but a local drive image for a TW run on local machine– just change the img src. It uses a inline image style (shown below) which could also be included in a global stylesheet for a class name to be applied to any image to invert it.
style="filter: sepia(selectale value);"
ALSO SEE:
- invert image css filter macro
- sepia image css filter macro
- blur image css filter macro
- brightness/contrast image css filter macro
- grayscale image css filter macro
- drop-shadow image css filter macro
- hue-rotate image css filter macro
- saturate image css filter macro
- experimental filters combination macro
FROM: WIKIWitchery > now you see it... > CSS filters
Attachments: 1) macro tiddler, 2) info tiddler for TWScripts