Appliquer une texture à un texte avec CSS3

Je me souviens du temps où il fallait faire appel à Photoshop pour appliquer une texture à un texte, il fallait faire un masque et sauvegarder sous .gif ou .png pour l'intégrer avec une qualité parfois douteuse. Avec CSS3 ce temps est révolu, et tant mieux !

Du côté HTML, on va intégrer le texte dans un div :

<div id="blocTexteAvecTexture">
    <p>TEXTURE</p>
</div>

On passe ensuite au CSS :

#blocTexteAvecTexture {
    background: -webkit-linear-gradient(transparent, transparent), url("chemin/vers/votre/image.jpg") transparent;
    background-image: -o-linear-gradient(transparent, transparent);
    background-size: cover;
    font-family: Arial Black;
    color: #000;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display: block;
}
#blocTexteAvecTexture p {
    font-size: 90px;
    line-height: 90px;
    text-shadow: 0 0 1px rgba(0,0,0,.1);
    -webkit-transition: text-shadow 1s ease;
    transition: text-shadow 1s ease;
}

Malheureusement, ceci fonctionnera avec les navigateurs webkit, mais pas les autres comme Firefox. La propriété background-clip est un standard CSS3, mais pas text. Dans Firefox, ce texte restera noir. On peut remédier à celà avec un fallback via svg en ajoutant un petit script JS.

Ce code JavaScript est à ajouter après l'HTML :

/**
  -webkit-background-clip: text Polyfill
  
  # What? #
  A polyfill which replaces the specified element with a SVG
  in browser where "-webkit-background-clip: text" 
  is not available.

  Fork it on GitHub
  https://github.com/TimPietrusky/background-clip-text-polyfill

  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

Element.prototype.backgroundClipPolyfill = function () {
  var a = arguments[0],
      d = document,
      b = d.body,
      el = this;

  function hasBackgroundClip() {
    return b.style.webkitBackgroundClip != undefined;
  };
  
  function addAttributes(el, attributes) {
    for (var key in attributes) {
      el.setAttribute(key, attributes[key]);
    }
  }
  
  function createSvgElement(tagname) {
    return d.createElementNS('http://www.w3.org/2000/svg', tagname);
  }
  
  function createSVG() {
    var a = arguments[0],
        svg = createSvgElement('svg'),
        pattern = createSvgElement('pattern'),
        image = createSvgElement('image'),
        text = createSvgElement('text');
    
    // Add attributes to elements
    addAttributes(pattern, {
      'id' : a.id,
      'patternUnits' : 'userSpaceOnUse',
      'width' : a.width,
      'height' : a.height
    });
    
    addAttributes(image, {
      'width' : a.width,
      'height' : a.height
    });
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', a.url);
    
    addAttributes(text, {
      'x' : 0,
      'y' : 80,
      'class' : a['class'],
      'style' : 'fill:url(#' + a.id + ');'
    });
    
    // Set text
    text.textContent = a.text;
      
    // Add elements to pattern
    pattern.appendChild(image);
      
    // Add elements to SVG
    svg.appendChild(pattern);
    svg.appendChild(text);
    
    return svg;
  };
  
  /*
   * Replace the element if background-clip
   * is not available.
   */
  if (!hasBackgroundClip()) {
    var img = new Image();
    img.onload = function() {
      var svg = createSVG({
        'id' : a.patternID,
        'url' : a.patternURL,
        'class' : a['class'],
        'width' : this.width,
        'height' : this.height,
        'text' : el.textContent
      });
      
      el.parentNode.replaceChild(svg, el);
    }
    img.src = a.patternURL;
  }
};

var element = document.querySelector('.texteAvecTexture'); 

/*
 * Call the polyfill
 *
 * patternID : the unique ID of the SVG pattern
 * patternURL : the URL to the background-image
 * class : the css-class applied to the SVG
 */
element.backgroundClipPolyfill({
  'patternID' : 'mypattern',
  'patternURL' : 'chemin/vers/votre/image.jpg',
  'class' : 'texteAvecTexture'
});

On ajoute un peu de CSS pour le fallback SVG :

.texteAvecTexture {
    font-size: 90px;
}

svg {
    width: 100%;
}

Et maintenant ça fonctionne même avec Firefox !