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

Travis build: 497

Browse Source
This commit is contained in:
30secondsofcode
2019-09-30 06:42:41 +00:00
parent 53f8abb752
commit b8c46d2da7
3 changed files with 114 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
snippet_data/snippetList.json
View File

@ -468,6 +468,21 @@
"hash": "97fbac82b526cafe6e48233dda46d0bb87fde7a52027774048b90c9c14818395"
}
},
{
"id": "navigation-list-item-hover-and-focus-effect",
"type": "snippetListing",
"title": "Navigation list item hover and focus effect",
"attributes": {
"text": "Fancy hover and focus effect at navigation items using transform CSS property.\n\n",
"tags": [
"visual",
"beginner"
]
},
"meta": {
"hash": "9e2cbf0541001ebaaa5584e8d4e7f68e5f436e79574ec9c62facd20962bfa87a"
}
},
{
"id": "not-selector",
"type": "snippetListing",

27
snippet_data/snippets.json
View File

@ -864,6 +864,33 @@
"hash": "97fbac82b526cafe6e48233dda46d0bb87fde7a52027774048b90c9c14818395"
}
},
{
"id": "navigation-list-item-hover-and-focus-effect",
"title": "Navigation list item hover and focus effect",
"type": "snippet",
"attributes": {
"fileName": "navigation-list-item-hover-and-focus-effect.md",
"text": "Fancy hover and focus effect at navigation items using transform CSS property.\n\n",
"explanation": "\n\n- Use the `::before` pseudo-element at the list item anchor to create a hover effect, hide it using `transform: scale(0)`.\n- Use the `:hover` and `:focus` pseudo-selectors to transition to `transform: scale(1)` and show the pseudo-element with its colored background.\n- Prevent the pseudo-element from covering the anchor element by using `z-index: -1`.\n\n",
"browserSupport": {
"text": "\n\n- https://caniuse.com/#feat=transforms2d\n- https://caniuse.com/#feat=css-transitions\n",
"supportPercentage": 100
},
"codeBlocks": {
"html": "<nav>\n <ul>\n <li><a href=\"#/\">Home</a></li>\n <li><a href=\"#/\">About</a></li>\n <li><a href=\"#/\">Contact</a></li>\n </ul>\n</nav>",
"css": "nav ul {\n list-style: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\nnav li {\n float: left;\n}\n\nnav li a {\n position: relative;\n display: block;\n color: #222;\n text-align: center;\n padding: 8px 12px;\n text-decoration: none;\n}\n\nli a::before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n bottom: 0;\n left: 0;\n background-color: #f6c126;\n z-index: -1;\n transform: scale(0);\n transition: transform 0.5s ease-in-out;\n}\n\nli a:hover::before, li a:focus::before {\n transform: scale(1);\n}",
"js": "",
"scopedCss": "[data-scope=\"navigation-list-item-hover-and-focus-effect\"] nav ul {\n list-style: none;\n margin: 0;\n padding: 0;\n overflow: hidden; }\n\n[data-scope=\"navigation-list-item-hover-and-focus-effect\"] nav li {\n float: left; }\n\n[data-scope=\"navigation-list-item-hover-and-focus-effect\"] nav li a {\n position: relative;\n display: block;\n color: #222;\n text-align: center;\n padding: 8px 12px;\n text-decoration: none; }\n\n[data-scope=\"navigation-list-item-hover-and-focus-effect\"] li a::before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n bottom: 0;\n left: 0;\n background-color: #f6c126;\n z-index: -1;\n transform: scale(0);\n transition: transform 0.5s ease-in-out; }\n\n[data-scope=\"navigation-list-item-hover-and-focus-effect\"] li a:hover::before, [data-scope=\"navigation-list-item-hover-and-focus-effect\"] li a:focus::before {\n transform: scale(1); }\n"
},
"tags": [
"visual",
"beginner"
]
},
"meta": {
"hash": "9e2cbf0541001ebaaa5584e8d4e7f68e5f436e79574ec9c62facd20962bfa87a"
}
},
{
"id": "not-selector",
"title": ":not selector",