Comment répéter du texte en tant qu’image d’arrière-plan en CSS à l’aide de l’élément ()

Online Coding Courses for Kids

Il y a une tendance au design que j’ai vue apparaître partout. Vous l’avez peut-être vu aussi. C’est ce genre de chose où le texte se répète encore et encore. Un bon exemple est le site Web de comparaison de prix, GoCompare, qui l’a utilisé dans une campagne publicitaire multicanal majeure.

Nike l’a également utilisé, comme dans cette publicité:

Diggin ‘cette orange! (La source)

Je ne pouvais pas m’empêcher de me demander comment j’implémenterais ce type de conception pour le Web. Je veux dire, nous pourrions évidemment simplement répéter le texte dans le balisage. Nous pourrions également exporter le design sous forme d’image en utilisant quelque chose comme Photoshop, mais mettre du texte dans des images est mauvais pour le référencement et l’accessibilité. Ensuite, il y a le fait que, même si nous avons utilisé du texte réel, ce n’est pas comme si nous voulions qu’un lecteur d’écran le dise.

Polyvalence
Polyvalence
Polyvalence
Polyvalence

D’ACCORD, Arrêtez déjà!

Ces considérations font qu’il semble irréaliste de faire quelque chose comme ça sur le Web. Ensuite, je me suis retrouvé à languir pour le long terme, mais mal soutenu, élément() fonctionnalité en CSS. Il permet d’utiliser n’importe quel élément HTML comme image d’arrière-plan, qu’il s’agisse d’un élément de bouton unique ou d’un ensemble

plein de contenu.

Selon la spécification:

La fonction element () reproduit uniquement l’apparence de l’élément référencé, pas le contenu réel et sa structure. Les auteurs ne doivent l’utiliser qu’à des fins décoratives.

Pour nos besoins, nous ferions référence à un élément de texte pour obtenir cet effet répétitif.

Définissons un ID que nous pouvons appliquer à l’élément de texte que nous voulons répéter. Appelons ça #thingy. Notez que lorsque nous utilisons #thingy, nous devons préfixer le element() valeur avec -moz-. Tandis que element() a été pris en charge dans Firefox depuis 2010, il n’a malheureusement pas atterri dans un autre navigateur depuis.

.element {
  background-image: -moz-element(#thingy);
}

Voici une recréation quelque peu lâche de la publicité Nike que nous avons vue plus tôt. Encore une fois, Firefox est requis pour voir la démo comme prévu.

Voyez comment cela fonctionne conceptuellement? J’ai placé un élément (#versatility) sur la page, masquez-la en lui donnant une hauteur nulle, définissez-la comme background-image sur le corps, puis utilisé le background-repeat pour la dupliquer verticalement sur la page.

le element() le fond est vivre. Cela signifie que le background-image l’apparence de la chose l’utilisant changera si l’élément HTML référencé change. C’est le même type d’accord lorsque vous travaillez avec des propriétés personnalisées: changez la variable et elle sera mise à jour partout où elle est utilisée.

Il existe bien sûr d’autres cas d’utilisation pour cette propriété. Découvrez comment Preethi l’a utilisé pour effectuer une navigation par défilement sur la page d’un article. Vous pouvez également utiliser un élément de canevas HTML comme arrière-plan si vous voulez faire preuve de fantaisie. Je l’ai utilisé pour montrer des captures d’écran de pages dans une table des matières. Vincent De Oliveira, a documenté certains exemples extrêmement créatifs. Voici un effet de réflexion d’image, si vous êtes dans la conception web rétro:


Assez bien, non? Encore une fois, j’aimerais pouvoir dire que c’est une approche prête à la production pour obtenir cet effet de conception soigné, mais les choses sont ce qu’elles sont en ce moment. En fait, c’est un bon rappel pour faire entendre votre voix pour les fonctionnalités que vous souhaitez voir implémentées dans les navigateurs. Il y a des tickets ouverts dans WebKit et Chrome où vous pouvez le faire. J’espère que nous allons finalement obtenez cette fonctionnalité dans les navigateurs Safari-world et Chrome-world.

Close Menu