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

fix #33: Add credit to mouse tracking snippet

Browse Source
This commit is contained in:
atomiks
2018-03-01 08:32:45 +11:00
parent 3a9255ef35
commit 11feca5c9e
4 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/4d4edbda57043aeeabeac31d2dd12d0d.js
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

@ -115,7 +115,7 @@
justify-content: center;
align-items: center;
}
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <div class="snippet-demo__horizontal-and-vertical-centering"> <p class="snippet-demo__horizontal-and-vertical-centering__child">Centered content.</p> </div> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>display: flex</code> enables flexbox.</li> <li><code>justify-content: center</code> centers the child horizontally.</li> <li><code>align-items: center</code> centers the child vertically.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 97.8% </div> </div> <p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=flexbox" target="_blank">https://caniuse.com/#feat=flexbox</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> <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"> <div class="snippet-demo__horizontal-and-vertical-centering"> <p class="snippet-demo__horizontal-and-vertical-centering__child">Centered content.</p> </div> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>display: flex</code> enables flexbox.</li> <li><code>justify-content: center</code> centers the child horizontally.</li> <li><code>align-items: center</code> centers the child vertically.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 97.8% </div> </div> <p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=flexbox" target="_blank">https://caniuse.com/#feat=flexbox</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 {

5
index.html
View File

@ -574,6 +574,11 @@ in any specification.</span></p>
<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;

2
snippets/mouse-cursor-gradient-tracking.md
View File

@ -2,6 +2,8 @@
A hover effect where the gradient follows the mouse cursor.
<small class="snippet__credit">**Credit:** [Tobias Reich](https://codepen.io/electerious/pen/MQrRxX)</small>
#### HTML
```html