Exemple d'onglets CSS : mise en page HTML simple

743 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Exemple d'onglets CSS : mise en page HTML simple

Recommandé

15 August 2025

Structure de mise en page CSS Office

26 August 2025

Modèle HTML de site Web de film

26 August 2025

Site Web de portfolio turc : HTML, CSS, JS, Tailwind

HTML

CSS

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

Recommandé

Structure de mise en page CSS Office

Modèle HTML de site Web de film

Site Web de portfolio turc : HTML, CSS, JS, Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS