Travis build: 497

README.md

@@ -97,6 +97,7 @@ See CONTRIBUTING.md for the snippet template.
 * [`Gradient text`](#gradient-text)
 * [`Hairline border`](#hairline-border)
 * [`Mouse cursor gradient tracking`](#mouse-cursor-gradient-tracking)
+* [`Navigation list item hover and focus effect`](#navigation-list-item-hover-and-focus-effect)
 * [`:not selector`](#not-selector)
 * [`Overflow scroll gradient`](#overflow-scroll-gradient)
 * [`Pretty text underline`](#pretty-text-underline)
@@ -1980,6 +1981,77 @@ btn.onmousemove = function(e) {
 
 <br>[⬆ Back to top](#contents)
 
+### Navigation list item hover and focus effect
+
+Fancy hover and focus effect at navigation items using transform CSS property.
+
+```html
+<nav>
+  <ul>
+    <li><a href="#/">Home</a></li>
+    <li><a href="#/">About</a></li>
+    <li><a href="#/">Contact</a></li>
+  </ul>
+</nav>
+```
+
+```css
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+nav li {
+  float: left;
+}
+
+nav li a {
+  position: relative;
+  display: block;
+  color: #222;
+  text-align: center;
+  padding: 8px 12px;
+  text-decoration: none;
+}
+
+li a::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  bottom: 0;
+  left: 0;
+  background-color: #f6c126;
+  z-index: -1;
+  transform: scale(0);
+  transition: transform 0.5s ease-in-out;
+}
+
+li a:hover::before, li a:focus::before {
+  transform: scale(1);
+}
+```
+
+
+#### Explanation
+
+
+- Use the `::before` pseudo-element at the list item anchor to create a hover effect, hide it using `transform: scale(0)`.
+- Use the `:hover` and `:focus` pseudo-selectors to transition to `transform: scale(1)` and show the pseudo-element with its colored background.
+- Prevent the pseudo-element from covering the anchor element by using `z-index: -1`.
+
+
+#### Browser support
+
+100.0%
+
+- https://caniuse.com/#feat=transforms2d
+- https://caniuse.com/#feat=css-transitions
+
+<br>[⬆ Back to top](#contents)
+
 ### :not selector
 
 The `:not` pseudo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.

snippet_data/snippetList.json

@@ -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",

snippet_data/snippets.json

@@ -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",