andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 765

Browse Source
This commit is contained in:
30secondsofcode
2020-04-17 12:55:04 +00:00
parent fa1aa18adb
commit 98e725431b
2 changed files with 46 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
snippet_data/snippetList.json
View File

@ -345,6 +345,21 @@
"hash": "0515f03b1505eafa21e0d0d7377facbe4aaa9159996906dd4ed2857ee137073a"
}
},
{
"id": "gradient-border",
"type": "snippetListing",
"title": "Gradient border",
"attributes": {
"text": "Creates a gradient border.\n\n",
"tags": [
"visual",
"intermediate"
]
},
"meta": {
"hash": "0a79c723c57eb1266d973fc9eaffab2ee54a51e54cf64c876a8e31b4e587f57d"
}
},
{
"id": "gradient-text",
"type": "snippetListing",

31
snippet_data/snippets.json
View File

@ -713,6 +713,37 @@
"authorCount": 5
}
},
{
"id": "gradient-border",
"title": "Gradient border",
"type": "snippet",
"attributes": {
"fileName": "gradient-border.md",
"text": "Creates a gradient border.\n\n",
"explanation": "\n\n- Create a block with a transparent border, relative position and a background.\n- Absolute position the `:before` pseudo-element with a gradient background and `z-index: -1`.\n- Use `top: 0`, `right: 0`, `bottom: 0`, `left: 0` to make the pseudo-element equal size to its parent element, `margin: -1px` to make it larger.\n- Use `background-clip: padding-box` to not draw the parent element's background below the border.\n\n",
"browserSupport": {
"text": "\n\n- https://caniuse.com/#feat=mdn-css_properties_background_background-clip\n",
"supportPercentage": 100
},
"codeBlocks": {
"html": "<div class=\"gradient-border\">\n <p>Gradient border!</P>\n</div>",
"css": ".gradient-border {\n position: relative;\n border: solid 1px transparent;\n border-radius: 10px;\n background-color: #f7f7fe;\n background-clip: padding-box;\n margin: 8px;\n padding: 8px 16px;\n}\n\n.gradient-border:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n margin: -1px;\n border-radius: inherit;\n background: linear-gradient(to bottom, #d3e7ec, #fff);\n}",
"js": "",
"scopedCss": "[data-scope=\"gradient-border\"] .gradient-border {\n position: relative;\n border: solid 1px transparent;\n border-radius: 10px;\n background-color: #f7f7fe;\n background-clip: padding-box;\n margin: 8px;\n padding: 8px 16px; }\n\n[data-scope=\"gradient-border\"] .gradient-border:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n margin: -1px;\n border-radius: inherit;\n background: linear-gradient(to bottom, #d3e7ec, #fff); }\n"
},
"tags": [
"visual",
"intermediate"
]
},
"meta": {
"hash": "0a79c723c57eb1266d973fc9eaffab2ee54a51e54cf64c876a8e31b4e587f57d",
"firstSeen": "1587127992",
"lastUpdated": "1587128027",
"updateCount": 3,
"authorCount": 2
}
},
{
"id": "gradient-text",
"title": "Gradient text",