• text stroke

    Lorsque nous voulons remplir un texte avec une image, (animée ou non), nous ne pouvons lui donner une bordure par le code: text-shadow:0.1vh 0.1vh black; (par exemple).

    Par contre, une bordure peut être appliquée par webkit-text-stroke:0.1vh 0.1vh black; (par exemple).

    Pause Antillaise

    <div class="chaud">Pause Antillaise</div>
    <style type="text/css"><!--
    .chaud { width: 60vw; height: 6vw; text-align: center; font-size: 5vw; margin: 1vh auto; -webkit-text-stroke: 0.2vh brown;
    background: url('http://ekladata.com/oeh8-_M79BYUCwNk3T_L4EIDZKE.jpg');
    background-position:50% 45%;
    -webkit-background-clip: text;
    color: transparent;}
    --></style>

    Class="chaud" ou id="chaud" identifiant du cadre.

    width:60vw; largeur du cadre du texte.

    height:6vw; hauteur du cadre du texte.

    text-align:center; centrage du texte dans le cadre.

    font-size:5vw; taille de la police de texte.

    margin:1vw auto; positionnement du cadre dans la page: latéral centré auto et écart haut (1vw).

    -webkit-text-stroke:0.2vh brown; liseré autour de chaque lettre: épaisseur 0.2vh marron.

    background:url('http...jpg'); adresse de l'image de fond.

    background-position:50% 45%; positionnement de l'image: ici, centrée en latéral (50%) et à 45% du bord haut en vertical.

    -webkit-text-stroke:text; seules les lettres laissent apparaitre l'image de fond.

    color:transparent; permet de ne pas avoir un remplissage des lettres.

    Nous pourrions modifier la taille de l'image de fond en écrivant, par exemple, son adresse avec:..._ L4EIDZKE@1152x80.jpg