28172 sujets
CSS et mise en forme, CSS3
Bonjour Hubr,
Oui c'est tout à fait possible !
La leçon est ici
W3 Schools - Css3 Gradients
Et ça c'est l'automate
Colorzilla - Gradient Editor (éditeur en ligne de dégradé de couleurs)
Oui c'est tout à fait possible !
La leçon est ici
W3 Schools - Css3 Gradients
Et ça c'est l'automate
Colorzilla - Gradient Editor (éditeur en ligne de dégradé de couleurs)
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 ?
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 ?
Bonjour,
On peut simplifier. Par exemple :
Modifié par parsimonhi (18 Mar 2016 - 14:12)
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>
Modifié par parsimonhi (18 Mar 2016 - 14:12)
parsimonhi a écrit :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.
On peut simplifier. Par exemple [...]
Edit: Correction, ça fonctionne !
Tout ça sur Firefox.
Editi: Ca fonctionne aussi sur Firefox
Par contre je découvre mix-blend-mode.
Modifié par Greg_Lumiere (18 Mar 2016 - 14:29)
Salut tous 
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 ) que vous fournissez, sans doute rien de grave, mais, ça me chiffonne
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
) que vous fournissez, sans doute rien de grave, mais, ça me chiffonne 6l20 a écrit :
Salut tous
ps : On ne peut pas/plus sélectionner le texte (à la souris) avec les exemples (bien trouvé néanmoins
Cela dépend encore du navigateur
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.