From be16a12446b290fd31b640a6c24dec96a045ec3e Mon Sep 17 00:00:00 2001 From: Islam Sayed Date: Thu, 19 Sep 2019 21:48:57 +0200 Subject: [PATCH 1/3] navigation list item hover and focus effect --- ...gation-list-item-hover-and-focus-effect.md | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 snippets/navigation-list-item-hover-and-focus-effect.md diff --git a/snippets/navigation-list-item-hover-and-focus-effect.md b/snippets/navigation-list-item-hover-and-focus-effect.md new file mode 100644 index 000000000..f5fb4a18a --- /dev/null +++ b/snippets/navigation-list-item-hover-and-focus-effect.md @@ -0,0 +1,76 @@ +--- +title: Navigation list item hover and focus effect +tags: visual, beginner +--- + +Fancy hover and focus effect at navigation items using transform CSS property. + +```html + +``` + +```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 { + transform: scale(1); +} + +li a:focus::before { + transform: scale(1); +} +``` + +#### Explanation + +1. Using pseudo-element `::before` at the list item anchor element to make the hover effect, and make it hidden by `transform: scale(0)` +2. Using pseudo-selector `:hover` , and `:focus` to make the transition effect from `transform: scale(0)` to `transform: scale(1)` to sgow the pseudo-element with its colored background. +3. Preventing the pseudo-element from covering the anchor element by using `z-index: -1` + +#### Browser support + +- https://caniuse.com/#feat=transforms2d +- https://caniuse.com/#feat=css-transitions \ No newline at end of file From 96d579a5c6665041bc6be2887cc3d5ef2147f5c7 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 30 Sep 2019 09:39:37 +0300 Subject: [PATCH 2/3] Formatting changes --- ...gation-list-item-hover-and-focus-effect.md | 75 ++++++++----------- 1 file changed, 33 insertions(+), 42 deletions(-) diff --git a/snippets/navigation-list-item-hover-and-focus-effect.md b/snippets/navigation-list-item-hover-and-focus-effect.md index f5fb4a18a..1ab0a25d2 100644 --- a/snippets/navigation-list-item-hover-and-focus-effect.md +++ b/snippets/navigation-list-item-hover-and-focus-effect.md @@ -1,76 +1,67 @@ --- title: Navigation list item hover and focus effect -tags: visual, beginner +tags: visual,beginner --- Fancy hover and focus effect at navigation items using transform CSS property. ```html ``` ```css nav ul { - list-style: none; - margin: 0; - padding: 0; - overflow: hidden; + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; } nav li { - float: left; + float: left; } nav li a { - position: relative; - display: block; - color: #222; - text-align: center; - padding: 8px 12px; - text-decoration: none; + 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; + 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 { - transform: scale(1); +li a:hover::before, li a:focus::before { + transform: scale(1); } -li a:focus::before { - transform: scale(1); -} ``` #### Explanation -1. Using pseudo-element `::before` at the list item anchor element to make the hover effect, and make it hidden by `transform: scale(0)` -2. Using pseudo-selector `:hover` , and `:focus` to make the transition effect from `transform: scale(0)` to `transform: scale(1)` to sgow the pseudo-element with its colored background. -3. Preventing the pseudo-element from covering the anchor element by using `z-index: -1` +- 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 - https://caniuse.com/#feat=transforms2d -- https://caniuse.com/#feat=css-transitions \ No newline at end of file +- https://caniuse.com/#feat=css-transitions From 98c0d29a9ec22419589d033736f5be19a6a8e16d Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 30 Sep 2019 09:40:39 +0300 Subject: [PATCH 3/3] Update navigation-list-item-hover-and-focus-effect.md --- snippets/navigation-list-item-hover-and-focus-effect.md | 1 - 1 file changed, 1 deletion(-) diff --git a/snippets/navigation-list-item-hover-and-focus-effect.md b/snippets/navigation-list-item-hover-and-focus-effect.md index 1ab0a25d2..bf75cc6af 100644 --- a/snippets/navigation-list-item-hover-and-focus-effect.md +++ b/snippets/navigation-list-item-hover-and-focus-effect.md @@ -52,7 +52,6 @@ li a::before { li a:hover::before, li a:focus::before { transform: scale(1); } - ``` #### Explanation