Effetto cassetto

1008 ledoc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

13 November 2024

Effetto cornice per immagini usando CSS puro

29 May 2025

Effetto luce sull'icona social

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 cornice per immagini usando CSS puro

Effetto luce sull'icona social

Pagina di accesso al CoffeeShop con effetto vetro e Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS