Menu de navigation Coreboot

1,947 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 August 2024

Jeu de Sudoku

28 May 2026

Modèle HTML de jeux débloqués avec prise en charge du plein écran

5 July 2025

Exemple de sélecteur de date HTML

HTML

CSS

@import url(https://fonts.bunny.net/css?family=nunito:400,400i,600,600i,800,800i);
*,*::before,*::after{box-sizing:border-box}body{margin:0;padding:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;font-family:'Nunito', sans-serif;font-size:16px;line-height:1.5}
:root{
    --color1:#000;
    --color2:#fff;
    --height:40px;
    --width:110px;
    --border:2px;
}
#cubicle {
    height: var(--height);
}
#cubicle > .links {
    display: flex;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none
}
#cubicle > .links li {
    flex: 1;
    min-width: var(--width);
    height: var(--height);
    margin: 0 0 0 calc(-1 * var(--border));
    perspective: 1000px;
    z-index: 1
}
#cubicle > .links li:first-child {
    margin-left: 0;
}
#cubicle > .links li:hover {
    z-index: 2
}
#cubicle > .links a {
    display: block;
    height: var(--height);
    position: relative;
    text-decoration: none;
    transform-style: preserve-3d;
    transform: translateZ(calc(-1 * calc(var(--height) / 2)));
    transition: transform 0.5s cubic-bezier(.08,.82,.17,1)
}
#cubicle > .links a:hover {
    transform: translateZ(calc(-1 * calc(var(--height) / 2))) rotateX(-90deg);
}
#cubicle > .links a::before,
#cubicle > .links a::after {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--width);
    height: var(--height);
    position: absolute;
    border: var(--border) solid var(--color1);
    content: attr(title);
}
#cubicle > .links a::before {
    background-color: var(--color2);
    color: var(--color1);
    transform: rotateY(0deg) translateZ(calc(var(--height) / 2))
}
#cubicle > .links a::after {
    background-color: var(--color1);
    color: var(--color2);
    transform: rotateX(90deg) translateZ(calc(var(--height) / 2))
}