Get ready for element()

^{hold on, the below only have support on Firefox but I will include screenshot of results.}

Let's take a look into an unknown property called element(). From the specification:

The element() function allows an author to use an element in the document as an image. As the referenced element changes appearance, the image changes as well. This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background.

Yes, we can transform any elemet (having any content) to an image. A lot of magic can be done with this.

Here is some intresting use cases I have found

Text masking

Combined with mask(), I can easily create "see through" effect with text without using SVG or JS. I can even animate it:

The main structure of the code is like below:

<!-- the mask (The element used as mask need to be hidden) -->
<div style="height:0;overflow:hidden">
 <div id="text">
   Your text or any content here
 </div>
</div>
<!-- -->
<div class="main">

</div>

/* we style the text like we want (font-family, font-size, etc)*/
#text {
  ....
}
/**/
.main {
  background:red; /* a random background, even a gradient can be used */
  mask:
    element(#text) center/contain no-repeat, /* element is used here like a background-image */
    linear-gradient(#fff 0 0); /* a bottom opaque layer */
   mask-composite:exclude;  /* we exclude the top layer from the bottom one to create the see through effect */
}

That's it! all the remaining is basic CSS.

Watermark

Another useful (or maybe not) idea to create the repeated text we always see above content either for some copyright stuff or anything else:

Infinite image Slider

We all stumble upon the common issue of how to re-place the first image at the end to have an infinite slider. This can be done easily with JS or by using some complex CSS tricks. Using element() it's now a trivial task:

^{I know, my screen recorder is very bad ...}

A timer or a clock

An idea of a timer with a reduced html code. The same code can be modified to create a digital clock

That's it for now but I am pretty sure there is a lot of funny ideas we can achieve with element()