Effetto cassetto

882 ledoc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

23 November 2024

Effetto passaggio del mouse sull'icona

13 November 2024

Effetto cornice fotografica CSS 3D per immagini

17 July 2025

Pagina di accesso al CoffeeShop con effetto vetro e Tailwind

HTML

CSS

* {
  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;
}

Consigliato

Effetto passaggio del mouse sull'icona

Effetto cornice fotografica CSS 3D per immagini

Pagina di accesso al CoffeeShop con effetto vetro e Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS