• Image en texte

    A la demande de Yann et, je l'espère, pour d'autres, voici une explication sur le code CSS qui permet de remplir les lettres d'un texte avec une image.

    Dans mon exemple, l'image est dimensionnée en 800x250px mais vous adapterez; vous pouvez, comme je le fais désormais, utiliser des unités adaptatives; j'ai photographié le carrelage de mon perron, pour l'occasion !

    Le code comporte le préfixe "-webkit-" qui, en principe, est nécessaire pour que certains navigateurs (Chrome, Safari, Opera...) sachent lire cet attribut mais, dans ce cas, il est lu aussi par Firefox ( préfixe -moz- d'habitude).

    YANN

    <div id="bk1" style="margin: 10px auto; width:800px; height:250px;">YANN</div>

    <style type="text/css"><!--
    #bk1{ width:800px; height:450px; font-size:200px; font-weight:bold; text-align:center;
    background: url(http://ekladata.com/9epRuRV1fELdgDXtrJV52Vwf2X8.jpg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 4px rgba(255,255,255,1);
    -webkit-filter:drop-shadow(1px 1px black);}

    --></style>

    width:800px: largeur du montage.

    height:250px: hauteur du montage.

    font-size:200px: hauteur du texte.

    font-weight:bold: texte en gras.

    text-align:center: texte centré dans le montage.

    background:url('http://') no-repeat center left;  fond avec l'adresse de votre image; si votre image a des dimensions différentes de votre montage, vous pouvez la positionner pour que le motif souhaité soit apparent, la positionner par les attributs en rouge: no-repeat: interdira à l'image de se répéter pour remplir le montage; center: la partie visible sera réglé verticalement sur le centre de l'image; left: la partie visible de l'image sera réglée horizontalement à partir de la gauche de l'image.

    Vous vous souvenez aussi que pour dimensionner votre image avec l'adresse d'une taille différente, vous pouvez écrire: http://ekladata.com/9epRuRV1fELdgDXtrJV52Vwf2X8@1000x563.jpg  ce qui va dimensionner votre image en 1000px par 563px

    -webkit-background-clip: text;  code pour indiquer au programme le type de remplissage choisi.

    -webkit-text-fill-color: transparent; couleur de remplissage transparente pour laisser voir l'image.

    -webkit-text-stroke: 4px rgba(255,255,255,1); bordure extérieure des lettres: ici blanche et 4 px d'épaisseur.

    -webkit-filter:drop-shadow(1px 1px black); La possibilité de l'ombre est limitée car sous l'ombre, on voit l'image (?)


    YANN

     

    Survolez le montage pour en faire apparaître la construction.

    <div style="width: 800px; height: 250px; margin: 10px auto;">
    <p id="bka">YANN</p>
    <p id="bkb">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    #bka{position:absolute; z-index:2; width:800px; height:250px; font-size:200px; font-weight:bold; text-align:center;
    color: transparent;
    background: url(http://ekladata.com/cw88LpneSiX1-UST3j0-24u6l2I.jpg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 4px rgba(255,255,255,1);
    -webkit-filter:drop-shadow(1px 1px black);}
    #bkb{position:absolute; z-index:1; width:800px; height:250px; border:3px ridge grey; background:url('http://ekladata.com/cw88LpneSiX1-UST3j0-24u6l2I.jpg'); opacity:0; transition:all 2s linear;}
    #bka:hover ~ #bkb{opacity:1;}
    --></style>