Travis build: 718
This commit is contained in:
30secondsofcode
@ -257,7 +257,7 @@
|
||||
"explanation": "\n\n1. `::-webkit-scrollbar` targets the whole scrollbar element.\n2. `::-webkit-scrollbar-track` targets only the scrollbar track.\n3. `::-webkit-scrollbar-thumb` targets the scrollbar thumb.\n\nThere are many other pseudo-elements that you can use to style scrollbars. For more info, visit the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/).\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n<span class=\"snippet__support-note\">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span>\n\n- https://caniuse.com/#feat=css-scrollbar\n",
|
||||
"supportPercentage": 98.63
|
||||
"supportPercentage": 98.91
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<div class=\"custom-scrollbar\">\n <p>\n Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />\n Iure id exercitationem nulla qui repellat laborum vitae, <br />\n molestias tempora velit natus. Quas, assumenda nisi. <br />\n Quisquam enim qui iure, consequatur velit sit?\n </p>\n</div>",
|
||||
@ -288,7 +288,7 @@
|
||||
"explanation": "\n\n- `::selection` defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n<span class=\"snippet__support-note\">⚠️ Requires prefixes for full support and is not actually in any specification.</span>\n\n- https://caniuse.com/#feat=css-selection\n",
|
||||
"supportPercentage": 90.77
|
||||
"supportPercentage": 89.11
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<p class=\"custom-text-selection\">Select some of this text.</p>",
|
||||
@ -319,7 +319,7 @@
|
||||
"explanation": "\n\n- `user-select: none` specifies that the text cannot be selected.\n\n_Note: This is not a secure method to prevent users from copying content._\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n- https://caniuse.com/#feat=user-select-none\n",
|
||||
"supportPercentage": 98.82
|
||||
"supportPercentage": 99.7
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<p>You can select me.</p>\n<p class=\"unselectable\">You can't select me!</p>",
|
||||
@ -443,7 +443,7 @@
|
||||
"explanation": "\n\n1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.\n2. `z-index: 1` establishes a new stacking context.\n3. `::after` defines a pseudo-element.\n4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.\n5. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.\n6. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.\n7. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.\n8. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.\n9. `opacity: 0.7` makes the pseudo-element partially transparent.\n10. `z-index: -1` positions the pseudo-element behind the parent but in front of the background.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n- https://caniuse.com/#feat=css-filters\n",
|
||||
"supportPercentage": 98.67999999999999
|
||||
"supportPercentage": 100
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<div class=\"dynamic-shadow\"></div>",
|
||||
@ -474,7 +474,7 @@
|
||||
"explanation": "\n\n- The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document.\n- In HTML, `:root` represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n- https://caniuse.com/#feat=css-variables\n",
|
||||
"supportPercentage": 97.16
|
||||
"supportPercentage": 98.68
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<div class=\"easing-variables\">Hover</div>",
|
||||
@ -567,7 +567,7 @@
|
||||
"explanation": "\n\n- `object-fit: contain` fits the entire image within the container while preserving its aspect ratio.\n- `object-fit: cover` fills the container with the image while preserving its aspect ratio.\n- `object-position: [x] [y]` positions the image within the container.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n- https://caniuse.com/#feat=object-fit\n",
|
||||
"supportPercentage": 99.61999999999999
|
||||
"supportPercentage": 100
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<img class=\"image image-contain\" src=\"https://picsum.photos/600/200\" />\n<img class=\"image image-cover\" src=\"https://picsum.photos/600/200\" />",
|
||||
@ -629,7 +629,7 @@
|
||||
"explanation": "\n\n- The psuedo class `:focus-within` applies styles to a parent element if any child element gets focused. For example, an `input` element inside a `form` element.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n<span class=\"snippet__support-note\">⚠️ Not supported in IE11 or the current version of Edge.</span>\n\n- https://caniuse.com/#feat=css-focus-within\n",
|
||||
"supportPercentage": 87.59
|
||||
"supportPercentage": 89.86
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<div class=\"focus-within\">\n <form>\n <label for=\"given_name\">Given Name:</label> <input id=\"given_name\" type=\"text\" /> <br />\n <label for=\"family_name\">Family Name:</label> <input id=\"family_name\" type=\"text\" />\n </form>\n</div>",
|
||||
@ -723,7 +723,7 @@
|
||||
"explanation": "\n\n1. `background: -webkit-linear-gradient(...)` gives the text element a gradient background.\n2. `webkit-text-fill-color: transparent` fills the text with a transparent color.\n3. `webkit-background-clip: text` clips the background with the text, filling the text with the gradient background as the color.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n<span class=\"snippet__support-note\">⚠️ Uses non-standard properties.</span>\n\n- https://caniuse.com/#feat=text-stroke\n",
|
||||
"supportPercentage": 99.4
|
||||
"supportPercentage": 100
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<p class=\"gradient-text\">Gradient text</p>",
|
||||
@ -754,7 +754,7 @@
|
||||
"explanation": "\n\n1. `display: grid` creates a grid layout\n2. `justify-content: center` centers the child horizontally.\n3. `align-items: center` centers the child vertically.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n- https://caniuse.com/#feat=css-grid\n",
|
||||
"supportPercentage": 97.91
|
||||
"supportPercentage": 99.05
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<div class=\"grid-centering\">\n <div class=\"child\">Centered content.</div>\n</div>",
|
||||
@ -847,7 +847,7 @@
|
||||
"explanation": "\n\n1. `transition: max-height: 0.5s cubic-bezier(...)` specifies that changes to `max-height` should be transitioned over 0.5 seconds, using an `ease-out-quint` timing function.\n2. `overflow: hidden` prevents the contents of the hidden element from overflowing its container.\n3. `max-height: 0` specifies that the element has no height initially.\n4. `.target:hover > .el` specifies that when the parent is hovered over, target a child `.el` within it and use the `--max-height` variable which was defined by JavaScript.\n\n<br>\n\n1. `el.scrollHeight` is the height of the element including overflow, which will change dynamically based on the content of the element.\n2. `el.style.setProperty(...)` sets the `--max-height` CSS variable which is used to specify the `max-height` of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n<div class=\"snippet__requires-javascript\">Requires JavaScript</div>\n<span class=\"snippet__support-note\">⚠️ Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.</span>\n\n- https://caniuse.com/#feat=css-variables\n- https://caniuse.com/#feat=css-transitions\n",
|
||||
"supportPercentage": 97.16
|
||||
"supportPercentage": 98.68
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<div class=\"trigger\">\n Hover me to see a height transition.\n <div class=\"el\">content</div>\n</div>",
|
||||
@ -1033,7 +1033,7 @@
|
||||
"explanation": "\n\n1. `--x` and `--y` are used to track the position of the mouse on the button.\n2. `--size` is used to keep modify of the gradient's dimensions.\n3. `background: radial-gradient(circle closest-side, pink, transparent);` creates the gradient at the correct postion.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n- https://caniuse.com/#feat=css-variables\n",
|
||||
"supportPercentage": 97.16
|
||||
"supportPercentage": 98.68
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<button class=\"mouse-cursor-gradient-tracking\">\n <span>Hover me</span>\n</button>",
|
||||
@ -1283,7 +1283,7 @@
|
||||
"explanation": "\n\n- The `all` property allows you to reset all styles (inherited or not) to default values.\n\n",
|
||||
"browserSupport": {
|
||||
"text": "\n\n<span class=\"snippet__support-note\">⚠️ MS Edge status is under consideration.</span>\n\n- https://caniuse.com/#feat=css-all\n",
|
||||
"supportPercentage": 96.2
|
||||
"supportPercentage": 97.45
|
||||
},
|
||||
"codeBlocks": {
|
||||
"html": "<div class=\"reset-all-styles\">\n <h5>Title</h5>\n <p>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui\n repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui\n iure, consequatur velit sit?\n </p>\n</div>",
|
||||
|
||||
Reference in New Issue
Block a user