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

build

Browse Source
This commit is contained in:
Stefan Feješ
2018-03-03 11:00:14 +01:00
parent 844b07c01f
commit b1ccbffb7f
1 changed files with 52 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
index.html
View File

@ -24,7 +24,7 @@
<a class="sidebar__link" href="#clearfix"><span>Clearfix</span></a>
<a class="sidebar__link" href="#constant-width-to-height-ratio"><span>Constant width to height ratio</span></a>
<a class="sidebar__link" href="#evenly-distributed-children"><span>Evenly distributed children</span></a>
<a class="sidebar__link" href="#horizontal-and-vertical-centering"><span>Horizontal and vertical centering</span></a>
<a class="sidebar__link" href="#flexbox-centering"><span>Flexbox centering</span></a>
<a class="sidebar__link" href="#truncate-text"><span>Truncate text</span></a>
</section>
<section data-type="visual" class="sidebar__section">
@ -175,7 +175,7 @@
99+%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<p><span class="snippet__support-note">⚠️ For this snippet to work properly you need to ensure that there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).</span></p>
<!-- tags: layout -->
</div>
@ -364,7 +364,8 @@ in any specification.</span></p>
86.3%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
<span class="snippet__support-note">⚠️ This is not a secure method to prevent users from copying content.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=user-select-none" target="_blank">https://caniuse.com/#feat=user-select-none</a>
@ -626,6 +627,54 @@ in any specification.</span></p>
<!-- tags: layout -->
</div>
<div class="snippet">
<h3 id="flexbox-centering"><span>Flexbox centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Horizontally and vertically centers a child element within a parent element using <code>flexbox</code>.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="flexbox-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">.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo">
<div class="snippet-demo__flexbox-centering">
<p class="snippet-demo__flexbox-centering__child">Centered content.</p>
</div>
</div>
<style>
.snippet-demo__flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
</style>
<h4>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>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>
<!-- tags: layout -->
</div>
<div class="snippet">
<h3 id="gradient-text"><span>Gradient text</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3>
<p>Gives text a gradient color.</p>
@ -747,54 +796,6 @@ in any specification.</span></p>
<!-- tags: visual -->
</div>
<div class="snippet">
<h3 id="horizontal-and-vertical-centering"><span>Horizontal and vertical centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></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 {
display: flex;
justify-content: center;
align-items: center;
}
</code></pre>
<h4>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>
<style>
.snippet-demo__horizontal-and-vertical-centering {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
</style>
<h4>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>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>
<!-- tags: layout -->
</div>
<div class="snippet">
<h3 id="hover-underline-animation"><span>Hover underline animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
<p>Creates an animated underline effect when the text is hovered over.</p>