28112 sujets

CSS et mise en forme, CSS3

[Résolu] Dégradé de couleur sur texte éditable

Bonjour !

J'aimerai appliquer un dégradé de couleur sur un texte en CSS (ou autre). Est-ce possible ?

(j'aimerai que le texte soit éditable, donc pas en image)

Voir image jointe.

Merci par avance !
upload/14206-Capturedan.png
Bonjour Greg_Lumiere,

Sauf erreur de ma part, cela concerne seulement les fonds (Gradient Background).

Est-ce possible sur un texte ? C'est ça qui me pose problème.

Merci Smiley smile
Modérateur
Tu as raison, en fait je ne m'étais jamais posé la question.

Du coup j'ai tenté d'approffondir.

D'après l'article de CSS Trick Gradient text cela n'est possible que pour le moteur webkit par l'utilisation d'une extension propriétaire.

Sous Firefox Giana expose cet effet via Codepen en utilisant comme subterfuge du text-shadow et des linear-gradient. Bluffant !
Giana's exemple of text gradient

Mais au vu de la difficulté, une image ce n'est pas mieux ? Smiley murf
Modérateur
Bonjour,
Greg_Lumiere a écrit :
Sous Firefox Giana expose cet effet via Codepen en utilisant comme subterfuge du text-shadow et des linear-gradient. Bluffant !
Giana's exemple of text gradient


On peut simplifier. Par exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<style>
.gradient {
  font-size: 72px;
  display: inline-block;
  background: white;
  color: black;
  position: relative;
}

.gradient::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(left, #f00, #00f);
  background: linear-gradient(to right, #f00, #00f);
  content: '';
  display: block;
  mix-blend-mode: screen;
}
</style>
</head>
<body>
<h1 class="gradient">Un texte en dégradé</h1>
</body>
</html>
Amicalement,
Modifié par parsimonhi (18 Mar 2016 - 14:12)
Modérateur
parsimonhi a écrit :
On peut simplifier. Par exemple [...]
T'es sûr ? Car quand je tente sur Codepen, j'obtiens bien un dégradé de couleurs mais sur l'ensemble du background de la fenêtre et le texte est en arrière plan.
Edit: Correction, ça fonctionne !


Tout ça sur Firefox.
Editi: Ca fonctionne aussi sur Firefox Smiley cligne


Par contre je découvre mix-blend-mode.
Modifié par Greg_Lumiere (18 Mar 2016 - 14:29)
Modérateur
Bonjour,
Greg_Lumiere a écrit :
T'es sûr ?
Il me semble, oui ! (testé en l'état sur firefox et chrome sous mac OS X).

Amicalement,
Modérateur
Ha oui, autant pour moi. Mes excuses Parcimonhi, j'avais omis la class .gradient à son état normal.


Magnifique ! Je garde ça sous le coude.
Wahou ! J'ai testé aussi pour voir. Vous êtes bon les gars...

Par contre, en raison de l'utilisation de la propriété "mix-blend-mode" on oublie IE Smiley decu
Modérateur
Olivier C a écrit :
Par contre, en raison de l'utilisation de la propriété "mix-blend-mode" on oublie IE Smiley decu
Comme d'hab'.
Salut tous Smiley smile

Il est vrai que Webkit a fait des choses tout à fait épatantes à ce sujet, mais malheureusement, rien de standardisé ni de très compatible avec les autres butineurs qui n'ont pas suivi...
Il me semble me souvenir que Benjamin De Cock faisait des choses très sympas avec ce genre d'implémentations dans son bac à sable...

On obtient des résultats satisfaisants voir plus compatible (à part peut-être la bordure) avec svg, non ?
(même si ça reste un peu "ardu" en terme de mise en place et que l'on peut peut-être perdre au niveau de la sémantique...)
Je pense à ce genre de chose par exemple (voir en fin d'article).

ps : On ne peut pas/plus sélectionner le texte (à la souris) avec les exemples (bien trouvé néanmoins Smiley cligne ) que vous fournissez, sans doute rien de grave, mais, ça me chiffonne Smiley smile
Modérateur
6l20 a écrit :
On ne peut pas/plus sélectionner le texte (à la souris) avec les exemples (bien trouvé néanmoins Smiley cligne ) que vous fournissez, sans doute rien de grave, mais, ça me chiffonne Smiley smile
C'est pourquoi il vaut mieux réserver cet effet de style pour un élément décoratif (et/ou obsolète).
Greg_Lumiere a écrit :
C'est pourquoi il vaut mieux réserver cet effet de style pour un élément décoratif (et/ou obsolète).

Ce qui n'est pas le cas dans l'exemple cité ici, nous sommes d'accord ? Smiley cligne
Modérateur
6l20 a écrit :
Salut tous Smiley smile
ps : On ne peut pas/plus sélectionner le texte (à la souris) avec les exemples (bien trouvé néanmoins Smiley cligne ) que vous fournissez, sans doute rien de grave, mais, ça me chiffonne Smiley smile


Cela dépend encore du navigateur Smiley cligne avec certains on peut selectionner et copier/coller, d'autre on peut selectionné mais la sélection est perdu sitôt que la souris est relâchée (à cause d'un chat surement) ... mais SVG est encore de loin l'option la plus sure.
Sujet clos
Aller à