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

fix #46

Browse Source
This commit is contained in:
atomiks
2018-03-02 07:41:40 +10:00
parent bd3eea0b11
commit f45ccf4795
4 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/4d4edbda57043aeeabeac31d2dd12d0d.js
View File

File diff suppressed because one or more lines are too long

8
docs/index.html
View File

@ -142,7 +142,7 @@
box-shadow: 0 0 0 0.25px;
}
}
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__hairline-border">Text with a hairline border around it.</p> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>box-shadow</code>, when only using spread, adds a psuedo-border which can use subpixels*.</li> <li>Use <code>@media (min-resolution: ...)</code> to check the device pixel ratio (<code>1ddpx</code> equals 96 DPI), setting the spread of the <code>box-shadow</code> equal to <code>1 / dppx</code>.</li> </ol> <h4 data-type="Browser Support">Browser Support</h4> <div> <div class="snippet__browser-support"> 95.0% </div> </div> <p><span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=css-boxshadow" target="_blank">https://caniuse.com/#feat=css-boxshadow</a> </li> <li> <a href="https://caniuse.com/#feat=css-media-resolution" target="_blank">https://caniuse.com/#feat=css-media-resolution</a> </li> </ul> <hr> <p>*Chrome does not support subpixel values on <code>border</code>. Safari does not support subpixel values on <code>box-shadow</code>. Firefox supports subpixel values on both.</p> </div> <div class="snippet"> <h3 id="horizontal-and-vertical-centering">Horizontal and vertical centering</h3> <p>Horizontally and vertically centers a child element within a parent element.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="horizontal-and-vertical-centering"&gt;
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__hairline-border">Text with a hairline border around it.</p> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>box-shadow</code>, when only using spread, adds a pseudo-border which can use subpixels*.</li> <li>Use <code>@media (min-resolution: ...)</code> to check the device pixel ratio (<code>1dppx</code> equals 96 DPI), setting the spread of the <code>box-shadow</code> equal to <code>1 / dppx</code>.</li> </ol> <h4 data-type="Browser Support">Browser Support</h4> <div> <div class="snippet__browser-support"> 95.0% </div> </div> <p><span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=css-boxshadow" target="_blank">https://caniuse.com/#feat=css-boxshadow</a> </li> <li> <a href="https://caniuse.com/#feat=css-media-resolution" target="_blank">https://caniuse.com/#feat=css-media-resolution</a> </li> </ul> <hr> <p>*Chrome does not support subpixel values on <code>border</code>. Safari does not support subpixel values on <code>box-shadow</code>. Firefox supports subpixel values on both.</p> </div> <div class="snippet"> <h3 id="horizontal-and-vertical-centering">Horizontal and vertical centering</h3> <p>Horizontally and vertically centers a child element within a parent element.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="horizontal-and-vertical-centering"&gt;
&lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.horizontal-and-vertical-centering {
@ -172,7 +172,7 @@
transform: scaleX(1);
transform-origin: bottom left;
}
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__hover-underline-animation">Hover this text to see the effect!</p> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>display: inline-block</code> makes the block <code>p</code> an <code>inline-block</code> to prevent the underline from spanning the entire parent width rather than just the content (text).</li> <li><code>position: relative</code> on the element establishes a Cartesian positioning context for psuedo-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> ensures the pseudo-element spans the entire width of the text block.</li> <li><code>transform: scaleX(0)</code> initially scales the pseudo element to 0 so it has no width and is not visible.</li> <li><code>bottom: 0</code> and <code>left: 0</code> position it to the bottom left of the block.</li> <li><code>transition: transform 0.25s ease-out</code> means changes to <code>transform</code> will be transitioned over 0.25 seconds with an <code>ease-out</code> timing function.</li> <li><code>transform-origin: bottom right</code> means the transform anchor point is positioned at the bottom right of the block.</li> <li><code>:hover::after</code> then uses <code>scaleX(1)</code> to transition the width to 100%, then changes the <code>transform-origin</code> to <code>bottom left</code> so that the anchor point is reversed, allowing it transition out in the other direction when hovered off.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 94.9% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=transforms2d" target="_blank">https://caniuse.com/#feat=transforms2d</a> </li> <li> <a href="https://caniuse.com/#feat=css-transitions" target="_blank">https://caniuse.com/#feat=css-transitions</a> </li> </ul> </div> <div class="snippet"> <h3 id="mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</h3> <p>A hover effect where the gradient follows the mouse cursor.</p> <p> <small class="snippet__credit"><strong>Credit:</strong> <a href="https://codepen.io/electerious/pen/MQrRxX" target="_blank">Tobias Reich</a> </small> </p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;button class="mouse-cursor-gradient-tracking"&gt;
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__hover-underline-animation">Hover this text to see the effect!</p> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>display: inline-block</code> makes the block <code>p</code> an <code>inline-block</code> to prevent the underline from spanning the entire parent width rather than just the content (text).</li> <li><code>position: relative</code> on the element establishes a Cartesian 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> ensures the pseudo-element spans the entire width of the text block.</li> <li><code>transform: scaleX(0)</code> initially scales the pseudo element to 0 so it has no width and is not visible.</li> <li><code>bottom: 0</code> and <code>left: 0</code> position it to the bottom left of the block.</li> <li><code>transition: transform 0.25s ease-out</code> means changes to <code>transform</code> will be transitioned over 0.25 seconds with an <code>ease-out</code> timing function.</li> <li><code>transform-origin: bottom right</code> means the transform anchor point is positioned at the bottom right of the block.</li> <li><code>:hover::after</code> then uses <code>scaleX(1)</code> to transition the width to 100%, then changes the <code>transform-origin</code> to <code>bottom left</code> so that the anchor point is reversed, allowing it transition out in the other direction when hovered off.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 94.9% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=transforms2d" target="_blank">https://caniuse.com/#feat=transforms2d</a> </li> <li> <a href="https://caniuse.com/#feat=css-transitions" target="_blank">https://caniuse.com/#feat=css-transitions</a> </li> </ul> </div> <div class="snippet"> <h3 id="mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</h3> <p>A hover effect where the gradient follows the mouse cursor.</p> <p> <small class="snippet__credit"><strong>Credit:</strong> <a href="https://codepen.io/electerious/pen/MQrRxX" target="_blank">Tobias Reich</a> </small> </p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;button class="mouse-cursor-gradient-tracking"&gt;
&lt;span&gt;Hover me&lt;/span&gt;
&lt;/button&gt;
</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.mouse-cursor-gradient-tracking {
@ -239,7 +239,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
line-height: 1.2;
text-align: center;
}
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <div class="snippet-demo__overflow-scroll-gradient"> <div class="snippet-demo__overflow-scroll-gradient__scroller"> Content to be scrolled </div> </div> </div> <script>!function(){var e=document.querySelector(".snippet-demo__mouse-cursor-gradient-tracking");e.onmousemove=function(t){var o=t.pageX-e.offsetLeft-e.offsetParent.offsetLeft,r=t.pageY-e.offsetTop-e.offsetParent.offsetTop;e.style.setProperty("--x",o+"px"),e.style.setProperty("--y",r+"px")}}(),document.querySelector(".snippet-demo__overflow-scroll-gradient__scroller").innerHTML="content ".repeat(200);</script> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>position: relative</code> on the parent establishes a Cartesian positioning context for psuedo-elements.</li> <li><code>::after</code> defines a pseudo element.</li> <li><code>background-image: linear-gradient(...)</code> adds a linear gradient that fades from transparent to white (top to bottom).</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: 300px</code> matches the size of the scrolling element (which is a child of the parent that has the pseudo element).</li> <li><code>height: 25px</code> is the height of the fading gradient psuedo-element, which should be kept relatively small.</li> <li><code>bottom: 0</code> positions the pseudo-element at the bottom of the parent.</li> <li><code>pointer-events: none</code> specifies that the psuedo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 94.8% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=css-gradients" target="_blank">https://caniuse.com/#feat=css-gradients</a> </li> </ul> </div> <div class="snippet"> <h3 id="popout-menu">Popout menu</h3> <p>Reveals an interactive popout menu on hover.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="reference"&gt;
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <div class="snippet-demo__overflow-scroll-gradient"> <div class="snippet-demo__overflow-scroll-gradient__scroller"> Content to be scrolled </div> </div> </div> <script>!function(){var e=document.querySelector(".snippet-demo__mouse-cursor-gradient-tracking");e.onmousemove=function(t){var o=t.pageX-e.offsetLeft-e.offsetParent.offsetLeft,r=t.pageY-e.offsetTop-e.offsetParent.offsetTop;e.style.setProperty("--x",o+"px"),e.style.setProperty("--y",r+"px")}}(),document.querySelector(".snippet-demo__overflow-scroll-gradient__scroller").innerHTML="content ".repeat(200);</script> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>position: relative</code> on the parent establishes a Cartesian positioning context for pseudo-elements.</li> <li><code>::after</code> defines a pseudo element.</li> <li><code>background-image: linear-gradient(...)</code> adds a linear gradient that fades from transparent to white (top to bottom).</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: 300px</code> matches the size of the scrolling element (which is a child of the parent that has the pseudo element).</li> <li><code>height: 25px</code> is the height of the fading gradient pseudo-element, which should be kept relatively small.</li> <li><code>bottom: 0</code> positions the pseudo-element at the bottom of the parent.</li> <li><code>pointer-events: none</code> specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 94.8% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=css-gradients" target="_blank">https://caniuse.com/#feat=css-gradients</a> </li> </ul> </div> <div class="snippet"> <h3 id="popout-menu">Popout menu</h3> <p>Reveals an interactive popout menu on hover.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="reference"&gt;
&lt;div class="popout-menu"&gt;
Popout menu
&lt;/div&gt;
@ -289,7 +289,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
height: 24px;
bottom: 0;
}
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo is-distinct"> <div class="snippet-demo__shape-separator"></div> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>position: relative</code> on the element establishes a Cartesian positioning context for psuedo elements.</li> <li><code>::after</code> defines a pseudo element.</li> <li><code>background-image: url(...)</code> adds the SVG shape (a 24x24 triangle in base64 format) as the background image of the psuedo element, which repeats by default. It must be the same color as the block that is being separated. </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> ensures the element stretches the entire width of its parent.</li> <li><code>height: 24px</code> is the same height as the shape.</li> <li><code>bottom: 0</code> positions the pseudo element at the bottom of the parent.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 98.0% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=svg" target="_blank">https://caniuse.com/#feat=svg</a> </li> </ul> </div> <div class="snippet"> <h3 id="system-font-stack">System font stack</h3> <p>Uses the native font of the operating system to get close to a native app feel.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="system-font-stack"&gt;This text uses the system font.&lt;/p&gt;
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo is-distinct"> <div class="snippet-demo__shape-separator"></div> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>position: relative</code> on the element establishes a Cartesian positioning context for pseudo elements.</li> <li><code>::after</code> defines a pseudo element.</li> <li><code>background-image: url(...)</code> adds the SVG shape (a 24x24 triangle in base64 format) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. </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> ensures the element stretches the entire width of its parent.</li> <li><code>height: 24px</code> is the same height as the shape.</li> <li><code>bottom: 0</code> positions the pseudo element at the bottom of the parent.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 98.0% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=svg" target="_blank">https://caniuse.com/#feat=svg</a> </li> </ul> </div> <div class="snippet"> <h3 id="system-font-stack">System font stack</h3> <p>Uses the native font of the operating system to get close to a native app feel.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="system-font-stack"&gt;This text uses the system font.&lt;/p&gt;
</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.system-font-stack {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

2
index.html
View File

@ -675,7 +675,7 @@ in any specification.</span></p>
<h4 data-type="Explanation">Explanation</h4>
<ol>
<li><code>box-shadow</code>, when only using spread, adds a pseudo-border which can use subpixels*.</li>
<li>Use <code>@media (min-resolution: ...)</code> to check the device pixel ratio (<code>1ddpx</code> equals 96 DPI), setting the spread of the <code>box-shadow</code> equal to <code>1 / dppx</code>.</li>
<li>Use <code>@media (min-resolution: ...)</code> to check the device pixel ratio (<code>1dppx</code> equals 96 DPI), setting the spread of the <code>box-shadow</code> equal to <code>1 / dppx</code>.</li>
</ol>
<h4 data-type="Browser Support">Browser Support</h4>
<div>

2
snippets/hairline-border.md
View File

@ -68,7 +68,7 @@ very sharp and crisp.
#### Explanation
1. `box-shadow`, when only using spread, adds a pseudo-border which can use subpixels\*.
2. Use `@media (min-resolution: ...)` to check the device pixel ratio (`1ddpx` equals 96 DPI),
2. Use `@media (min-resolution: ...)` to check the device pixel ratio (`1dppx` equals 96 DPI),
setting the spread of the `box-shadow` equal to `1 / dppx`.
#### Browser Support