25:["$","title",null,{"children":"CSS Image Filters | UMNI.design | Observable"}] 49:[] 29:{"id":"83445feb6a95719d","slug":null,"title":"CSS Image Filters","thumbnail":"7197b160f34fa09850a612e1ebce77764b21504299b52dabac55d9e70a3bd385","access_level":"public","create_time":"$D2022-10-23T06:59:41.780Z","update_time":"$D2022-10-24T15:41:30.743Z","view_time":null,"first_public_time":"$D2022-10-23T06:59:41.780Z","has_unpublished_edits":null,"fork":{"id":"9ec738271933cc06","slug":null,"title":"Tailwind + CSS Image Grid","owner":{"id":"eceee348d9a55ccd","login":"design","name":"UMNI.design"}},"stars":1,"starred":false,"owner":{"type":"team","id":"eceee348d9a55ccd","login":"design","name":"UMNI.design","avatar_url":"https://avatars-next.observableusercontent.com/da616e8c8af7bc2118b13ab7e705c06985896777ed897b48242d3f052b3dccec","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":324,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"},{"type":"team","id":"eceee348d9a55ccd","login":"design","name":"UMNI.design","avatar_url":"https://avatars-next.observableusercontent.com/da616e8c8af7bc2118b13ab7e705c06985896777ed897b48242d3f052b3dccec","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CSS Image Filters","cells":[{"id":0,"value":"# CSS Image Filters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"# [``](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function)\n\nThe **``** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types) represents a graphical effect that can change the appearance of an input image. It is used in the [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) and [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) properties.\n\n## [Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function#syntax)\n\nThe `` data type is specified using one of the filter functions listed below. Each function requires an argument which, if invalid, results in no filter being applied.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"htl.html`

\n ${photoTile({\n imgUrl: getImageUrl(image_number,{width: 900, height: 600}),\n altText: \"This is a placeholder image.\"\n})}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof image_number = Inputs.number({label: \"Change Image\", value :\"686\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof blur = Inputs.range([0,2],{step: 0.05, value: 0, label : \"blur\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof brightness = Inputs.range([0.6,2],{step: 0.1, value: 1, label : \"brightness\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"viewof contrast = Inputs.range([50,150],{step: 5, value: 120, label : \"contrast\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viewof grayscale = Inputs.range([0,100],{step: 5, value: 90, label : \"greyscale\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof opacity = Inputs.range([0,100],{step: 5, value: 100, label : \"opacity\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"viewof saturate = Inputs.range([0,200],{step: 5, value: 160, label : \"saturate\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof hue = Inputs.range([-180,180],{step: 5, value: 110, label : \"hue-rotate\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"viewof sepia = Inputs.range([0,100],{step: 5, value: 20, label : \"sepia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"viewof invert = Inputs.range([0,100],{step: 5, value: 0, label : \"invert\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"viewof lr = Inputs.range([-30,30],{step: 1, value: 10, label : \"drop-shadow, left-right\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"viewof tb = Inputs.range([-30,30],{step: 1, value: -10, label : \"drop-shadown, top-bottom\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"viewof b = Inputs.range([0,90],{step: 1, value: 40, label : \"drop-shadow, diffusion\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"viewof dropshadow_color = Inputs.color({value: \"#4e1575\", label : \"drop-shadow, color\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"htl.html`

\n ${photoCard({\n imgUrl: getImageUrl(image_number,{width: 900, height: 600}),\n altText: \"This is a placeholder image.\",\n title: \"A title for the above random image.\",\n desc: \"It calls for a meaningless description. One more sentence to make it longer. \"\n})}\n

${title}

${desc}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import { getImageUrl, getRandomImageUrl } from \"@saneef/lorem-picsum\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"tw = initializeTWind({\n invalidation,\n hash: false, // Enable/Disables classname hashing. Makes the classnames readable \n theme: {\n // Extend the default theme with ADB brand stuff.\n extend: {\n fontFamily: {\n sans: `\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"`\n }\n // colors: {\n // brand: {\n // ...mainColors\n // },\n // accent: {\n // ...accentColors\n // }\n // }\n }\n },\n preflight: {\n \"@import\":\n \"url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {initializeTWind} from \"@saneef/tailwindcss\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null