Hello,
Je suis en train de modifier mon design et j’aimerai créer des cadres qui se rapprochent de cela : https://codepen.io/acarlie/pen/NWBzjJP
Après 10000 échanges avec chatgpt, j’arrive à quelque chose qui s’y rapproche grossièrement… mais je bute pour que sur les angles coupés, la bordure s’affiche également.
Voici ce que cela donne :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cadre Futuriste Néon</title>
<style>
:root {
--frame-width: 520px;
--frame-height: 204px;
--neon-color-hue: 183; /* Teinte du néon bleu */
--neon-color: hsl(183, 100%, 50%); /* Couleur du néon (par défaut bleu) */
--corner-size: 20px; /* Taille des coins découpés */
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #0a0a0a; /* Fond sombre de la page */
}
.neon-frame {
position: relative;
width: var(--frame-width); /* Largeur paramétrable */
height: var(--frame-height); /* Hauteur paramétrable */
border: 2px solid var(--neon-color); /* Bordure du cadre avec la couleur du néon */
background: rgba(0, 0, 0, 0.8);
text-align: center;
font-size: 24px;
color: hsl(240, 32%, 96%);
font-family: 'Rajdhani', sans-serif;
box-shadow: 0 0 6px var(--neon-color); /* Ombre du néon avec la couleur paramétrée */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
/* Dégradé de fond du cadre avec la couleur néon paramétrable */
background: linear-gradient(130deg, hsla(var(--neon-color-hue), 100%, 50%, 0.2), hsla(240, 100%, 7%, 0));
background-size: 400% 400%;
animation: gradientBackground 10s ease infinite;
/* Polygone pour découper les coins en haut à gauche et bas à droite seulement */
clip-path: polygon(
0 var(--corner-size),
var(--corner-size) 0,
100% 0,
100% calc(100% - var(--corner-size)),
calc(100% - var(--corner-size)) 100%,
0 100%
);
}
@keyframes gradientBackground {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.neon-frame::before {
content: '';
position: absolute;
top: -6px;
left: -6px;
width: calc(100% + 12px);
height: calc(100% + 12px);
border: 2px solid transparent;
z-index: -1;
background: linear-gradient(130deg, hsla(var(--neon-color-hue), 100%, 50%, 0.2), hsla(240, 100%, 7%, 0)); /* Néon autour du cadre */
filter: blur(8px);
animation: neonGlow 2s infinite alternate;
}
@keyframes neonGlow {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
.neon-frame h1 {
position: absolute;
top: 0; /* Le titre est maintenant tout en haut */
margin: 0;
background-color: hsla(var(--neon-color-hue), 100%, 50%, 0.3); /* Fond plus clair pour la ligne du titre */
width: 100%;
height: 20px; /* Hauteur réduite du titre */
text-align: center;
padding: 0;
color: hsl(240, 32%, 96%);
font-size: 16px; /* Taille du texte ajustée pour mieux s'adapter */
border-bottom: 2px solid var(--neon-color); /* Bordure pour séparer du reste avec la couleur du néon */
}
</style>
</head>
<body>
<div class="neon-frame">
<h1>Suivi consommation</h1>
</div>
</body>
</html>
Autre chose, j’aurai aimé qu’il soit possible d’avoir cadres avec des couleurs différentes, mais si j’en modifie une, cela les modifie toutes.
Une âme charitable saurait-elle adapter le code ?
Merci,
Frédéric