• Image en texte

    Retour sur un code que je n'utilise que rarement et qui semble s'être simplifier pour Firefox mais pas pour Chrome.

    Remplir les lettres d'un texte avec une texture, ou une image fixe ou encore avec une image animée en code CSS et non par un logiciel de traitement d'image.

    La taille des caractères du texte devra être adaptée pour que le fond ne soit trop petit.

    COUCOU

    La bordure noire n'est qu'indicative.

    <div class="chaud" style="width: 50vw; height: 10vw; border: 0.1vh solid black; margin: 1vh auto; text-align: center; line-height: 10vw;">COUCOU</div>

    <style type="text/css"><!--
    .chaud {font-size:10vw; -webkit-text-stroke: 0.2vh black;
    background: url('http://ekladata.com/PbJMseNToYlxQNd3JZTCzsAnqIs.gif'); background-size:cover; background-position:0vw -5vw;
    -webkit-background-clip: text;
    color: transparent;}
    --></style>

    La taille de l'image de fond est adaptable (background-size:cover; ) ainsi que sa position (background-position:0vw -5vw;).

    Le remplissage est créé par -webkit-background-clip: text;, lu par FF.

    La bordure noire des lettres est créée par -webkit-text-stroke: 0.2vh black; lue par FF.

    Ne pas oublier color:transparent ! Par contre, je ne sais comment mettre de l'ombre sur les lettres: text-shadow ne fonctionne pas.

    COUCOU

    <p id="ex2" style="width: 50vw; height: 10vw; margin: 0vh auto; text-align: center; line-height: 10vw;">COUCOU</p>

    <style type="text/css"><!--
    #ex2 {font-size:10vw; -webkit-text-stroke: 0.2vh black;
    background: url('http://ekladata.com/QhfFP5IYzZRFjVAd9sBAaIPeHMw/rainb3.jpg'); background-size:50vw 10vw; background-position:0vw 0vw;
    -webkit-background-clip: text;
    color: transparent;}
    --></style>