improve(dynamic-shadow.md)

2018-03-31 23:31:16 +11:00
parent 959d3f5b9f
commit 508dea6a8f
4 changed files with 27 additions and 58 deletions
--- a/docs/3df57813b7ec2de885ea6075ff46ed46.js
+++ b/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])
--- a/docs/index.html
+++ b/docs/index.html
--- a/index.html
+++ b/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;
-  &lt;div class="dynamic-shadow"&gt;&lt;/div&gt;
-&lt;/div&gt;
+            <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="dynamic-shadow"&gt;&lt;/div&gt;
 </code></pre>
-            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.dynamic-shadow-parent {
-  position: relative;
-  z-index: 1;
-}
-.dynamic-shadow {
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.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>
+              <div class="snippet-demo__dynamic-shadow"></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>
--- a/snippets/dynamic-shadow.md
+++ b/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>
+<div class="dynamic-shadow"></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>
+  <div class="snippet-demo__dynamic-shadow"></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
-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.
+1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
 2. `z-index: 1` establishes a new stacking context.
-3. `position: relative` on the child establishes a positioning context for pseudo-elements.
-4. `::after` defines a pseudo-element.
-5. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
-6. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
-7. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
-8. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
-9. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
-10. `opacity: 0.7` makes the pseudo-element partially transparent.
-11. `z-index: -1` positions the pseudo-element behind the parent.
+3. `::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. `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. `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. `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.

 #### Browser support