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

Travis build: 138 [cron]

Browse Source
This commit is contained in:
30secondsofcode
2019-01-12 21:18:53 +00:00
parent afab2fdd7e
commit c0810a937b
2 changed files with 4 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/index.html
View File

@ -49,9 +49,7 @@
.content-box {
box-sizing: content-box;
}
</code></pre> <h4>Demo</h4> <div class="snippet-demo" data-scope="box-sizing-reset.md"> <div class="box">border-box</div> <div class="box content-box">content-box</div> </div> <h4>Explanation</h4> <ol> <li><code>box-sizing: border-box</code> makes the addition of <code>padding</code> or <code>border</code>s not affect an element's <code>width</code> or <code>height</code>.</li> <li><code>box-sizing: inherit</code> makes an element respect its parent's <code>box-sizing</code> rule.</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 95.9% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li><a href="https://caniuse.com/#feat=css3-boxsizing" target="_blank">https://caniuse.com/#feat=css3-boxsizing</a></li> </ul> </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>Demo</h4> <div class="snippet-demo" data-scope="box-sizing-reset.md"> <div class="box">border-box</div> <div class="box content-box">content-box</div> </div> <h4>Explanation</h4> <ol> <li><code>box-sizing: border-box</code> makes the addition of <code>padding</code> or <code>border</code>s not affect an element's <code>width</code> or <code>height</code>.</li> <li><code>box-sizing: inherit</code> makes an element respect its parent's <code>box-sizing</code> rule.</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 95.9% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li><a href="https://caniuse.com/#feat=css3-boxsizing" target="_blank">https://caniuse.com/#feat=css3-boxsizing</a></li> </ul> </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;
@ -87,7 +85,7 @@
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> <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> </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> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="box-example"&gt;&lt;/div&gt;
</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> <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> </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> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="box-example"&gt;&lt;/div&gt;
</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.box-example {
height: 280px;
background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;

8
index.html
View File

@ -242,9 +242,7 @@
<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;
<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;
@ -284,9 +282,7 @@
</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 class="button-border"><button class="button">Submit</button></div>
</div>
<style>[data-scope="button-border.md"] .button {
background-color: #c47135;