diff --git a/docs/3df57813b7ec2de885ea6075ff46ed46.js b/docs/3df57813b7ec2de885ea6075ff46ed46.js index 9c89cbf75..7ec464a0c 100644 --- a/docs/3df57813b7ec2de885ea6075ff46ed46.js +++ b/docs/3df57813b7ec2de885ea6075ff46ed46.js @@ -1,30 +1,30 @@ -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;ie.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight)); -},{}],20:[function(require,module,exports) { +},{}],29:[function(require,module,exports) { var global = (1,eval)("this"); var e=(0,eval)("this");!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.feather=n():e.feather=n()}("undefined"!=typeof self?self:this,function(){return function(e){var n={};function i(t){if(n[t])return n[t].exports;var l=n[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,i),l.l=!0,l.exports}return i.m=e,i.c=n,i.d=function(e,n,t){i.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:t})},i.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(n,"a",n),n},i.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},i.p="",i(i.s=49)}([function(e,n,i){var t=i(36)("wks"),l=i(15),r=i(1).Symbol,o="function"==typeof r;(e.exports=function(e){return t[e]||(t[e]=o&&r[e]||(o?r:l)("Symbol."+e))}).store=t},function(e,n){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,n){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,n,i){var t=i(1),l=i(7),r=i(8),o=i(10),a=i(11),c=function(e,n,i){var y,p,h,x,s=e&c.F,u=e&c.G,f=e&c.S,d=e&c.P,v=e&c.B,g=u?t:f?t[n]||(t[n]={}):(t[n]||{}).prototype,m=u?l:l[n]||(l[n]={}),M=m.prototype||(m.prototype={});for(y in u&&(i=n),i)h=((p=!s&&g&&void 0!==g[y])?g:i)[y],x=v&&p?a(h,t):d&&"function"==typeof h?a(Function.call,h):h,g&&o(g,y,h,e&c.U),m[y]!=h&&r(m,y,x),d&&M[y]!=h&&(M[y]=h)};t.core=l,c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,e.exports=c},function(e,n,i){var t=i(9),l=i(29),r=i(31),o=Object.defineProperty;n.f=i(5)?Object.defineProperty:function(e,n,i){if(t(e),n=r(n,!0),t(i),l)try{return o(e,n,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[n]=i.value),e}},function(e,n,i){e.exports=!i(12)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,n){var i={}.hasOwnProperty;e.exports=function(e,n){return i.call(e,n)}},function(e,n){var i=e.exports={version:"2.5.3"};"number"==typeof __e&&(__e=i)},function(e,n,i){var t=i(4),l=i(14);e.exports=i(5)?function(e,n,i){return t.f(e,n,l(1,i))}:function(e,n,i){return e[n]=i,e}},function(e,n,i){var t=i(2);e.exports=function(e){if(!t(e))throw TypeError(e+" is not an object!");return e}},function(e,n,i){var t=i(1),l=i(8),r=i(6),o=i(15)("src"),a=Function.toString,c=(""+a).split("toString");i(7).inspectSource=function(e){return a.call(e)},(e.exports=function(e,n,i,a){var y="function"==typeof i;y&&(r(i,"name")||l(i,"name",n)),e[n]!==i&&(y&&(r(i,o)||l(i,o,e[n]?""+e[n]:c.join(String(n)))),e===t?e[n]=i:a?e[n]?e[n]=i:l(e,n,i):(delete e[n],l(e,n,i)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[o]||a.call(this)})},function(e,n,i){var t=i(32);e.exports=function(e,n,i){if(t(e),void 0===n)return e;switch(i){case 1:return function(i){return e.call(n,i)};case 2:return function(i,t){return e.call(n,i,t)};case 3:return function(i,t,l){return e.call(n,i,t,l)}}return function(){return e.apply(n,arguments)}}},function(e,n){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,n){e.exports={}},function(e,n){e.exports=function(e,n){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:n}}},function(e,n){var i=0,t=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+t).toString(36))}},function(e,n,i){var t=i(34),l=i(19);e.exports=function(e){return t(l(e))}},function(e,n,i){var t=i(11),l=i(38),r=i(39),o=i(9),a=i(22),c=i(40),y={},p={};(n=e.exports=function(e,n,i,h,x){var s,u,f,d,v=x?function(){return e}:c(e),g=t(i,h,n?2:1),m=0;if("function"!=typeof v)throw TypeError(e+" is not iterable!");if(r(v)){for(s=a(e.length);s>m;m++)if((d=n?g(o(u=e[m])[0],u[1]):g(e[m]))===y||d===p)return d}else for(f=v.call(e);!(u=f.next()).done;)if((d=l(f,g,u.value,n))===y||d===p)return d}).BREAK=y,n.RETURN=p},function(e,n){var i=Math.ceil,t=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?t:i)(e)}},function(e,n){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,n,i){"use strict";var t=i(52),l=i(3),r=i(10),o=i(8),a=i(6),c=i(13),y=i(53),p=i(24),h=i(59),x=i(0)("iterator"),s=!([].keys&&"next"in[].keys()),u=function(){return this};e.exports=function(e,n,i,f,d,v,g){y(i,n,f);var m,M,w,b=function(e){if(!s&&e in k)return k[e];switch(e){case"keys":case"values":return function(){return new i(this,e)}}return function(){return new i(this,e)}},A=n+" Iterator",_="values"==d,z=!1,k=e.prototype,S=k[x]||k["@@iterator"]||d&&k[d],H=!s&&S||b(d),V=d?_?b("entries"):H:void 0,O="Array"==n&&k.entries||S;if(O&&(w=h(O.call(new e)))!==Object.prototype&&w.next&&(p(w,A,!0),t||a(w,x)||o(w,x,u)),_&&S&&"values"!==S.name&&(z=!0,H=function(){return S.call(this)}),t&&!g||!s&&!z&&k[x]||o(k,x,H),c[n]=H,c[A]=u,d)if(m={values:_?H:b("values"),keys:v?H:b("keys"),entries:V},g)for(M in m)M in k||r(k,M,m[M]);else l(l.P+l.F*(s||z),n,m);return m}},function(e,n,i){var t=i(55),l=i(37);e.exports=Object.keys||function(e){return t(e,l)}},function(e,n,i){var t=i(18),l=Math.min;e.exports=function(e){return e>0?l(t(e),9007199254740991):0}},function(e,n,i){var t=i(36)("keys"),l=i(15);e.exports=function(e){return t[e]||(t[e]=l(e))}},function(e,n,i){var t=i(4).f,l=i(6),r=i(0)("toStringTag");e.exports=function(e,n,i){e&&!l(e=i?e:e.prototype,r)&&t(e,r,{configurable:!0,value:n})}},function(e,n,i){var t=i(19);e.exports=function(e){return Object(t(e))}},function(e,n,i){var t=i(35),l=i(0)("toStringTag"),r="Arguments"==t(function(){return arguments}());e.exports=function(e){var n,i,o;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(i=function(e,n){try{return e[n]}catch(e){}}(n=Object(e),l))?i:r?t(n):"Object"==(o=t(n))&&"function"==typeof n.callee?"Arguments":o}},function(e,n,i){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=o(i(86)),l=o(i(88)),r=o(i(89));function o(e){return e&&e.__esModule?e:{default:e}}n.default=Object.keys(l.default).map(function(e){return new t.default(e,l.default[e],r.default[e])}).reduce(function(e,n){return e[n.name]=n,e},{})},function(e,n,i){"use strict";var t=i(51)(!0);i(20)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,n=this._t,i=this._i;return i>=n.length?{value:void 0,done:!0}:(e=t(n,i),this._i+=e.length,{value:e,done:!1})})},function(e,n,i){e.exports=!i(5)&&!i(12)(function(){return 7!=Object.defineProperty(i(30)("div"),"a",{get:function(){return 7}}).a})},function(e,n,i){var t=i(2),l=i(1).document,r=t(l)&&t(l.createElement);e.exports=function(e){return r?l.createElement(e):{}}},function(e,n,i){var t=i(2);e.exports=function(e,n){if(!t(e))return e;var i,l;if(n&&"function"==typeof(i=e.toString)&&!t(l=i.call(e)))return l;if("function"==typeof(i=e.valueOf)&&!t(l=i.call(e)))return l;if(!n&&"function"==typeof(i=e.toString)&&!t(l=i.call(e)))return l;throw TypeError("Can't convert object to primitive value")}},function(e,n){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,n,i){var t=i(9),l=i(54),r=i(37),o=i(23)("IE_PROTO"),a=function(){},c=function(){var e,n=i(30)("iframe"),t=r.length;for(n.style.display="none",i(58).appendChild(n),n.src="javascript:",(e=n.contentWindow.document).open(),e.write("

30 Seconds of CSS

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Star

Bouncing loaderanimation

Creates a bouncing loader animation.

HTML

<div class="bouncing-loader">
+     30 Seconds of CSS         
 
 
  
30 Seconds of CSS
 
 A curated collection of useful CSS snippets you can understand in 30 seconds or less. 
 Star 
 
 
 
  
 
Bouncing loaderanimation
 
Creates a bouncing loader animation.
 
HTML
<div class="bouncing-loader">
   <div></div>
   <div></div>
   <div></div>
@@ -31,7 +31,7 @@
 .bouncing-loader > div:nth-of-type(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.  
  2.  
    .bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the in the center.
     
    3.  
  3.  
    Using .bouncing-loader > div, we target 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.  
  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.  
  5.  
    animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
     
    6.  
  6.  
    animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
     
    7.  
 
Browser support
 
 
 94.8% 
 
 
✅ 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.  
  2.  
    .bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the in the center.
     
    3.  
  3.  
    Using .bouncing-loader > div, we target 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.  
  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.  
  5.  
    animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
     
    6.  
  6.  
    animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
     
    7.  
 
Browser support
 
 
 94.8% 
 
 
✅ 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;
 }
 *,
@@ -343,7 +343,22 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   height: 24px;
   bottom: 0;
 }
-
 
Demo
 
 
 
  
Explanation
 
     
  1. position: relative on the element establishes a Cartesian positioning context for pseudo elements.
    2.  
  2. ::after defines a pseudo element.
    3.  
  3. background-image: url(...) adds the SVG shape (a 24x24 triangle in base64 format) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. 
    4.  
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
    5.  
  5. width: 100% ensures the element stretches the entire width of its parent.
    6.  
  6. height: 24px is the same height as the shape.
    7.  
  7. bottom: 0 positions the pseudo element at the bottom of the parent.
    8.  
 
Browser support
 
 
 98.0% 
 
 
✅ No caveats.
   
 
 
System font stackvisual
 
Uses the native font of the operating system to get close to a native app feel.
 
HTML
<p class="system-font-stack">This text uses the system font.</p>
+
 
Demo
 
 
 
  
Explanation
 
     
  1. position: relative on the element establishes a Cartesian positioning context for pseudo elements.
    2.  
  2. ::after defines a pseudo element.
    3.  
  3. background-image: url(...) adds the SVG shape (a 24x24 triangle in base64 format) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. 
    4.  
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
    5.  
  5. width: 100% ensures the element stretches the entire width of its parent.
    6.  
  6. height: 24px is the same height as the shape.
    7.  
  7. bottom: 0 positions the pseudo element at the bottom of the parent.
    8.  
 
Browser support
 
 
 98.0% 
 
 
✅ No caveats.
   
 
 
Sibling fadeinteractivity
 
Fades out the siblings of a hovered item.
 
HTML
<div class="sibling-fade">
+  <span>Item 1</span>
+  <span>Item 2</span>
+  <span>Item 3</span>
+  <span>Item 4</span>
+  <span>Item 5</span>
+  <span>Item 6</span>
+</div>
+
 
CSS
span {
+  padding: 0 1rem;
+  transition: opacity 0.2s;
+}
+.sibling-fade:hover span:not(:hover) {
+  opacity: 0.5;
+}
+
 
Demo
 
  
  
Explanation
 
     
  1. transition: opacity 0.2s specifies that changes to opacity will be transitioned over 0.2 seconds.
    2.  
  2. .sibling-fade:hover span:not(:hover) specifies that when the parent is hovered, select any span children that are not currently being hovered and change their opacity to 0.5.
    3.  
 
Browser support
 
 
 99+% 
 
 
✅ No caveats.
  
 
 
System font stackvisual
 
Uses the native font of the operating system to get close to a native app feel.
 
HTML
<p class="system-font-stack">This text uses the system font.</p>
 
 
CSS
.system-font-stack {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
     Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
diff --git a/index.html b/index.html
index 753e6b4dd..7f9713d75 100644
--- a/index.html
+++ b/index.html
@@ -54,6 +54,7 @@
           Disable selection
           Mouse cursor gradient tracking
           Popout menu
+          Sibling fade
         
       

     
@@ -1520,6 +1521,66 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
 
             
           

+          

+            
Sibling fadeinteractivity

+            
Fades out the siblings of a hovered item.

+            
HTML
<div class="sibling-fade">
+  <span>Item 1</span>
+  <span>Item 2</span>
+  <span>Item 3</span>
+  <span>Item 4</span>
+  <span>Item 5</span>
+  <span>Item 6</span>
+</div>
+

+            
CSS
span {
+  padding: 0 1rem;
+  transition: opacity 0.2s;
+}
+.sibling-fade:hover span:not(:hover) {
+  opacity: 0.5;
+}
+

+            
Demo

+            

+              
+            

+            
+            
Explanation

+            
    
+              
  1. transition: opacity 0.2s specifies that changes to opacity will be transitioned over 0.2 seconds.
    2. 
+              
  2. .sibling-fade:hover span:not(:hover) specifies that when the parent is hovered, select any span children that are not currently being hovered and change their opacity to 0.5.
    3. 
+            

+            
Browser support

+            

+              

+                99+%
+              

+            

+            
✅ No caveats.

+
+            
+          

           

             
System font stackvisual

             
Uses the native font of the operating system to get close to a native app feel.

diff --git a/snippets/sibling-fade.md b/snippets/sibling-fade.md
new file mode 100644
index 000000000..06261c13b
--- /dev/null
+++ b/snippets/sibling-fade.md
@@ -0,0 +1,71 @@
+### Sibling fade
+
+Fades out the siblings of a hovered item.
+
+#### HTML
+
+```html
+

+  Item 1
+  Item 2
+  Item 3
+  Item 4
+  Item 5
+  Item 6
+

+```
+
+#### CSS
+
+```css
+span {
+  padding: 0 1rem;
+  transition: opacity 0.2s;
+}
+
+.sibling-fade:hover span:not(:hover) {
+  opacity: 0.5;
+}
+```
+
+#### Demo
+
+

+  
+

+
+
+
+#### Explanation
+
+1. `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.2 seconds.
+2. `.sibling-fade:hover span:not(:hover)` specifies that when the parent is hovered, select any `span` children
+   that are not currently being hovered and change their opacity to `0.5`.
+
+#### Browser support
+
+✅ No caveats.
+
+