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

Add browser support to sibling-fade

Browse Source
This commit is contained in:
atomiks
2018-03-05 18:21:30 +10:00
parent a1399bee32
commit 21f53c14d2
4 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/3df57813b7ec2de885ea6075ff46ed46.js
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

@ -365,7 +365,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
.sibling-fade:hover span:not(:hover) { .sibling-fade:hover span:not(:hover) {
opacity: 0.5; opacity: 0.5;
} }
</code></pre> <h4>Demo</h4> <div class="snippet-demo"> <nav class="snippet-demo__sibling-fade"> <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span> <span>Item 5</span> <span>Item 6</span> </nav> </div> <h4>Explanation</h4> <ol> <li><code>transition: opacity 0.2s</code> specifies that changes to opacity will be transitioned over 0.2 seconds.</li> <li><code>.sibling-fade:hover span:not(:hover)</code> specifies that when the parent is hovered, select any <code>span</code> children that are not currently being hovered and change their opacity to <code>0.5</code>.</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 99+% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> </div> <div class="snippet"> <h3 id="system-font-stack"><span>System font stack</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></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>Demo</h4> <div class="snippet-demo"> <nav class="snippet-demo__sibling-fade"> <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span> <span>Item 5</span> <span>Item 6</span> </nav> </div> <h4>Explanation</h4> <ol> <li><code>transition: opacity 0.2s</code> specifies that changes to opacity will be transitioned over 0.2 seconds.</li> <li><code>.sibling-fade:hover span:not(:hover)</code> specifies that when the parent is hovered, select any <code>span</code> children that are not currently being hovered and change their opacity to <code>0.5</code>.</li> </ol> <h4>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=css-sel3" target="_blank">https://caniuse.com/#feat=css-sel3</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="system-font-stack"><span>System font stack</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></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 { </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, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif; Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;

10
index.html
View File

@ -1617,10 +1617,18 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<h4>Browser support</h4> <h4>Browser support</h4>
<div> <div>
<div class="snippet__browser-support"> <div class="snippet__browser-support">
99+% 94.9%
</div> </div>
</div> </div>
<p><span class="snippet__support-note">✅ No caveats.</span></p> <p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=css-sel3" target="_blank">https://caniuse.com/#feat=css-sel3</a>
</li>
<li>
<a href="https://caniuse.com/#feat=css-transitions" target="_blank">https://caniuse.com/#feat=css-transitions</a>
</li>
</ul>
<!-- tags: interactivity --> <!-- tags: interactivity -->
</div> </div>

3
snippets/sibling-fade.md
View File

@ -68,4 +68,7 @@ span {
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-sel3
* https://caniuse.com/#feat=css-transitions
<!-- tags: interactivity --> <!-- tags: interactivity -->