diff --git a/docs/3df57813b7ec2de885ea6075ff46ed46.js b/docs/3df57813b7ec2de885ea6075ff46ed46.js
index cb38ba33d..e905321a2 100644
--- a/docs/3df57813b7ec2de885ea6075ff46ed46.js
+++ b/docs/3df57813b7ec2de885ea6075ff46ed46.js
@@ -1,28 +1,28 @@
-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 =(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+""+i.tag+">"},!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:/( ✅ No caveats. Ensures that an element self-clears its children. ✅ No caveats. Ensures that an element self-clears its children. ✅ No caveats. Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant). ⚠️ For this snippet to work properly you need to ensure that there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns). Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant). You can select me. You can't select me! ⚠️ Requires prefixes for full support. Creates a donut spinner that can be used to indicate the loading of content. You can select me. You can't select me! ⚠️ Requires prefixes for full support. ⚠️ This is not a secure method to prevent users from copying content. Creates a donut spinner that can be used to indicate the loading of content. Item1 Item2 Item3 Alternatively, use ⚠️ Needs prefixes for full support. Gives text a gradient color. Item1 Item2 Item3 Alternatively, use ⚠️ Needs prefixes for full support. Horizontally and vertically centers a child element within a parent element using Centered content. ⚠️ Needs prefixes for full support. Gives text a gradient color. Gradient text ⚠️ Uses non-standard properties. Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp. Gradient text ⚠️ Uses non-standard properties. Horizontally and vertically centers a child element within a parent element using Centered content. ✅ No caveats. Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp. Text with a hairline border around it. ⚠️ Needs alternate syntax and JavaScript user agent checking for full support. *Chrome does not support subpixel values on Horizontally and vertically centers a child element within a parent element. Centered content. ⚠️ Needs prefixes for full support. Creates an animated underline effect when the text is hovered over. Credit: https://flatuicolors.com/ Text with a hairline border around it. ⚠️ Needs alternate syntax and JavaScript user agent checking for full support. *Chrome does not support subpixel values on Creates an animated underline effect when the text is hovered over. Credit: https://flatuicolors.com/ ✅ No caveats. ⚠️ For this snippet to work properly you need to ensure that there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).Explanation
box-sizing: border-box makes the addition of padding or borders not affect an element's width or height.box-sizing: inherit makes an element respect its parent's box-sizing rule.Browser support
Clearfix
Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
HTML
<div class="clearfix">
+Demo
Explanation
box-sizing: border-box makes the addition of padding or borders not affect an element's width or height.box-sizing: inherit makes an element respect its parent's box-sizing rule.Browser support
Clearfix
Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
HTML
<div class="clearfix">
<div class="floated">float a</div>
<div class="floated">float b</div>
<div class="floated">float c</div>
@@ -19,7 +19,7 @@
.floated {
float: left;
}
-Demo
Explanation
.clearfix::after defines a pseudo-element.content: '' allows the pseudo-element to affect layout.clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.Browser support
Constant width to height ratio
HTML
<div class="constant-width-to-height-ratio"></div>
+Demo
Explanation
.clearfix::after defines a pseudo-element.content: '' allows the pseudo-element to affect layout.clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.Browser support
Constant width to height ratio
HTML
<div class="constant-width-to-height-ratio"></div>
CSS
.constant-width-to-height-ratio {
background: #333;
width: 50%;
@@ -57,7 +57,7 @@
CSS
.unselectable {
user-select: none;
}
-Demo
Explanation
user-select: none specifies that the text cannot be selected.Browser support
Donut spinner
HTML
<div class="donut"></div>
+Demo
Explanation
user-select: none specifies that the text cannot be selected.Browser support
Donut spinner
HTML
<div class="donut"></div>
CSS
@keyframes donut-spin {
0% {
transform: rotate(0deg);
@@ -121,13 +121,29 @@
display: flex;
justify-content: space-between;
}
-Demo
Explanation
display: flex enables flexbox.justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.justify-content: space-around to distribute the children with space around them, rather than between them.Browser support
Gradient text
HTML
<p class="gradient-text">Gradient text</p>
+Demo
Explanation
display: flex enables flexbox.justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.justify-content: space-around to distribute the children with space around them, rather than between them.Browser support
Flexbox centering
flexbox.HTML
<div class="flexbox-centering">
+ <div class="child"></div>
+</div>
+CSS
.flexbox-centering {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+Demo
Explanation
display: flex enables flexbox.justify-content: center centers the child horizontally.align-items: center centers the child vertically.Browser support
Gradient text
HTML
<p class="gradient-text">Gradient text</p>
CSS
.gradient-text {
background: -webkit-linear-gradient(pink, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
-Demo
Explanation
background: -webkit-linear-gradient(...) gives the text element a gradient background.webkit-text-fill-color: transparent fills the text with a transparent color.webkit-background-clip: text clips the background with the text, filling the text with the gradient background as the color.Browser support
Hairline border
HTML
<div class="hairline-border">text</div>
+Demo
Explanation
background: -webkit-linear-gradient(...) gives the text element a gradient background.webkit-text-fill-color: transparent fills the text with a transparent color.webkit-background-clip: text clips the background with the text, filling the text with the gradient background as the color.Browser support
Grid centering
grid.HTML
<div class="grid-centering">
+ <div class="child"></div>
+</div>
+CSS
.grid-centering {
+ display: grid;
+ justify-content: center;
+ align-items: center;
+}
+Demo
Explanation
display: grid enables grid.justify-content: center centers the child horizontally.align-items: center centers the child vertically.Browser support
Hairline border
HTML
<div class="hairline-border">text</div>
CSS
.hairline-border {
box-shadow: 0 0 0 1px;
}
@@ -146,15 +162,7 @@
box-shadow: 0 0 0 0.25px;
}
}
-Demo
Explanation
box-shadow, when only using spread, adds a pseudo-border which can use subpixels*.@media (min-resolution: ...) to check the device pixel ratio (1dppx equals 96 DPI), setting the spread of the box-shadow equal to 1 / dppx.Browser Support
border. Safari does not support subpixel values on box-shadow. Firefox supports subpixel values on both.Horizontal and vertical centering
HTML
<div class="horizontal-and-vertical-centering">
- <div class="child"></div>
-</div>
-CSS
.horizontal-and-vertical-centering {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-Demo
Explanation
display: flex enables flexbox.justify-content: center centers the child horizontally.align-items: center centers the child vertically.Browser support
Hover underline animation
HTML
<p class="hover-underline-animation">Hover this text to see the effect!</p>
+Demo
Explanation
box-shadow, when only using spread, adds a pseudo-border which can use subpixels*.@media (min-resolution: ...) to check the device pixel ratio (1dppx equals 96 DPI), setting the spread of the box-shadow equal to 1 / dppx.Browser Support
border. Safari does not support subpixel values on box-shadow. Firefox supports subpixel values on both.Hover underline animation
HTML
<p class="hover-underline-animation">Hover this text to see the effect!</p>
CSS
.hover-underline-animation {
display: inline-block;
position: relative;
diff --git a/index.html b/index.html
index 621a544c0..421176252 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,8 @@
Clearfix
Constant width to height ratio
Evenly distributed children
- Horizontal and vertical centering
+ Flexbox centering
+ Grid centering
Truncate text
⚠️ Requires prefixes for full support.
+⚠️ Requires prefixes for full support. + ⚠️ This is not a secure method to prevent users from copying content.
Horizontally and vertically centers a child element within a parent element using flexbox.
<div class="flexbox-centering">
+ <div class="child"></div>
+</div>
+
+ .flexbox-centering {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+ Centered content.
+display: flex enables flexbox.justify-content: center centers the child horizontally.align-items: center centers the child vertically.⚠️ Needs prefixes for full support.
+ + + +Gives text a gradient color.
@@ -674,6 +724,54 @@ in any specification.Horizontally and vertically centers a child element within a parent element using grid.
<div class="grid-centering">
+ <div class="child"></div>
+</div>
+
+ .grid-centering {
+ display: grid;
+ justify-content: center;
+ align-items: center;
+}
+
+ Centered content.
+display: grid enables grid.justify-content: center centers the child horizontally.align-items: center centers the child vertically.✅ No caveats.
+ + + +Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.
@@ -747,54 +845,6 @@ in any specification.Horizontally and vertically centers a child element within a parent element.
-<div class="horizontal-and-vertical-centering">
- <div class="child"></div>
-</div>
-
- .horizontal-and-vertical-centering {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
- Centered content.
-display: flex enables flexbox.justify-content: center centers the child horizontally.align-items: center centers the child vertically.⚠️ Needs prefixes for full support.
- - - -Creates an animated underline effect when the text is hovered over.
diff --git a/snippets/horizontal-and-vertical-centering.md b/snippets/flexbox-centering.md similarity index 67% rename from snippets/horizontal-and-vertical-centering.md rename to snippets/flexbox-centering.md index 0bb259d7a..19074bb0b 100644 --- a/snippets/horizontal-and-vertical-centering.md +++ b/snippets/flexbox-centering.md @@ -1,11 +1,11 @@ -### Horizontal and vertical centering +### Flexbox centering -Horizontally and vertically centers a child element within a parent element. +Horizontally and vertically centers a child element within a parent element using `flexbox`. #### HTML ```html -Centered content.
+Centered content.