Elle permet de créer une image dynamique d’un élément de la page, en le référençant par son id
. Cette image peut ensuite être utilisée en CSS, avec les propriétés qui acceptent des images : background-image
, list-style-image
, cursor
, etc.
Elle s’utilise de cette façon :
.element{
background-image: element(#id);
}
Lorsque le contenu de l’élément change, l’image générée continue d’être mise à jour en temps-réel.
Avec cette fonction, il est possible d’envisager :
- des reflets en CSS
- des miniatures suivantes/précédentes dans le cadre de carrousel, présentation
- zoom d’une image
- arrière-plan animé (en référençant un <canvas> ou une vidéo)
- des effets de superposition avancés (type iOS7)
- etc.
Cette fonction est TRES expérimentale. Utilisez là avec précaution.
Elle est actuellement compatible dans Firefox 4+, de manière préfixée : -moz-element()