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-01 08:48:24 +11:00
parent dbcc5da5db
commit c0a35555fd
3 changed files with 121 additions and 9 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

28
docs/index.html
View File

File diff suppressed because one or more lines are too long

90
index.html
View File

@ -28,6 +28,7 @@
<a class="sidebar__link" href="#gradient-text">Gradient text</a>
<a class="sidebar__link" href="#hairline-border">Hairline border</a>
<a class="sidebar__link" href="#horizontal-and-vertical-centering">Horizontal and vertical centering</a>
<a class="sidebar__link" href="#hover-underline-animation">Hover underline animation</a>
<a class="sidebar__link" href="#mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</a>
<a class="sidebar__link" href="#overflow-scroll-gradient">Overflow scroll gradient</a>
<a class="sidebar__link" href="#popout-menu">Popout menu</a>
@ -571,6 +572,95 @@ in any specification.</span></p>
</li>
</ul>
</div>
<div class="snippet">
<h3 id="hover-underline-animation">Hover underline animation</h3>
<p>Creates an animated underline effect when the text is hovered over.</p>
<p>
<small><strong>Credit:</strong>
<a href="https://flatuicolors.com/" target="_blank">https://flatuicolors.com/</a>
</small>
</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="hover-underline-animation"&gt;Hover this text to see the effect!&lt;/p&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
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>
<style>
.snippet-demo__hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.snippet-demo__hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.snippet-demo__hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>
<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>