28221 sujets

CSS et mise en forme, CSS3

[Résolu] Effet de texte qui déborde des lettres, comment le contenir?

Modérateur
Bonjour,

Aujourd'hui il est possible de se servir de background-clip plutôt que mix-blend-mode.

https://developer.mozilla.org/fr/docs/Web/CSS/background-clip

il est aussi possible d'animer des gradient elliptique en fond d'image .
https://developer.mozilla.org/fr/docs/Web/CSS/gradient/radial-gradient

voici un exemple que tu peut reprendre . le premier h1 utilise background-clip:text; + color transparent pour appliquer les couleurs de fond au texte uniquement.

Le second est la pour visualiser où se dessinent les 4 gradient utilisés et t'aider à régler leur tailles et position si cette approche te convient .

https://codepen.io/gc-nomade/pen/JoPGqwE

Cdt,
ok j'ai trouve une solution qui me convient, avec ton aide et celle de chat gpt évidemment : 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Effet Nuages sur Titre</title>
  <style>
    /* Insérez ici le CSS de l'exemple ci-dessus */
  </style>
</head>
<body>
  <h1 class="title">Votre Titre Animé</h1>
</body>
</html>


body {
  background-color: #36364C; /* Couleur de fond */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: "Arial", sans-serif;
}

.title {
  font-size: 4rem; /* Taille des lettres */
  font-weight: bold;
  letter-spacing: 0.1em;
  color: transparent; /* Rendre les lettres transparentes */
  background: linear-gradient(90deg, #00c2ff, #33ff8c, #ffc640, #e54cff);
  background-size: 300% 300%; /* Augmente la taille pour un effet fluide */
  background-clip: text; /* Applique l'effet aux lettres */
  -webkit-background-clip: text; /* Compatibilité Chrome/Safari */
  animation: cloud-move 6s infinite linear; /* Animation continue */
}

@keyframes cloud-move {
  0% {
    background-position: 0% 50%; /* Début du dégradé */
  }
  50% {
    background-position: 100% 50%; /* Déplacement complet */
  }
  100% {
    background-position: 0% 50%; /* Retour au point de départ */
  }
}


Merci !

Mais c'est moins joli que l'exemple quand même!
Modifié par sieborg (06 Dec 2024 - 17:21)
Bon j'avoue que je suis pas tout a fait satisfait. J'ai essaye bien 4 heures a changer le css pour pouvoir avoir l'effet en fond des lettres peu importe la couleur de l'arrière plan. Je n'y arrive pas, c'est super frustrant! si vous y arrivez chapeau! voici le lien, vous pouvez changer le code directement dans la fenêtre :

https://codepen.io/ostylowany/pen/vYzPVZL
Modérateur
Bonsoir,

Le codepen que tu as mis en lien utilise plusieurs images de dégradé.

La solution que tu as trouvé et qui ne te satisfait plus, utilise une seule image de dégradé. elle n'est pas comparable à l'exemple.

Il est impossible de reproduire quelque chose de similaire avec une seule image de dégradé lorsque l'exemple en utilise plusieurs.

Mis à part la validité du code initial justement relevé par @casper2

Cdt
Modifié par gcyrillus (07 Dec 2024 - 21:36)
D'accord merci Smiley smile Je pense que je vais reprendre tom codepen gcyrillus, pour mes besoins ca convient parfaitement et c'est très proche.

Cependant c'est juste pour la soif de comprendre que je continue et propose des solutions, peut être naïves.

Ne serait-il pas possible de créer un masque autour du texte? Genre un background avec des trous, les trous étant les lettres? Ou est-ce impossible de considérer une structure (ici une lettre) dans un élément comme un trou en css?

Si c'est possible, je me verrais juste "couvrir" le contour du texte avec un rectangle aux couleurs de l'arrière plan de la page troué avec les lettres Smiley lol

Je sais pas si ca existe.
Prévenir un modérateur
Répondre au sujet
Aller à