• Texte

    En rédigeant mon article du jour, j'ai utilisé un code que je me permets de vous rappeler: décorer une partie d'un texte pour bien le faire apparaître.

    Décorons nos textes !

    <p style="font-size: 20pt; color: lime; text-shadow: 2px 2px black;">D&eacute;corons nos textes !</p>

    Pour cela, il va falloir ouvrir le code source (<>) car, même en mode "expert", la barre d'outils ne nous offre pas cette possibilité.

    Tout d'abord, en html, pour sélectionner une partie d'un texte et lui donner des caractéristiques particulières, nous pouvons écrire:

    bla bla bla<span style="...">la partie de texte</span>bla bla bla...

    La balise span va recevoir les attributs que vous avez choisis: taille, couleur, ombre, position, animation éventuellement en lui donnant une identification:

     

    Survolez ce texte.

    <p id="t1">Survolez ce texte.</p>
    <style><!--
    #t1{font-size: 20pt; color: lime; text-shadow: 2px 2px black;}
    #t1:hover{color:coral;}
    --></style>

    Il ne semble pas possible de placer autre chose qu'une couleur à l'intérieur du texte, par cette méthode; vous pouvez changer le sens de l'ombre.

    Autre ombre.

    Vous pouvez utiliser les outils de la barre d'outils pour positionner, modifier votre texte et/ou utiliser une police externe...

    Pour utiliser une image en remplissage de texte, il semble que seuls les navigateurs en webkit (Chrome, Opera, Safari) acceptent l'attribut: background-clip:text;

    Il est sans doute plus simple de créer un masque avec un logiciel de traitement d'images et de placer ce masque au dessus d'une image, animée ou non...

     

    Voici le code de l'exemple mais vous devrez l'adapter avec vos adresses d'images (gif et masque).
    <div style="width: 1150px; height: 647px; background: url('http://ekladata.com/lMWX1P_SmkspPw6ZKXrHkr5JeEc.gif'); margin: 5px auto;">
    <p style="width: 1150px; height: 647px; background: url('http://ekladata.com/nA94ucK7M0OMXkT7SNvLq_tTj0w.png');">&nbsp;</p>
    </div>