andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rebuild docs

Browse Source
This commit is contained in:
atomiks
2018-03-06 22:35:13 +11:00
parent e1c222caa8
commit 203985658c
3 changed files with 128 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
index.html
View File

@@ -33,6 +33,7 @@
<a class="sidebar__link" href="#circle"><span>Circle</span></a>
<a class="sidebar__link" href="#custom-scrollbar"><span>Custom scrollbar</span></a>
<a class="sidebar__link" href="#custom-text-selection"><span>Custom text selection</span></a>
<a class="sidebar__link" href="#dynamic-shadow"><span>Dynamic shadow</span></a>
<a class="sidebar__link" href="#etched-text"><span>Etched text</span></a>
<a class="sidebar__link" href="#gradient-text"><span>Gradient text</span></a>
<a class="sidebar__link" href="#hairline-border"><span>Hairline border</span></a>
@@ -689,6 +690,94 @@ in any specification.</span></p>
<!-- tags: animation -->
</div>
<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;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.dynamic-shadow-parent {
position: relative;
z-index: 1;
}
.dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
}
.dynamic-shadow::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.7;
z-index: -1;
}
</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>
<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);
}
.snippet-demo__dynamic-shadow::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.7;
z-index: -1;
}
</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>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>
<li><code>background: inherit</code> causes the pseudo-element to inherit the linear gradient specified on the element.</li>
<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>
</ol>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
91.7%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=css-filters" target="_blank">https://caniuse.com/#feat=css-filters</a>
</li>
</ul>
<!-- tags: visual -->
</div>
<div class="snippet">
<h3 id="easing-variables"><span>Easing variables</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
<p>Variables that can be reused for <code>transition-timing-function</code> properties, more powerful than the built-in <code>ease</code>, <code>ease-in</code>, <code>ease-out</code> and <code>ease-in-out</code>.</p>