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-02 20:22:33 +10:00
parent 7831e1081f
commit 6d9560aad8
10 changed files with 19 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -1115,6 +1115,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<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 {
font-family: Arial, sans-serif;
display: inline;
font-size: 18px;
text-shadow: 1px 1px 0 #f5f6f9,
@ -1122,7 +1123,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
-1px -1px 0 #f5f6f9,
1px -1px 0 #f5f6f9;
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
background-position: 0 1.04em;
background-position: 0 0.98em;
background-repeat: repeat-x;
background-size: 1px 1px;
}
@ -1141,11 +1142,12 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
</div>
<style>
.snippet-demo__pretty-text-underline {
font-family: Arial, sans-serif;
display: inline;
font-size: 18px !important;
text-shadow: 1px 1px 0 #f5f6f9, -1px 1px 0 #f5f6f9, -1px -1px 0 #f5f6f9, 1px -1px 0 #f5f6f9;
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
background-position: 0 1.04em;
background-position: 0 0.98em;
background-repeat: repeat-x;
background-size: 1px 1px;
}
@ -1173,7 +1175,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
94.8%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Firefox requires a vendor prefix for the selection pseudo-selector to work.</span></p>
<p><span class="snippet__support-note">⚠️ The distance of the underline from the text depends on the internal metrics of a font, so you must ensure everyone sees the same font (i.e. no system fonts which will change based on the OS).</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=css-textshadow" target="_blank">https://caniuse.com/#feat=css-textshadow</a>