Esempio di schede CSS: layout HTML semplice

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

5 June 2025

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #181818;  
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }
.animation-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.tab {
  position: absolute;
  width: 200px;
  height: 80px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform-origin: top right; /* Define ponto de rotação para transformações */
  /* Transformação de escala e rotação para criar um efeito de zoom e  "overflow" */
  animation: tabChaos 10s linear infinite; /* Chamando a animação "tabChaos" com duração de 10 segundos, de acordo com a duração da própria animação e duração infinita */
}
/* Animação "tabChaos", aplicando variação de escala, rotação e translção para cada tab */
@keyframes tabChaos {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: scale(0.8) rotate(15deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2) rotate(-20deg);
    opacity: 0.5;
    top: 20px; /* Movimento vertical */ 
  }
  75% {
    transform: scale(0.9) rotate(10deg);
    opacity: 0.6;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

Esempio di schede CSS: layout HTML semplice

Consigliato

Un codice di sofiane.blida09

Scheda sfumata HTML

Un codice di Gregory

HTML

CSS

JS

Consigliato

Un codice di sofiane.blida09

Scheda sfumata HTML

Un codice di Gregory

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS