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

Travis build: 35 [cron]

Browse Source
This commit is contained in:
30secondsofcode
2018-10-27 20:43:03 +00:00
parent 50c995ea9f
commit 57f13902cd
3 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/index.html
View File

File diff suppressed because one or more lines are too long

13
index.html
View File

@ -314,6 +314,16 @@
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo" data-scope="calc.md">
<div class="box-example"></div>
</div>
<style>
[data-scope="calc.md"] .box-example {
height: 280px;
background: #222 url("https://image.ibb.co/fUL9nS/wolf.png") no-repeat;
background-position: calc(100% - 20px) calc(100% - 20px);
}
</style>
<p>If you want to align a background-image from right and bottom wasn't possible with just straight length values. So now it's possible using calc():</p>
<div class="snippet-demo">
<div class="snippet-demo__calc">Background-image in the right/bottom</div>
@ -2115,7 +2125,8 @@ li:not(:last-child) {
</div>
<div class="snippet">
<h3 id="pretty-text-underline"><span>Pretty text underline</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3>
<p>A nicer alternative to <code>text-decoration: underline</code> where descenders do not clip the underline. Natively implemented as <code>text-decoration-skip-ink: auto</code> but it has less control over the underline.</p>
<p>A nicer alternative to <code>text-decoration: underline</code> or <code>&lt;u&gt;&lt;/u&gt;</code> where descenders do not clip the underline. Natively implemented as <code>text-decoration-skip-ink: auto</code> but it has less control over
the underline.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="pretty-text-underline"&gt;Pretty text underline without clipping descending letters.&lt;/p&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.pretty-text-underline {

2
snippets/calc.md
View File

@ -50,6 +50,6 @@ So now it's possible using calc():
<span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=calc
- https://caniuse.com/#feat=calc
<!-- tags: other -->