{"id":1498,"date":"2023-05-28T22:22:53","date_gmt":"2023-05-28T19:22:53","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1498"},"modified":"2023-05-28T22:22:55","modified_gmt":"2023-05-28T19:22:55","slug":"backdrop-filters","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1498\/","title":{"rendered":"Backdrop Filters"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Backdrop Filters\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/0_AUzC-oii0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;header class=&quot;Header&quot;&gt;\n    &lt;div&gt;\n      &lt;input id=&quot;FilterBlur&quot; name=&quot;FilterBlur&quot; type=&quot;checkbox&quot; data-filter-name=&quot;blur&quot; checked\/&gt;\n      &lt;label for=&quot;FilterBlur&quot;&gt;Blur&lt;\/label&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n      &lt;input id=&quot;FilterBrightness&quot; name=&quot;FilterBrightness&quot; type=&quot;checkbox&quot; data-filter-name=&quot;brightness&quot;\/&gt;\n      &lt;label for=&quot;FilterBrightness&quot;&gt;Brightness&lt;\/label&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n      &lt;input id=&quot;FilterContrast&quot; name=&quot;FilterContrast&quot; type=&quot;checkbox&quot; data-filter-name=&quot;contrast&quot;\/&gt;\n      &lt;label for=&quot;FilterContrast&quot;&gt;Contrast&lt;\/label&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n      &lt;input id=&quot;FilterGrayscale&quot; name=&quot;FilterGrayscale&quot; type=&quot;checkbox&quot; data-filter-name=&quot;grayscale&quot;\/&gt;\n      &lt;label for=&quot;FilterGrayscale&quot;&gt;Grayscale&lt;\/label&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n      &lt;input id=&quot;FilterHueRotate&quot; name=&quot;FilterHueRotate&quot; type=&quot;checkbox&quot; data-filter-name=&quot;hue-rotate&quot;\/&gt;\n      &lt;label for=&quot;FilterHueRotate&quot;&gt;Hue-rotate&lt;\/label&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n      &lt;input id=&quot;FilterSaturate&quot; name=&quot;FilterSaturate&quot; type=&quot;checkbox&quot; data-filter-name=&quot;saturate&quot;\/&gt;\n      &lt;label for=&quot;FilterSaturate&quot;&gt;Saturate&lt;\/label&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n      &lt;input id=&quot;FilterInvert&quot; name=&quot;FilterInvert&quot; type=&quot;checkbox&quot; data-filter-name=&quot;invert&quot;\/&gt;\n      &lt;label for=&quot;FilterInvert&quot;&gt;Invert&lt;\/label&gt;\n    &lt;\/div&gt;\n  &lt;\/header&gt;\n  &lt;main&gt;\n  &lt;div class=&quot;Container&quot;&gt;\n    &lt;div class=&quot;Filter&quot; data-filter-name=&quot;blur&quot;&gt;\n      &lt;div class=&quot;Filter-lens&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;Filter-content&quot;&gt;\n        &lt;label class=&quot;Filter-name&quot; for=&quot;blur&quot;&gt;Blur&lt;\/label&gt;\n        &lt;input type=&quot;range&quot; id=&quot;blur&quot; name=&quot;blur&quot;\n           value=&quot;10&quot; min=&quot;0&quot; max=&quot;100&quot; \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Filter&quot; data-filter-name=&quot;brightness&quot; hidden&gt;\n      &lt;div class=&quot;Filter-lens&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;Filter-content&quot;&gt;\n        &lt;label class=&quot;Filter-name&quot; for=&quot;brightness&quot;&gt;Brightness&lt;\/label&gt;\n        &lt;input type=&quot;range&quot; id=&quot;brightness&quot; name=&quot;brightness&quot;\n           value=&quot;60&quot; min=&quot;0&quot; max=&quot;200&quot; \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Filter&quot; data-filter-name=&quot;contrast&quot; hidden&gt;\n      &lt;div class=&quot;Filter-lens&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;Filter-content&quot;&gt;\n        &lt;label class=&quot;Filter-name&quot; for=&quot;contrast&quot;&gt;Contrast&lt;\/label&gt;\n        &lt;input type=&quot;range&quot; id=&quot;contrast&quot; name=&quot;contrast&quot;\n           value=&quot;60&quot; min=&quot;0&quot; max=&quot;200&quot; \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Filter&quot; data-filter-name=&quot;grayscale&quot; hidden&gt;\n      &lt;div class=&quot;Filter-lens&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;Filter-content&quot;&gt;\n        &lt;label class=&quot;Filter-name&quot; for=&quot;grayscale&quot;&gt;Grayscale&lt;\/label&gt;\n        &lt;input type=&quot;range&quot; id=&quot;grayscale&quot; name=&quot;grayscale&quot;\n           value=&quot;30&quot; min=&quot;0&quot; max=&quot;100&quot; \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Filter&quot; data-filter-name=&quot;hue-rotate&quot; hidden&gt;\n      &lt;div class=&quot;Filter-lens&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;Filter-content&quot;&gt;\n        &lt;label class=&quot;Filter-name&quot; for=&quot;hue-rotate&quot;&gt;Hue-rotate&lt;\/label&gt;\n        &lt;input type=&quot;range&quot; id=&quot;hue-rotate&quot; name=&quot;hue-rotate&quot;\n           value=&quot;30&quot; min=&quot;0&quot; max=&quot;360&quot; \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Filter&quot; data-filter-name=&quot;saturate&quot; hidden&gt;\n      &lt;div class=&quot;Filter-lens&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;Filter-content&quot;&gt;\n        &lt;label class=&quot;Filter-name&quot; for=&quot;saturate&quot;&gt;Saturate&lt;\/label&gt;\n        &lt;input type=&quot;range&quot; id=&quot;saturate&quot; name=&quot;saturate&quot;\n           value=&quot;30&quot; min=&quot;0&quot; max=&quot;100&quot; \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Filter&quot; data-filter-name=&quot;invert&quot; hidden&gt;\n      &lt;div class=&quot;Filter-lens&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;Filter-content&quot;&gt;\n        &lt;label class=&quot;Filter-name&quot; for=&quot;invert&quot;&gt;Invert&lt;\/label&gt;\n        &lt;input type=&quot;range&quot; id=&quot;invert&quot; name=&quot;invert&quot;\n           value=&quot;100&quot; min=&quot;0&quot; max=&quot;100&quot; \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n \n  &lt;\/main&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">\/* --------------------- *\/\n\/* Filters \u2728\u2728\u2728        *\/\n\/* --------------------- *\/\n\n:root {\n\t--filter-blur: 10px;\n\t--filter-brightness: 60%;\n\t--filter-contrast: 60%;\n\t--filter-grayscale: 30%;\n\t--filter-hue-rotate: 30%;\n\t--filter-saturate: 30%;\n\t--filter-invert: 100%;\n  }\n  \n  .Filter[data-filter-name=&quot;blur&quot;] .Filter-lens {\n\tbackdrop-filter: blur(var(--filter-blur));\n  }\n  \n  .Filter[data-filter-name=&quot;brightness&quot;] .Filter-lens {\n\tbackdrop-filter: brightness(var(--filter-brightness));\n  }\n  \n  .Filter[data-filter-name=&quot;contrast&quot;] .Filter-lens {\n\tbackdrop-filter: contrast(var(--filter-contrast));\n  }\n  \n  .Filter[data-filter-name=&quot;grayscale&quot;] .Filter-lens {\n\tbackdrop-filter: grayscale(var(--filter-grayscale));\n  }\n  \n  .Filter[data-filter-name=&quot;hue-rotate&quot;] .Filter-lens {\n\tbackdrop-filter: hue-rotate(var(--filter-hue-rotate));\n  }\n  \n  .Filter[data-filter-name=&quot;saturate&quot;] .Filter-lens {\n\tbackdrop-filter: saturate(var(--filter-saturate));\n  }\n  \n  .Filter[data-filter-name=&quot;invert&quot;] .Filter-lens {\n\tbackdrop-filter: invert(var(--filter-invert));\n  }\n  \n  \/* --------------------- *\/\n  \/* Global style          *\/\n  \/* --------------------- *\/\n  \n  body::before {\n\tcontent: &quot;&quot;;\n\tposition: fixed;\n\tz-index: -1;\n\tinset: 0;\n\tbackground-image: url('https:\/\/cdn.pixabay.com\/photo\/2023\/05\/03\/11\/20\/bird-7967356_1280.jpg');\n\tbackground-size: cover;\n\tbackground-position: center center;\n  }\n  \n  .Header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tpadding: 12px 24px;\n\tborder-bottom: 1px solid #fff;\n\tfont-weight: 700;\n\tcolor: #fff;\n\tbackdrop-filter: blur(10px) brightness(60%);\n  }\n  \n  .Container {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n  }\n  \n  .Filter {\n\tdisplay: inline-block;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tborder: 5px solid #fff;\n\tborder-radius: 3px;\n\tbox-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n\ttransform: translate(-50%, -50%);\n\tuser-select: none;\n  }\n  \n  .Filter[hidden] {\n\tdisplay: none;\n  }\n  \n  .Filter-lens {\n\tcontent: &quot;&quot;;\n\tdisplay: block;\n\twidth: 100%;\n\taspect-ratio: 1\/1;\n\tcursor: pointer;\n  }\n  \n  .Filter-content {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\twidth: 300px;\n\theight: 70px;\n\tpadding: 12px 24px;\n\tbackground: #fff;\n\tfont-size: 1.5rem;\n\ttext-align: center;\n  }\n  \n  .Filter-name {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 5px;\n\tborder-radius: 5px;\n\tpadding: 2px 8px;\n\tbackground: linear-gradient(-25deg, #4affd3, #4a00d3);\n\tcolor: #fff;\n\tfont-size: 1rem;\n\tfont-weight: 700;\n\ttransform: translateY(-50%);\n  }\n  \n  .Filter input {\n\twidth: 100%;\n\tcursor: pointer;\n  }\n  \n  \/* --------------------- *\/\n  \/* Other styles          *\/\n  \/* --------------------- *\/\n  \n  * {\n\tbox-sizing: border-box;\n  }\n  \n  body {\n\tmargin: 0;\n\tfont-family: 'Poppins', sans-serif;\n\toverflow: hidden;\n  }\n  \n  .Me {\n\tposition: fixed;\n\tz-index: 10;\n\tbottom: 20px;\n\tleft: 50%;\n\tcolor: #000;\n\ttransform: translateX(-50%);\n\tfont-weight: 700;\n\topacity: .5;\n  } <\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const rootElement = document.querySelector(':root');\nconst filters = document.querySelectorAll('.Filter');\nconst filterTrigger = document.querySelectorAll('.Header input');\nlet filterZIndex = 0;\nlet previousTouch = undefined;\n\nfunction updateElementPosition(element, event) {\n  let movementX, movementY;\n\n  if (event.type === 'touchmove') {\n    const touch = event.touches[0];\n    movementX = previousTouch ? touch.clientX - previousTouch.clientX : 0;\n    movementY = previousTouch ? touch.clientY - previousTouch.clientY : 0;\n    console.log('touch', { movementX: movementX, newX: touch.clientX, oldX: previousTouch &amp;&amp; previousTouch.clientX });\n    previousTouch = touch;\n  } else {\n    movementX = event.movementX;\n    movementY = event.movementY;\n  }\n  \n  const elementY = parseInt(element.style.top || 0) + movementY;\n  const elementX = parseInt(element.style.left|| 0) + movementX;\n\n  element.style.top = elementY + &quot;px&quot;;\n  element.style.left = elementX + &quot;px&quot;;\n}\n\nfunction startDrag(element, event) {\n  updateZIndex(element);\n  const updateFunction = (event) =&gt; updateElementPosition(element, event);\n  const stopFunction = () =&gt; stopDrag({update: updateFunction, stop: stopFunction});\n  document.addEventListener(&quot;mousemove&quot;, updateFunction);\n  document.addEventListener(&quot;touchmove&quot;, updateFunction);\n  document.addEventListener(&quot;mouseup&quot;, stopFunction);\n  document.addEventListener(&quot;touchend&quot;, stopFunction);\n}\n\nfunction stopDrag(functions) {\n  previousTouch = undefined;\n  document.removeEventListener(&quot;mousemove&quot;, functions.update);\n  document.removeEventListener(&quot;touchmove&quot;, functions.update);\n  document.removeEventListener(&quot;mouseup&quot;, functions.stop);\n  document.removeEventListener(&quot;touchend&quot;, functions.stop);\n}\n\nfunction updateZIndex(element) {\n  element.style.zIndex = filterZIndex;\n  filterZIndex++;\n}\n\nfunction inputHandler(event) {\n  const unit = event.target.name === 'blur' ? 'px' :\n               event.target.name === 'hue-rotate' ? 'deg' : '%';\n  const value = `${event.target.value}${unit}`;\n  rootElement.style.setProperty(`--filter-${event.target.name}`, value);\n}\n\nfilterTrigger.forEach(trigger =&gt; {\n  trigger.addEventListener('change', (event) =&gt; {\n    const filter = document.querySelector(`.Filter[data-filter-name=&quot;${event.target.dataset.filterName}&quot;]`);\n    if (event.currentTarget.checked) {\n      filter.removeAttribute(&quot;hidden&quot;);\n      updateZIndex(filter);\n    } else {\n      filter.setAttribute(&quot;hidden&quot;, &quot;&quot;);\n    }\n  })\n});\n\nfilters.forEach(filter =&gt; {\n  const inputElement = filter.querySelector('input');\n  const lensElement = filter.querySelector('.Filter-lens');\n  const startFunction = (event) =&gt; startDrag(filter, event);\n  \n  filter.style.top = `0px`;\n  filter.style.left = `0px`;\n  \n  lensElement.addEventListener(&quot;mousedown&quot;, startFunction);\n  lensElement.addEventListener(&quot;touchstart&quot;, startFunction);\n  inputElement.addEventListener('input', inputHandler);\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1499,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-1498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1498"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1498\/revisions"}],"predecessor-version":[{"id":1500,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1498\/revisions\/1500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1499"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}