From b1a71607276e8a65af00553f51523b5e93eba912 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Thu, 19 May 2022 17:00:11 +0200 Subject: [PATCH 1/6] isometric-menu-hover-effect --- index.html | 21 +++++++++++++ style.css | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..452e6e3 --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + + CSS Isometric Menu + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e92c1d8 --- /dev/null +++ b/style.css @@ -0,0 +1,87 @@ +@import url('https://fonts.googleapis.com/css?family=Oswald:400,700'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Oswald', sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #434750; +} + +ul { + position: relative; + transform: skewY(-15deg); +} + +ul li { + position: relative; + list-style: none; + width: 200px; + background: #3e3f46; + padding: 15px; + z-index: var(--i); + transition: 0.5s; +} + +ul li:hover { + background: #33a3ee; + transform: translateX(-50px); +} + +ul li::before { + content: ''; + position: absolute; + top: 0; + left: -40px; + width: 40px; + height: 100%; + background: #2e3133; + transform-origin: right; + transform: skewY(45deg); + transition: 0.5s; +} + +ul li:hover::before { + background: #1f5378; +} + +ul li::after { + content: ''; + position: absolute; + top: -40px; + left: 0; + height: 40px; + width: 100%; + background: #35383e; + transform-origin: bottom; + transform: skewX(45deg); + transition: 0.5s; +} + +ul li:hover::after { + background: #2982b9; +} + +ul li a { + text-decoration: none; + color: #999; + display: block; + text-transform: uppercase; + letter-spacing: 0.05em; + transition: 0.5s; +} + +ul li:hover a { + color: #fff; +} + +ul li:last-child::after { + box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.25); +} \ No newline at end of file From 52226f3bb1ea20df873dc5dae3702b3a7783d965 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti <80033304+filippoerbisti@users.noreply.github.com> Date: Thu, 19 May 2022 17:43:36 +0200 Subject: [PATCH 2/6] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 85fcb99..31d6357 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# css_effect \ No newline at end of file +# Isometric Menu Hover Effect + +View and try [DEMO](https://codepen.io/filippoerbisti/pen/BaYRMrW) on Codepen. From a71d0b190368f935bd7cf5d0849440501ff226c9 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Tue, 24 May 2022 10:50:04 +0200 Subject: [PATCH 3/6] arrow-menu-indicator --- index.html | 31 +++++++++++++++----- style.css | 86 +++++++++++++++++++++--------------------------------- 2 files changed, 57 insertions(+), 60 deletions(-) diff --git a/index.html b/index.html index 452e6e3..f7c3f5d 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,35 @@ - CSS Isometric Menu + Arrow Menu Indicator + + \ No newline at end of file diff --git a/style.css b/style.css index e92c1d8..4ab74a9 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,10 @@ -@import url('https://fonts.googleapis.com/css?family=Oswald:400,700'); +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Oswald', sans-serif; + font-family: 'Ubuntu', sans-serif; } body { @@ -12,76 +12,56 @@ body { justify-content: center; align-items: center; min-height: 100vh; - background: #434750; + background: #333; } ul { position: relative; - transform: skewY(-15deg); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } ul li { - position: relative; list-style: none; - width: 200px; - background: #3e3f46; - padding: 15px; - z-index: var(--i); - transition: 0.5s; } -ul li:hover { - background: #33a3ee; - transform: translateX(-50px); +ul li a { + position: relative; + font-size: 2em; + color: #fff; + text-decoration: none; + margin: 10px 0; + display: inline-block; } -ul li::before { - content: ''; +#marker { position: absolute; top: 0; - left: -40px; - width: 40px; - height: 100%; - background: #2e3133; - transform-origin: right; - transform: skewY(45deg); + margin-top: -5px; + height: 50px; transition: 0.5s; + display: flex; + justify-content: space-between; + align-items: center; } -ul li:hover::before { - background: #1f5378; -} - -ul li::after { +#marker::before { content: ''; - position: absolute; - top: -40px; - left: 0; - height: 40px; - width: 100%; - background: #35383e; - transform-origin: bottom; - transform: skewX(45deg); - transition: 0.5s; -} - -ul li:hover::after { - background: #2982b9; -} - -ul li a { - text-decoration: none; - color: #999; - display: block; - text-transform: uppercase; - letter-spacing: 0.05em; - transition: 0.5s; + width: 15px; + height: 15px; + border-right: 4px solid #30a3ff; + border-top: 4px solid #30a3ff; + transform: rotate(45deg) translate(-20px, 20px); } -ul li:hover a { - color: #fff; +#marker::after { + content: ''; + width: 15px; + height: 15px; + border-right: 4px solid #30a3ff; + border-top: 4px solid #30a3ff; + transform: rotate(225deg) translate(-20px, 20px); } -ul li:last-child::after { - box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.25); -} \ No newline at end of file From f81db4ab385e8e08021a64384c17dd41710ea112 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Tue, 24 May 2022 10:52:03 +0200 Subject: [PATCH 4/6] update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 31d6357..e26f44b 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# Isometric Menu Hover Effect +# Arrow Menu Indicator -View and try [DEMO](https://codepen.io/filippoerbisti/pen/BaYRMrW) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/KKQXqrB)) on Codepen. From ea6ed478f6c665d7cc4af2fa4e57f3919302ca86 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Tue, 24 May 2022 11:42:22 +0200 Subject: [PATCH 5/6] ed-text-cube-animation --- index.html | 53 ++++++++++++++++---------------- style.css | 88 ++++++++++++++++++++++++++++++------------------------ 2 files changed, 76 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index f7c3f5d..4479ab5 100644 --- a/index.html +++ b/index.html @@ -4,35 +4,36 @@ - Arrow Menu Indicator + 3D Text Cube Animation Effects - - - +
+
+ 2 + 3 + 4 + 5 +
+
+ 0 + 1 + 2 + 3 +
+
+ 2 + 3 + 4 + 5 +
+
+ 2 + 3 + 4 + 5 +
+
\ No newline at end of file diff --git a/style.css b/style.css index 4ab74a9..5173b0f 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,10 @@ -@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Ubuntu', sans-serif; + font-family: 'Oswald', sans-serif; } body { @@ -12,56 +12,66 @@ body { justify-content: center; align-items: center; min-height: 100vh; - background: #333; + background: #3d3d3d; } -ul { - position: relative; +.container { display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + transform-style: preserve-3d; + gap: 10px; + transform: rotateY(30deg) rotateX(10deg); } -ul li { - list-style: none; +.container .text { + position: relative; + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: 2.5s ease-in-out; + transition-delay: calc(0.25s * var(--j)); } -ul li a { - position: relative; - font-size: 2em; - color: #fff; - text-decoration: none; - margin: 10px 0; - display: inline-block; +.container:hover .text { + transform: rotateX(360deg); + + } -#marker { - position: absolute; - top: 0; - margin-top: -5px; - height: 50px; - transition: 0.5s; - display: flex; - justify-content: space-between; - align-items: center; +.container:hover .text:last-child { + transform: rotateX(630deg); } -#marker::before { +.container .text::before { content: ''; - width: 15px; - height: 15px; - border-right: 4px solid #30a3ff; - border-top: 4px solid #30a3ff; - transform: rotate(45deg) translate(-20px, 20px); + position: absolute; + width: 100%; + height: 100%; + background: #373737; + transform-origin: left; + transform: rotateY(90deg) translateX(-50px); } -#marker::after { - content: ''; - width: 15px; - height: 15px; - border-right: 4px solid #30a3ff; - border-top: 4px solid #30a3ff; - transform: rotate(225deg) translate(-20px, 20px); +.container .text:last-child:before { + background: #29ab3c; } +.container .text span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(#434343, #535353); + display: flex; + align-items: center; + justify-content: center; + font-size: 4em; + color: #fff; + transform-style: preserve-3d; + transform: rotateX(calc(90deg * var(--i))) translateZ(50px); +} + +.container .text:last-child span { + background: linear-gradient(#29c040, #32ed4e); + color: #333; +} From 79e9d6ec08d9444320e048355929d62deeb5f464 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Tue, 24 May 2022 11:43:43 +0200 Subject: [PATCH 6/6] update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e26f44b..45a812f 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# Arrow Menu Indicator +# 3D Text Cube Animation Effects -View and try [DEMO](https://codepen.io/filippoerbisti/pen/KKQXqrB)) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/PoQJKyd) on Codepen.