WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Efeito Gaveta
1313
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
1 June 2025
Efeito de controle deslizante de imagem inicial do site
20 June 2025
Formulário de registro de login HTML com efeito de cartão 3D
21 October 2024
Efeitos do menu suspenso
HTML
Copy
Drawer Effect
Drawer Effect
My Colors
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw; font-family: "Monaco"; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } h1 { margin-bottom: 50px; } .drawer_wrapper { height: 100px; width: 500px; position: relative; border-radius: 10px; } .layer { position: absolute; inset: 0; transition: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: 10px; transform-origin: bottom; } .info { position: absolute; padding: 10px; color: white; font-weight: lighter; inset: 0; height: 100%; width: 100%; font-size: 0.5rem; } .drawer_wrapper:hover .layer_5 { transform: perspective(70rem) rotateX(-45deg); transition-delay: 0ms; box-shadow: 0px -5px 8px 0px #00000026; } .drawer_wrapper:hover .layer_4 { transform: perspective(70rem) rotateX(-35deg); transition-delay: 70ms; box-shadow: 0px -2px 4px 0px #b9310053; } .drawer_wrapper:hover .layer_3 { transform: perspective(70rem) rotateX(-25deg); transition-delay: 100ms; } .drawer_wrapper:hover .layer_2 { transform: perspective(70rem) rotateX(-15deg); transition-delay: 150ms; } .drawer_wrapper:hover .layer_1 { transform: perspective(70rem) rotateX(-5deg); transition-delay: 200ms; } .drawer_wrapper:hover .handle { background-color: #c33a08; } .layer_1 { background-color: salmon; z-index: 1; } .layer_2 { background-color: skyblue; z-index: 2; } .layer_3 { background-color: orange; z-index: 3; } .layer_4 { background-color: orangered; z-index: 4; } .layer_5 { background-color: black; z-index: 5; cursor: pointer; } .handle { position: absolute; height: 7px; width: 50px; border: 2px solid white; border-radius: 10px; left: 50%; bottom: 40%; transform: translate(-50%, -50%); background-color: orangered; transition: 200ms ease; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */