From 26d1d34b54995808c12ac8a29d88cd27089ee407 Mon Sep 17 00:00:00 2001 From: Shobhit Sachan <31156049+sachans@users.noreply.github.com> Date: Wed, 7 Mar 2018 02:18:12 +0530 Subject: [PATCH 1/8] Create hover-shadow-out-animation --- snippets/hover-shadow-out-animation | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 snippets/hover-shadow-out-animation diff --git a/snippets/hover-shadow-out-animation b/snippets/hover-shadow-out-animation new file mode 100644 index 000000000..77f62c695 --- /dev/null +++ b/snippets/hover-shadow-out-animation @@ -0,0 +1,10 @@ +### Hover Shadow Out Animation + + +Creates a shadow box around the text whern it is hovered. + +#### HTML + +```html +< h4 class = "hover-shadow-out-animation"> Box it! +``` From 7bac056e5b4628a06d7e18626870b62e4de0ed5c Mon Sep 17 00:00:00 2001 From: Shobhit Sachan <31156049+sachans@users.noreply.github.com> Date: Wed, 7 Mar 2018 02:18:42 +0530 Subject: [PATCH 2/8] Rename hover-shadow-out-animation to hover-shadow-out-animation.md --- .../{hover-shadow-out-animation => hover-shadow-out-animation.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename snippets/{hover-shadow-out-animation => hover-shadow-out-animation.md} (100%) diff --git a/snippets/hover-shadow-out-animation b/snippets/hover-shadow-out-animation.md similarity index 100% rename from snippets/hover-shadow-out-animation rename to snippets/hover-shadow-out-animation.md From d8efc14e824b58c7fbb8424fee035c23f2976004 Mon Sep 17 00:00:00 2001 From: Shobhit Sachan <31156049+sachans@users.noreply.github.com> Date: Wed, 7 Mar 2018 03:11:55 +0530 Subject: [PATCH 3/8] Update and rename hover-shadow-out-animation.md to hover-shadow-box-animation.md --- snippets/hover-shadow-box-animation.md | 75 ++++++++++++++++++++++++++ snippets/hover-shadow-out-animation.md | 10 ---- 2 files changed, 75 insertions(+), 10 deletions(-) create mode 100644 snippets/hover-shadow-box-animation.md delete mode 100644 snippets/hover-shadow-out-animation.md diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md new file mode 100644 index 000000000..344012e94 --- /dev/null +++ b/snippets/hover-shadow-box-animation.md @@ -0,0 +1,75 @@ +### Hover Shadow Box Animation + + +Creates a shadow box around the text whern it is hovered. + +#### HTML + +```html +< h4 class = "hover-shadow-box-animation"> Box it! +``` + +#### CSS + +```css +.hover-shadow-box-animation{ + display: inline-block; + vertical-align: middle; + -webkit-transform:perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px transparent; + -webkit-transition-duration : 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow, transform; + transition-property: box-shadow, transform; +} +.hover-shadow-box-animation:hover, .hover-shadow-box-animation:focus, .hover-shadow-box-animation:active{ + box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.5); + -webkit-transform: scale(1.2); + transform: scale(1.2); +} +``` +#### Demo + +
+ < h4 class = snippet-demo_hover-shadow-box-animation"> Box it! +
+ + + + +#### Explanation + +1. `display: inline-block` for giving width and length for `h4` element thus making it as an `inline-block`. +2. setting the `transform: perspective(1px)` for giving element a 3-D space by affecting the distance between the Z plane and the user and `translate(0)` for repositioning `h4` element along z-axis in 3-D Space. +3. `box-shadow:` for setting up the box. +4. `transparent` to make box transparent +5.`transition-property` for enabling both box-shadow and transform +6. `:hover` to activate whole css when hovering is done till `active`. +7. `transform: scale(1.2)` for changing the scale to 1.2. Now text looks for 1.2 times magnified with shadow Box Effect + + +#### Browser Support + +✅ No caveats. + +* https://caniuse.com/#feat=transforms3d +* https://caniuse.com/#feat=css-transitions diff --git a/snippets/hover-shadow-out-animation.md b/snippets/hover-shadow-out-animation.md deleted file mode 100644 index 77f62c695..000000000 --- a/snippets/hover-shadow-out-animation.md +++ /dev/null @@ -1,10 +0,0 @@ -### Hover Shadow Out Animation - - -Creates a shadow box around the text whern it is hovered. - -#### HTML - -```html -< h4 class = "hover-shadow-out-animation"> Box it! -``` From b14c20028cf7cb8dfcef8d9e3081f7cd111e8780 Mon Sep 17 00:00:00 2001 From: Shobhit Sachan <31156049+sachans@users.noreply.github.com> Date: Wed, 7 Mar 2018 03:13:56 +0530 Subject: [PATCH 4/8] Update hover-shadow-box-animation.md --- snippets/hover-shadow-box-animation.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md index 344012e94..b99c0f60e 100644 --- a/snippets/hover-shadow-box-animation.md +++ b/snippets/hover-shadow-box-animation.md @@ -32,7 +32,8 @@ Creates a shadow box around the text whern it is hovered. #### Demo
- < h4 class = snippet-demo_hover-shadow-box-animation"> Box it! + < h4 class = "snippet-demo_hover-shadow-box-animation"> Box it! +
@@ -76,3 +68,6 @@ Creates a shadow box around the text whern it is hovered. * https://caniuse.com/#feat=transforms3d * https://caniuse.com/#feat=css-transitions + + + From 6d8b360d2a515d5c75bc326ee4165069d3f875f1 Mon Sep 17 00:00:00 2001 From: Shobhit Sachan <31156049+sachans@users.noreply.github.com> Date: Sat, 10 Mar 2018 23:59:08 +0530 Subject: [PATCH 7/8] Update hover-shadow-box-animation.md --- snippets/hover-shadow-box-animation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md index 50e40804f..5f383875c 100644 --- a/snippets/hover-shadow-box-animation.md +++ b/snippets/hover-shadow-box-animation.md @@ -53,8 +53,8 @@ Creates a shadow box around the text whern it is hovered. #### Explanation -1. `display: inline-block` for giving width and length for `h4` element thus making it as an `inline-block`. -2. setting the `transform: perspective(1px)` for giving element a 3-D space by affecting the distance between the Z plane and the user and `translate(0)` for repositioning `h4` element along z-axis in 3-D Space. +1. `display: inline-block` for giving width and length for `p` element thus making it as an `inline-block`. +2. setting the `transform: perspective(1px)` for giving element a 3-D space by affecting the distance between the Z plane and the user and `translate(0)` for repositioning `p` element along z-axis in 3-D Space. 3. `box-shadow:` for setting up the box. 4. `transparent` to make box transparent 5.`transition-property` for enabling both box-shadow and transform From 78b83e9297a1c2fdcaafa3a23cb3df8f2950d067 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 12 Jan 2019 12:00:08 +0200 Subject: [PATCH 8/8] Update hover-shadow-box-animation.md --- snippets/hover-shadow-box-animation.md | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md index 5f383875c..b74b5bc30 100644 --- a/snippets/hover-shadow-box-animation.md +++ b/snippets/hover-shadow-box-animation.md @@ -1,6 +1,5 @@ ### Hover Shadow Box Animation - Creates a shadow box around the text whern it is hovered. #### HTML @@ -32,7 +31,7 @@ Creates a shadow box around the text whern it is hovered.

Box it!

- + - + #### Explanation -1. `display: inline-block` for giving width and length for `p` element thus making it as an `inline-block`. -2. setting the `transform: perspective(1px)` for giving element a 3-D space by affecting the distance between the Z plane and the user and `translate(0)` for repositioning `p` element along z-axis in 3-D Space. -3. `box-shadow:` for setting up the box. -4. `transparent` to make box transparent -5.`transition-property` for enabling both box-shadow and transform -6. `:hover` to activate whole css when hovering is done till `active`. -7. `transform: scale(1.2)` for changing the scale to 1.2. Now text looks for 1.2 times magnified with shadow Box Effect +1. `display: inline-block` to set width and length for `p` element thus making it an `inline-block`. +2. Set `transform: perspective(1px)` to give element a 3D space by affecting the distance between the Z plane and the user and `translate(0)` to reposition the `p` element along z-axis in 3D space. +3. `box-shadow:` to set up the box. +4. `transparent` to make box transparent. +5. `transition-property` to enable transitions for both `box-shadow` and `transform`. +6. `:hover` to activate whole css when hovering is done until `active`. +7. `transform: scale(1.2)` to change the scale, magnifying the text. #### Browser Support