Texte couleur inversée
Utilisateur anonyme
-
Alainpre Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
Alainpre Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis en train de coder un site et j'aimerais que mes textes soient en couleurs inversées par rapport à l'arrière plan.
C'est à dire qu'avec filter: invert(1) la couleur est inversée par rapport à la couleur par défaut du texte, mais ce que j'aimerais c'est que le texte agisse comme un filtre par rapport à l'arrière plan.
Donc si j'ai par exemple une image noire, que le texte devienne automatiquement blanc et vice versa mais que ça fasse effet bel et bien par rapport à l'image et non à la couleur par défaut du texte.
Une idée pour obtenir ce résultat ?
Merci d'avance pour vos réponses.
Je suis en train de coder un site et j'aimerais que mes textes soient en couleurs inversées par rapport à l'arrière plan.
C'est à dire qu'avec filter: invert(1) la couleur est inversée par rapport à la couleur par défaut du texte, mais ce que j'aimerais c'est que le texte agisse comme un filtre par rapport à l'arrière plan.
Donc si j'ai par exemple une image noire, que le texte devienne automatiquement blanc et vice versa mais que ça fasse effet bel et bien par rapport à l'image et non à la couleur par défaut du texte.
Une idée pour obtenir ce résultat ?
Merci d'avance pour vos réponses.
A voir également:
- Texte couleur inversée
- Excel cellule couleur si condition texte - Guide
- Boite a couleur - Télécharger - Divers Photo & Graphisme
- Transcription audio en texte word gratuit - Guide
- Somme si couleur - Guide
- Word couleur de fond texte - Guide
2 réponses
Je pense qu'il faut regarder du côté des propriétés blend-mode. Malheureusement ces propriétés sont encore mal gérées par les navigateurs.
Un tuto : http://stylescss.free.fr/v2-properties/blend-mode.php
Des exemples : https://www.hongkiat.com/blog/css3-mix-blend-mode/
Un tuto : http://stylescss.free.fr/v2-properties/blend-mode.php
Des exemples : https://www.hongkiat.com/blog/css3-mix-blend-mode/
Bonjour,
par rapport à l'arrière plan c'est facile si c'est une couleur unie.
Avec une image c'est compliqué voire impossible puisqu'il faut connaître la couleur de tous les pixels de l'image, calculer la moyenne générale...et trouver donc la couleur 'opposée'.
Avec un fond uni il n'y a pas ce genre de problème.
Sinon utilisez la semi-transparence avec une couleur indiquée avec CSS rgba() et un blanc ou noir semi-transparent entre l'image et le texte(en couleur de fond).
Pour avoir réellement un effet négatif sur une image vous pouvez utiliser Python ou Canvas, certes c'"est lourd comme solution juste pour un effet de texte sur un titre donc à éviter sauf si on aime perdre du temps sur des trucs douteux.
Voici un exemple avec Canvas (image en négatif à adapter au texte).
https://www.htmlgoodies.com/html5/other/create-negative-blur-and-rotate-image-effects-using-the-html5-canvas.html
par rapport à l'arrière plan c'est facile si c'est une couleur unie.
Avec une image c'est compliqué voire impossible puisqu'il faut connaître la couleur de tous les pixels de l'image, calculer la moyenne générale...et trouver donc la couleur 'opposée'.
Avec un fond uni il n'y a pas ce genre de problème.
Sinon utilisez la semi-transparence avec une couleur indiquée avec CSS rgba() et un blanc ou noir semi-transparent entre l'image et le texte(en couleur de fond).
Pour avoir réellement un effet négatif sur une image vous pouvez utiliser Python ou Canvas, certes c'"est lourd comme solution juste pour un effet de texte sur un titre donc à éviter sauf si on aime perdre du temps sur des trucs douteux.
Voici un exemple avec Canvas (image en négatif à adapter au texte).
https://www.htmlgoodies.com/html5/other/create-negative-blur-and-rotate-image-effects-using-the-html5-canvas.html
