{ "data": [ { "id": "border-with-top-triangle", "title": "Border with top triangle", "type": "snippet", "attributes": { "fileName": "border-with-top-triangle.md", "text": "Creates a text container with a triangle at the top.\n\n#### HTML\n\n", "explanation": "\n\n- Use the `:before` and `:after` pseudo-elements to create two triangles. \n- The color of the `:before` triangle should be the same as the container's border color. \n- The color of the `:after` triangle should be the same as the container background color.\n- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border.\n- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown.\n\n", "browserSupport": { "text": "\n", "supportPercentage": 100 }, "codeBlocks": { "html": "
\n Border with top triangle\n
", "css": ".container {\n position: relative;\n background: #ffffff;\n padding: 15px;\n border: 1px solid #dddddd;\n margin-top: 20px;\n}\n\n.container:before, .container:after {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 19px;\n border: 11px solid transparent;\n border-bottom-color: #dddddd;\n}\n\n.container:after {\n left: 20px;\n border: 10px solid transparent;\n border-bottom-color: #ffffff;\n}", "js": "", "scopedCss": "[data-scope=\"border-with-top-triangle\"] .container {\n position: relative;\n background: #ffffff;\n padding: 15px;\n border: 1px solid #dddddd;\n margin-top: 20px; }\n\n[data-scope=\"border-with-top-triangle\"] .container:before, [data-scope=\"border-with-top-triangle\"] .container:after {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 19px;\n border: 11px solid transparent;\n border-bottom-color: #dddddd; }\n\n[data-scope=\"border-with-top-triangle\"] .container:after {\n left: 20px;\n border: 10px solid transparent;\n border-bottom-color: #ffffff; }\n" }, "tags": [ "visual", "beginner" ] }, "meta": { "hash": "4fed80c83d37457d5ce111ee5c3272945c203319ccc4f5fe4355c359840f8628", "firstSeen": "1547806723", "lastUpdated": "1569668086", "updateCount": 3 } }, { "id": "bouncing-loader", "title": "Bouncing loader", "type": "snippet", "attributes": { "fileName": "bouncing-loader.md", "text": "Creates a bouncing loader animation.\n\n", "explanation": "\n\nNote: `1rem` is usually `16px`.\n\n1. `@keyframes` defines an animation that has two states, where the element changes `opacity` and is translated up on the 2D plane using `transform: translate3d()`. Using a single axis translation on `transform: translate3d()` improves the performance of the animation.\n2. `.bouncing-loader` is the parent container of the bouncing circles and uses `display: flex` and `justify-content: center` to position them in the center.\n3. `.bouncing-loader > div`, targets the three child `div`s of the parent to be styled. The `div`s are given a width and height of `1rem`, using `border-radius: 50%` to turn them from squares to circles.\n4. `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.\n5. `animation` is a shorthand property for the various animation properties: `animation-name`, `animation-duration`, `animation-iteration-count`, `animation-direction` are used.\n6. `nth-child(n)` targets the element which is the nth child of its parent.\n7. `animation-delay` is used on the second and third `div` respectively, so that each element does not start the animation at the same time.\n\n", "browserSupport": { "text": "\n\n- https://caniuse.com/#feat=css-animation\n", "supportPercentage": 100 }, "codeBlocks": { "html": "
\n
\n
\n
\n
", "css": "@keyframes bouncing-loader {\n to {\n opacity: 0.1;\n transform: translate3d(0, -1rem, 0);\n }\n}\n.bouncing-loader {\n display: flex;\n justify-content: center;\n}\n.bouncing-loader > div {\n width: 1rem;\n height: 1rem;\n margin: 3rem 0.2rem;\n background: #8385aa;\n border-radius: 50%;\n animation: bouncing-loader 0.6s infinite alternate;\n}\n.bouncing-loader > div:nth-child(2) {\n animation-delay: 0.2s;\n}\n.bouncing-loader > div:nth-child(3) {\n animation-delay: 0.4s;\n}", "js": "", "scopedCss": "@keyframes bouncing-loader {\n to {\n opacity: 0.1;\n transform: translate3d(0, -1rem, 0); } }\n\n[data-scope=\"bouncing-loader\"] .bouncing-loader {\n display: flex;\n justify-content: center; }\n\n[data-scope=\"bouncing-loader\"] .bouncing-loader > div {\n width: 1rem;\n height: 1rem;\n margin: 3rem 0.2rem;\n background: #8385aa;\n border-radius: 50%;\n animation: bouncing-loader 0.6s infinite alternate; }\n\n[data-scope=\"bouncing-loader\"] .bouncing-loader > div:nth-child(2) {\n animation-delay: 0.2s; }\n\n[data-scope=\"bouncing-loader\"] .bouncing-loader > div:nth-child(3) {\n animation-delay: 0.4s; }\n" }, "tags": [ "animation" ] }, "meta": { "hash": "2934b3aa733591f4964a7c8780f3ec7b273e4bd6a38fce6e0da2a5dd2dd9959f", "firstSeen": "1567098430", "lastUpdated": "1567098430", "updateCount": 2 } }, { "id": "box-sizing-reset", "title": "Box-sizing reset", "type": "snippet", "attributes": { "fileName": "box-sizing-reset.md", "text": "Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`.\n\n", "explanation": "\n\n1. `box-sizing: border-box` makes the addition of `padding` or `border`s not affect an element's `width` or `height`.\n2. `box-sizing: inherit` makes an element respect its parent's `box-sizing` rule.\n\n", "browserSupport": { "text": "\n\n- https://caniuse.com/#feat=css3-boxsizing\n", "supportPercentage": 100 }, "codeBlocks": { "html": "
border-box
\n
content-box
", "css": "html {\n box-sizing: border-box;\n}\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n.box {\n display: inline-block;\n width: 150px;\n height: 150px;\n padding: 10px;\n background: tomato;\n color: white;\n border: 10px solid red;\n}\n.content-box {\n box-sizing: content-box;\n}", "js": "", "scopedCss": "[data-scope=\"box-sizing-reset\"] html {\n box-sizing: border-box; }\n\n[data-scope=\"box-sizing-reset\"] *,\n[data-scope=\"box-sizing-reset\"] *::before,\n[data-scope=\"box-sizing-reset\"] *::after {\n box-sizing: inherit; }\n\n[data-scope=\"box-sizing-reset\"] .box {\n display: inline-block;\n width: 150px;\n height: 150px;\n padding: 10px;\n background: tomato;\n color: white;\n border: 10px solid red; }\n\n[data-scope=\"box-sizing-reset\"] .content-box {\n box-sizing: content-box; }\n" }, "tags": [ "layout" ] }, "meta": { "hash": "d4e635bb76a083266e08723f25c3db981b39001ea5d513ce65570fe0099eb6b0", "firstSeen": "1567098430", "lastUpdated": "1567098430", "updateCount": 2 } }, { "id": "button-border-animation", "title": "Button border animation", "type": "snippet", "attributes": { "fileName": "button-border-animation.md", "text": "Creates a border animation on hover.\n\n", "explanation": "\n\n- Use the `:before` and `:after` pseduo-elements as borders that animate on hover.\n\n", "browserSupport": { "text": "\n", "supportPercentage": 100 }, "codeBlocks": { "html": "
", "css": ".button {\n background-color: #c47135;\n border: none;\n color: #ffffff;\n outline: none;\n padding: 12px 40px 10px;\n position: relative;\n}\n.button:before,\n.button:after {\n border: 0 solid transparent;\n transition: all 0.25s;\n content: '';\n height: 24px;\n position: absolute;\n width: 24px;\n}\n.button:before {\n border-top: 2px solid #c47135;\n left: 0px;\n top: -5px;\n}\n.button:after {\n border-bottom: 2px solid #c47135;\n bottom: -5px;\n right: 0px;\n}\n.button:hover {\n background-color: #c47135;\n}\n.button:hover:before,\n.button:hover:after {\n height: 100%;\n width: 100%;\n}", "js": "", "scopedCss": "[data-scope=\"button-border-animation\"] .button {\n background-color: #c47135;\n border: none;\n color: #ffffff;\n outline: none;\n padding: 12px 40px 10px;\n position: relative; }\n\n[data-scope=\"button-border-animation\"] .button:before,\n[data-scope=\"button-border-animation\"] .button:after {\n border: 0 solid transparent;\n transition: all 0.25s;\n content: '';\n height: 24px;\n position: absolute;\n width: 24px; }\n\n[data-scope=\"button-border-animation\"] .button:before {\n border-top: 2px solid #c47135;\n left: 0px;\n top: -5px; }\n\n[data-scope=\"button-border-animation\"] .button:after {\n border-bottom: 2px solid #c47135;\n bottom: -5px;\n right: 0px; }\n\n[data-scope=\"button-border-animation\"] .button:hover {\n background-color: #c47135; }\n\n[data-scope=\"button-border-animation\"] .button:hover:before,\n[data-scope=\"button-border-animation\"] .button:hover:after {\n height: 100%;\n width: 100%; }\n" }, "tags": [ "animation" ] }, "meta": { "hash": "ff6401cc784b92a9672e74968719c029de224c29fcfdc3eaeaa764274108f648", "firstSeen": "1567098430", "lastUpdated": "1567098430", "updateCount": 2 } }, { "id": "calc", "title": "Calc()", "type": "snippet", "attributes": { "fileName": "calc.md", "text": "The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.\n\n", "explanation": "\n\n1. It allows addition, subtraction, multiplication and division.\n2. Can use different units (pixel and percent together, for example) for each value in your expression.\n3. It is permitted to nest calc() functions.\n4. It can be used in any property that ``, ``, ``, `