2d:null 2e:["$","title",null,{"children":"Box Shadow | lochiwei | Observable"}] 33:[] 31:{"id":"a6b6a100001d0032","slug":"box-shadow","title":"Box Shadow","thumbnail":"8b7acaa6fdfea8827529fd465faa33de59d55d168d70e369da15ef38042d9d33","access_level":"public","create_time":"$D2021-01-21T05:58:15.556Z","update_time":"$D2021-05-17T13:56:27.913Z","view_time":null,"first_public_time":"$D2021-01-21T15:30:28.801Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"51d0aa8921c02d01","login":"lochiwei","name":"lochiwei","avatar_url":"https://avatars-next.observableusercontent.com/ab27db86392e58dc187a21fef0d6cb4c5387914b82b7134a9da0ede3cc77ad7a","tier":"starter_2024"},"version":367,"publish_version":367,"role":null,"authored":false,"authors":[{"type":"individual","id":"917c8eb3367f9e91","login":"lochiwei","name":"lochiwei","avatar_url":"https://avatars-next.observableusercontent.com/ab27db86392e58dc187a21fef0d6cb4c5387914b82b7134a9da0ede3cc77ad7a","tier":null}],"members":[{"type":"individual","id":"917c8eb3367f9e91","login":"lochiwei","name":"lochiwei","avatar_url":"https://avatars-next.observableusercontent.com/ab27db86392e58dc187a21fef0d6cb4c5387914b82b7134a9da0ede3cc77ad7a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Box Shadow","cells":[{"id":0,"value":"md`# Box Shadow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"- 📘 [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)\n- 👉🏻 [<aside>](html-aside)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"myTOC = my.toc","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"## demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"**x**: ${viewof x}, **y**: ${viewof y}, **blur**: ${viewof blur}, **spread**: ${viewof spread}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"⭐️ 正的 `spread` 代表「擴大」陰影，負的 `spread` 代表「縮小」陰影。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`\n\n\n

h-offset (x): ${x}\n
v-offset (y): ${y}\n
blur: ${blur}\n
spread: ${spread}\n
color: ${page.swatch()} ${shadowColor}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"`box-shadow: ${x}px ${y}px ${blur}px ${spread}px ${shadowColor} ${inset ? 'inset' : ''};`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof shadowColor = color({\n value: \"#888888\",\n title: \"color\",\n description: \"color of the shadow\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"viewof inset = checkbox({\n // description: \"inner shadow\",\n options: [{ value: \"inset\", label: \"inset (inner shadow)\" }],\n value: \"inset\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`---\n### other properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"**border radius**: ${viewof borderRadius}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// div bg color\nviewof c2 = color({\n value: \"#d1ff7a\",\n title: \"bg color\",\n description: \"background color of text\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"appendix = md`---\n## appendices\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`---\n### imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"import { inlineSlider } from \"@lochiwei/inline-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import {slider, color, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"import {my} from \"@lochiwei/my\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"### styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"my.style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"my.link.toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`---\n### references\n\n- [W3School: Box Shadow](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp)\n- [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`---\n### page`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"page = ({\n // 色票\n swatch: () => html`\n \n `,\n\n // tokens\n token: {\n inset: (b) => {\n if (b) return \"inset\";\n else return \"\";\n }\n },\n\n // slider\n slider: {\n width: 80\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"### sliders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"// horizontal offset of the shadow\nviewof x = inlineSlider({\n min: -20,\n max: 20,\n step: 1,\n value: 5,\n width: `${page.slider.width}px`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"// vertical offset of the shadow\nviewof y = inlineSlider({\n min: -20,\n max: 20,\n step: 1,\n value: 5,\n width: `${page.slider.width}px`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"// higher the number, more blurred the shadow (optional)\nviewof blur = inlineSlider({\n min: 0,\n max: 20,\n step: 1,\n value: 5,\n width: `${page.slider.width}px`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"// increase/decrease size of shadow (optional)\nviewof spread = inlineSlider({\n min: -20,\n max: 20,\n step: 1,\n value: 0,\n width: `${page.slider.width}px`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"viewof borderRadius = inlineSlider({ min: 0, max: 50, step: 1, value: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"my.link.toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"