Exemple d'onglets CSS : mise en page HTML simple

400 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Exemple d'onglets CSS : mise en page HTML simple

Recommandé

22 August 2025

Carrousel de cartes Lion 3D HTML CSS et JavaScript

23 November 2024

Boutons de réseaux sociaux en survol

22 August 2025

Commentaire d'espace réservé au code HTML

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é

Carrousel de cartes Lion 3D HTML CSS et JavaScript

Boutons de réseaux sociaux en survol

Commentaire d'espace réservé au code HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS