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

Travis build: 136 [FORCED]

Browse Source
This commit is contained in:
30secondsofcode
2019-01-12 12:10:11 +00:00
parent cd579ab6ae
commit afab2fdd7e
3 changed files with 141 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/index.html
View File

File diff suppressed because one or more lines are too long

103
index.html
View File

@ -38,7 +38,7 @@
</section>
<section data-type="animation" class="sidebar__section">
<h4 class="sidebar__section-heading">animation</h4>
<a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-shadow-box-animation"><span>Hover Shadow Box Animation</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
<a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#button-border"><span>Button border animation</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-shadow-box-animation"><span>Hover Shadow Box Animation</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
</section>
<section data-type="interactivity" class="sidebar__section">
<h4 class="sidebar__section-heading">interactivity</h4>
@ -239,6 +239,99 @@
<!-- tags: layout -->
</div>
<div class="snippet">
<h3 id="button-border-animation"><span>Button border animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
<p>Creates a border animation on hover.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="button-border"&gt;
&lt;button class="button"&gt;Submit&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.button {
background-color: #c47135;
border: none;
color: #ffffff;
outline: none;
padding: 12px 40px 10px;
position: relative;
}
.button:before,
.button:after {
border: 0 solid transparent;
transition: all 0.25s;
content: '';
height: 24px;
position: absolute;
width: 24px;
}
.button:before {
border-top: 2px solid #c47135;
left: 0px;
top: -5px;
}
.button:after {
border-bottom: 2px solid #c47135;
bottom: -5px;
right: 0px;
}
.button:hover {
background-color: #c47135;
}
.button:hover:before,
.button:hover:after {
height: 100%;
width: 100%;
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo" data-scope="button-border.md">
<div class="button-border">
<button class="button">Submit</button>
</div>
</div>
<style>[data-scope="button-border.md"] .button {
background-color: #c47135;
border: none;
color: #ffffff;
outline: none;
padding: 12px 40px 10px;
position: relative; }
[data-scope="button-border.md"] .button:before,
[data-scope="button-border.md"] .button:after {
border: 0 solid transparent;
transition: all 0.25s;
content: '';
height: 24px;
position: absolute;
width: 24px; }
[data-scope="button-border.md"] .button:before {
border-top: 2px solid #c47135;
left: 0px;
top: -5px; }
[data-scope="button-border.md"] .button:after {
border-bottom: 2px solid #c47135;
bottom: -5px;
right: 0px; }
[data-scope="button-border.md"] .button:hover {
background-color: #c47135; }
[data-scope="button-border.md"] .button:hover:before,
[data-scope="button-border.md"] .button:hover:after {
height: 100%;
width: 100%; }
</style>
<h4>Explanation</h4>
<p>Use the <code>:before</code> and <code>:after</code> pseduo-elements as borders that animate on hover.</p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: animation -->
<!-- date: 2018-10-30 -->
</div>
<div class="snippet">
<h3 id="calc"><span>Calc()</span><span class="tags__tag snippet__tag" data-type="other"><i data-feather="tag"></i>other</span></h3>
<p>The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.</p>
@ -1334,9 +1427,7 @@ If no link is provided, it defaults to 99+%. -->
<h3 id="ghost-trick"><span>Ghost trick</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Vertically centers an element in another.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="ghost-trick"&gt;
&lt;div class="ghosting"&gt;
&lt;p&gt;Vertically centered without changing the position property.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="ghosting"&gt;&lt;p&gt;Vertically centered without changing the position property.&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.ghosting {
@ -1344,7 +1435,7 @@ If no link is provided, it defaults to 99+%. -->
background: #0ff;
}
.ghosting:before {
content: "";
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
@ -1366,7 +1457,7 @@ p {
height: 300px;
background: #0ff; }
[data-scope="ghost-trick.md"] .ghosting:before {
content: "";
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }

4
snippets/button-border.md
View File

@ -5,9 +5,7 @@ Creates a border animation on hover.
#### HTML
```html
<div class="button-border">
<button class="button">Submit</button>
</div>
<div class="button-border"><button class="button">Submit</button></div>
```
#### CSS