diff --git a/docs/3df57813b7ec2de885ea6075ff46ed46.js b/docs/3df57813b7ec2de885ea6075ff46ed46.js index 4c2411155..cf7181ed8 100644 --- a/docs/3df57813b7ec2de885ea6075ff46ed46.js +++ b/docs/3df57813b7ec2de885ea6075ff46ed46.js @@ -1,6 +1,6 @@ -require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;i span").textContent,html:a?a.textContent:"",js:i?i.textContent:""};n.value=JSON.stringify(l),t.appendChild(n),t.appendChild(r),e.insertBefore(t,e.querySelector(".snippet-demo").nextSibling)}); },{"../deps/utils":18}],7:[function(require,module,exports) { "use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=require("feather-icons"),r=l(e);require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var s=require("./components/Sidebar"),i=l(s),o=require("./components/BackToTopButton"),u=l(o),n=require("./components/Tag"),c=l(n),p=require("./components/Snippet"),t=l(p),q=require("./components/CodepenCopy"),a=l(q);function l(e){return e&&e.__esModule?e:{default:e}}r.default.replace(); -},{"focus-visible":19,"normalize.css":20,"prismjs":22,"feather-icons":21,"../css/deps/prism.css":20,"../css/index.scss":20,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":14,"./components/Snippet":15,"./components/CodepenCopy":16}]},{},[7]) \ No newline at end of file +},{"focus-visible":20,"normalize.css":19,"prismjs":22,"feather-icons":21,"../css/deps/prism.css":19,"../css/index.scss":19,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":14,"./components/Snippet":15,"./components/CodepenCopy":16}]},{},[7]) \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 4be387020..6235a87ae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -31,7 +31,7 @@ .bouncing-loader > div:nth-child(3) { animation-delay: 0.4s; } -

Demo

Explanation

Note: 1rem is usually 16px.

  1. @keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translateY().

  2. .bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.

  3. .bouncing-loader > div, targets the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.

  4. margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.

  5. animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.

  6. nth-child(n) targets the element which is the nth child of its parent.

  7. animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.

Browser support

95.3%

✅ No caveats.

Box-sizing resetlayout

Resets the box-model so that widths and heights are not affected by their borders or padding.

CSS

html {
+

Demo

Explanation

Note: 1rem is usually 16px.

  1. @keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translateY().

  2. .bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.

  3. .bouncing-loader > div, targets the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.

  4. margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.

  5. animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.

  6. nth-child(n) targets the element which is the nth child of its parent.

  7. animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.

Browser support

95.3%

✅ No caveats.

Box-sizing resetlayout

Resets the box-model so that widths and heights are not affected by their borders or padding.

CSS

html {
   box-sizing: border-box;
 }
 *,
@@ -439,14 +439,12 @@ li:not(:last-child) {
 }

Demo

Popout menu

Explanation

  1. position: relative on the reference parent establishes a Cartesian positioning context for its child.
  2. position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.
  3. left: 100% moves the the popout menu 100% of its parent's width from the left.
  4. visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none).
  5. .reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout.

Browser support

99+%

✅ No caveats.

Pretty text underlinevisual

A nicer alternative to text-decoration: underline where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.

HTML

<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>

CSS

.pretty-text-underline {
-  font-family: Arial, sans-serif;
   display: inline;
-  font-size: 18px;
-  text-shadow: 1px 1px 0 #f5f6f9, -1px 1px 0 #f5f6f9, -1px -1px 0 #f5f6f9, 1px -1px 0 #f5f6f9;
+  text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
   background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
-  background-position: 0 0.98em;
-  background-repeat: repeat-x;
-  background-size: 1px 1px;
+  background-position: bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 1px;
 }
 .pretty-text-underline::-moz-selection {
   background-color: rgba(0, 150, 255, 0.3);
@@ -456,7 +454,7 @@ li:not(:last-child) {
   background-color: rgba(0, 150, 255, 0.3);
   text-shadow: none;
 }
-

Demo

Pretty text underline without clipping descending letters.

Explanation

  1. text-shadow: ... has 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger px size.
  2. background-image: linear-gradient(...) creates a 90deg gradient with the current text color (currentColor).
  3. The background-* properties size the gradient as 1x1px at the bottom and repeats it along the x-axis.
  4. The ::selection pseudo selector ensures the text shadow does not interfere with text selection.

Browser support

95.4%

⚠️ 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).

Reset all stylesvisual

Resets all styles to default values with one property. This will not affect direction and unicode-bidi properties.

HTML

<div class="reset-all-styles">
+

Demo

Pretty text underline without clipping descending letters.

Explanation

  1. text-shadow uses 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger px size. Additional values can create an even thicker shadow, and subpixel values can also be used.
  2. background-image: linear-gradient(...) creates a 90deg gradient using the text color (currentColor).
  3. The background-* properties size the gradient as 100% of the width of the block and 1px in height at the bottom and disables repetition, which creates a 1px underline beneath the text.
  4. The ::selection pseudo selector rule ensures the text shadow does not interfere with text selection.

Browser support

95.4%

✅ No caveats.

Reset all stylesvisual

Resets all styles to default values with one property. This will not affect direction and unicode-bidi properties.

HTML

<div class="reset-all-styles">
   <h4>Title</h4>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
 </div>
diff --git a/index.html b/index.html
index 07832337d..89a5d54c0 100644
--- a/index.html
+++ b/index.html
@@ -1907,14 +1907,12 @@ li:not(:last-child) {
             
HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
 

             
CSS
.pretty-text-underline {
-  font-family: Arial, sans-serif;
   display: inline;
-  font-size: 18px;
-  text-shadow: 1px 1px 0 #f5f6f9, -1px 1px 0 #f5f6f9, -1px -1px 0 #f5f6f9, 1px -1px 0 #f5f6f9;
+  text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
   background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
-  background-position: 0 0.98em;
-  background-repeat: repeat-x;
-  background-size: 1px 1px;
+  background-position: bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 1px;
 }
 .pretty-text-underline::-moz-selection {
   background-color: rgba(0, 150, 255, 0.3);
@@ -1931,14 +1929,12 @@ li:not(:last-child) {

Explanation

    -
  1. text-shadow: ... has 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use - a larger px size.
    2. -
  2. background-image: linear-gradient(...) creates a 90deg gradient with the current text color (currentColor).
    3. -
  3. The background-* properties size the gradient as 1x1px at the bottom and repeats it along the x-axis.
    4. -
  4. The ::selection pseudo selector ensures the text shadow does not interfere with text selection. +
  5. text-shadow uses 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger + px size. Additional values can create an even thicker shadow, and subpixel values can also be used.
    6. +
  6. background-image: linear-gradient(...) creates a 90deg gradient using the text color (currentColor).
    7. +
  7. The background-* properties size the gradient as 100% of the width of the block and 1px in height at the bottom and disables repetition, which creates a 1px underline beneath the text.
    8. +
  8. The ::selection pseudo selector rule ensures the text shadow does not interfere with text selection.

Browser support

@@ -1964,7 +1960,7 @@ li:not(:last-child) { 95.4% -

⚠️ 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).

+

✅ No caveats.

  • https://caniuse.com/#feat=css-textshadow diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md index ba2e137c4..fb698592e 100644 --- a/snippets/pretty-text-underline.md +++ b/snippets/pretty-text-underline.md @@ -13,14 +13,12 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control ```css .pretty-text-underline { - font-family: Arial, sans-serif; display: inline; - font-size: 18px; - text-shadow: 1px 1px 0 #f5f6f9, -1px 1px 0 #f5f6f9, -1px -1px 0 #f5f6f9, 1px -1px 0 #f5f6f9; + text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9; background-image: linear-gradient(90deg, currentColor 100%, transparent 100%); - background-position: 0 0.98em; - background-repeat: repeat-x; - background-size: 1px 1px; + background-position: bottom; + background-repeat: no-repeat; + background-size: 100% 1px; } .pretty-text-underline::-moz-selection { background-color: rgba(0, 150, 255, 0.3); @@ -40,17 +38,15 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control