[tw5] image css filters macro / interactive demo

[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

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/90461a31-af0a-4dfe-aa7f-b9dbd564ea62%40googlegroups.com.

$__.ww_macros_cssfilterimg.tid
Description: Binary data

image css filter macro info.tid
Description: Binary data