improve(dynamic-shadow.md)

docs/3df57813b7ec2de885ea6075ff46ed46.js

@@ -25,6 +25,6 @@ var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iter
 "use strict";var t=require("../deps/utils"),e=(0,t.selectAll)(".snippet");EventHub.on("Tag.click",function(l){e.forEach(function(e){(e.style.display="block","all"!==l.type)&&((0,t.selectAll)(".tags__tag",e).some(function(t){return t.dataset.type===l.type})||(e.style.display="none"))})});
 },{"../deps/utils":18}],16:[function(require,module,exports) {
 "use strict";var e=require("../deps/utils"),t=(0,e.selectAll)(".snippet");t.forEach(function(e){var t=document.createElement("form");t.action="https://codepen.io/pen/define",t.method="POST",t.target="_blank";var n=document.createElement("input");n.type="hidden",n.name="data";var r=document.createElement("button");r.classList="btn is-large codepen-btn",r.innerHTML='<i data-feather="edit-2"></i>Edit on Codepen';var o=e.querySelector("pre code.lang-css"),a=e.querySelector("pre code.lang-html"),i=e.querySelector("pre code.lang-js"),l={css:o.textContent,title:e.querySelector("h3 > span").textContent,html:a?a.textContent:"",js:i?i.textContent:""};n.value=JSON.stringify(l),t.appendChild(n),t.appendChild(r),e.insertBefore(t,e.querySelector(".snippet-demo").nextSibling)});
-},{"../deps/utils":18}],7:[function(require,module,exports) {
+},{"../deps/utils":18}],8:[function(require,module,exports) {
 "use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=require("feather-icons"),r=l(e);require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var s=require("./components/Sidebar"),i=l(s),o=require("./components/BackToTopButton"),u=l(o),n=require("./components/Tag"),c=l(n),p=require("./components/Snippet"),t=l(p),q=require("./components/CodepenCopy"),a=l(q);function l(e){return e&&e.__esModule?e:{default:e}}r.default.replace();
-},{"focus-visible":20,"normalize.css":19,"prismjs":22,"feather-icons":21,"../css/deps/prism.css":19,"../css/index.scss":19,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":14,"./components/Snippet":15,"./components/CodepenCopy":16}]},{},[7])
+},{"focus-visible":20,"normalize.css":19,"prismjs":22,"feather-icons":21,"../css/deps/prism.css":19,"../css/index.scss":19,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":14,"./components/Snippet":15,"./components/CodepenCopy":16}]},{},[8])

index.html

@@ -779,19 +779,14 @@ in any specification.</span></p>
           <div class="snippet">
             <h3 id="dynamic-shadow"><span>Dynamic shadow</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3>
             <p>Creates a shadow similar to <code>box-shadow</code> but based on the colors of the element itself.</p>
-            <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="dynamic-shadow-parent"&gt;
+            <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="dynamic-shadow"&gt;&lt;/div&gt;
-  &lt;div class="dynamic-shadow"&gt;&lt;/div&gt;
-&lt;/div&gt;
 </code></pre>
-            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.dynamic-shadow-parent {
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.dynamic-shadow {
-  position: relative;
-  z-index: 1;
-}
-.dynamic-shadow {
   position: relative;
   width: 10rem;
   height: 10rem;
   background: linear-gradient(75deg, #6d78ff, #00ffb8);
+  z-index: 1;
 }
 .dynamic-shadow::after {
   content: '';
@@ -807,20 +802,15 @@ in any specification.</span></p>
 </code></pre>
             <h4>Demo</h4>
             <div class="snippet-demo">
-              <div class="snippet-demo__dynamic-shadow-parent">
+              <div class="snippet-demo__dynamic-shadow"></div>
-                <div class="snippet-demo__dynamic-shadow"></div>
-              </div>
             </div>
             <style>
-              .snippet-demo__dynamic-shadow-parent {
-                position: relative;
-                z-index: 1;
-              }
               .snippet-demo__dynamic-shadow {
                 position: relative;
                 width: 10rem;
                 height: 10rem;
                 background: linear-gradient(75deg, #6d78ff, #00ffb8);
+                z-index: 1;
               }
               .snippet-demo__dynamic-shadow::after {
                 content: '';
@@ -835,11 +825,9 @@ in any specification.</span></p>
               }
             </style>
             <h4>Explanation</h4>
-            <p>The snippet requires a somewhat complex case of stacking contexts to get right, such that the pseudo-element will be positioned underneath the element itself while still being visible.</p>
             <ol>
-              <li><code>position: relative</code> on the parent establishes a Cartesian positioning context for child elements.</li>
+              <li><code>position: relative</code> on the element establishes a Cartesian positioning context for psuedo-elements.</li>
               <li><code>z-index: 1</code> establishes a new stacking context.</li>
-              <li><code>position: relative</code> on the child establishes a positioning context for pseudo-elements.</li>
               <li><code>::after</code> defines a pseudo-element.</li>
               <li><code>position: absolute</code> takes the pseudo element out of the flow of the document and positions it in relation to the parent.</li>
               <li><code>width: 100%</code> and <code>height: 100%</code> sizes the pseudo-element to fill its parent's dimensions, making it equal in size.</li>
@@ -847,7 +835,7 @@ in any specification.</span></p>
               <li><code>top: 0.5rem</code> offsets the pseudo-element down slightly from its parent.</li>
               <li><code>filter: blur(0.4rem)</code> will blur the pseudo-element to create the appearance of a shadow underneath.</li>
               <li><code>opacity: 0.7</code> makes the pseudo-element partially transparent.</li>
-              <li><code>z-index: -1</code> positions the pseudo-element behind the parent.</li>
+              <li><code>z-index: -1</code> positions the pseudo-element behind the parent but in front of the background.</li>
             </ol>
             <h4>Browser support</h4>
             <div>

snippets/dynamic-shadow.md

@@ -5,23 +5,18 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
 #### HTML
 
 ```html
-<div class="dynamic-shadow-parent">
+<div class="dynamic-shadow"></div>
-  <div class="dynamic-shadow"></div>
-</div>
 ```
 
 #### CSS
 
 ```css
-.dynamic-shadow-parent {
-  position: relative;
-  z-index: 1;
-}
 .dynamic-shadow {
   position: relative;
   width: 10rem;
   height: 10rem;
   background: linear-gradient(75deg, #6d78ff, #00ffb8);
+  z-index: 1;
 }
 .dynamic-shadow::after {
   content: '';
@@ -39,21 +34,16 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
 #### Demo
 
 <div class="snippet-demo">
-  <div class="snippet-demo__dynamic-shadow-parent">
+  <div class="snippet-demo__dynamic-shadow"></div>
-    <div class="snippet-demo__dynamic-shadow"></div>
-  </div>
 </div>
 
 <style>
-.snippet-demo__dynamic-shadow-parent {
-  position: relative;
-  z-index: 1;
-}
 .snippet-demo__dynamic-shadow {
   position: relative;
   width: 10rem;
   height: 10rem;
   background: linear-gradient(75deg, #6d78ff, #00ffb8);
+  z-index: 1;
 }
 .snippet-demo__dynamic-shadow::after {
   content: '';
@@ -70,20 +60,16 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
 
 #### Explanation
 
-The snippet requires a somewhat complex case of stacking contexts to get right, such that the pseudo-element
+1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
-will be positioned underneath the element itself while still being visible.
-
-1. `position: relative` on the parent establishes a Cartesian positioning context for child elements.
 2. `z-index: 1` establishes a new stacking context.
-3. `position: relative` on the child establishes a positioning context for pseudo-elements.
+3. `::after` defines a pseudo-element.
-4. `::after` defines a pseudo-element.
+4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
-5. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
+5. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
-6. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
+6. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
-7. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
+7. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
-8. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
+8. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
-9. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
+9. `opacity: 0.7` makes the pseudo-element partially transparent.
-10. `opacity: 0.7` makes the pseudo-element partially transparent.
+10. `z-index: -1` positions the pseudo-element behind the parent but in front of the background.
-11. `z-index: -1` positions the pseudo-element behind the parent.
 
 #### Browser support