Created
November 29, 2022 16:47
-
-
Save warderer/ecac5b3a321f1d69e96821bb12c77f02 to your computer and use it in GitHub Desktop.
[Isometric 3D Menu] CSS 3D Isometric Menu #css #menu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>Isometric Menu</title> | |
| </head> | |
| <body> | |
| <div class="menu-container"> | |
| <ul> | |
| <li style="--i:6;"><a href="#">Inicio</a></li> | |
| <li style="--i:5;"><a href="#">Programa</a></li> | |
| <li style="--i:4;"><a href="#">Proyectos</a></li> | |
| <li style="--i:3;"><a href="#">Patrocinadores</a></li> | |
| <li style="--i:2;"><a href="#">Comité</a></li> | |
| <li style="--i:1;"><a href="#">Contacto</a></li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Koulen', cursive; | |
| } | |
| .menu-container { | |
| box-sizing: border-box; | |
| font-family: 'Koulen', cursive; | |
| display: flex; | |
| justify-content: left; | |
| padding: 0% 10% | |
| align-items: center; | |
| min-height: 100vh; | |
| background: #434750; | |
| } | |
| .menu-container ul { | |
| position: relative; | |
| transform: skewY(-15deg); | |
| -webkit-transform: skewY(-15deg); | |
| -moz-transform: skewY(-15deg); | |
| -ms-transform: skewY(-15deg); | |
| -o-transform: skewY(-15deg); | |
| } | |
| .menu-container ul li { | |
| position: relative; | |
| list-style: none; | |
| width: 200px; | |
| background: #3e3f46; | |
| padding: 15px; | |
| z-index: var(--i); | |
| transition: 0.5s; | |
| } | |
| .menu-container ul li:hover { | |
| background: #33a3ee; | |
| transform: translateX(-50px); | |
| } | |
| .menu-container ul li::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -40px; | |
| width: 40px; | |
| height: 100%; | |
| background: #2e3133; | |
| transform-origin: right; | |
| transform: skewY(45deg); | |
| transition: .5s; | |
| } | |
| .menu-container ul li:hover:before { | |
| background: #1f5378; | |
| } | |
| .menu-container ul li::after { | |
| content: ''; | |
| position: absolute; | |
| top: -40px; | |
| left: 0; | |
| width: 100%; | |
| height: 40px; | |
| background: #35383e; | |
| transform-origin: bottom; | |
| transform: skewX(45deg); | |
| transition: 0.5s; | |
| } | |
| .menu-container ul li:hover::after { | |
| background: #2982b9; | |
| } | |
| .menu-container ul li a { | |
| text-decoration: none; | |
| color: #999; | |
| display: block; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| transition: 0.5s; | |
| -webkit-transition: 0.5s; | |
| -moz-transition: 0.5s; | |
| -ms-transition: 0.5s; | |
| -o-transition: 0.5s; | |
| } | |
| .menu-container ul li:hover a { | |
| color: #fff; | |
| } | |
| .menu-container ul li:last-child:after { | |
| box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.25); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment