4 ms·

The blog briefly touches on it, but what does the data attribute 'data-text' enable? I'm kinda confused, I do some data visualization work professionally and I

The blog briefly touches on it, but what does the data attribute 'data-text' enable? I'm kinda confused, I do some data visualization work professionally and I understand how overlay patterns on SVGs work with the 'fill' property and IDs but lost with what the 'content' property is actually doing. Why is it necessary to replace the h1 text with identical text? What does 'content' enable? It seems unnecessary to replace the text with the same text right?

ericwood 5y ago
The `data-text` attribute is used to set the `content` of the `before` and `after` pseudo-elements[0], effectively creating two "clones" of the original text. These get their own text shadows and clipping animations applied, which creates the effect. You can grab attributes from elements using `attr`[1], which they're using alongside `content`. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after [1] https://developer.mozilla.org/en-US/docs/Web/CSS/attr https://developer.mozilla.org/en-US/docs/Web/CSS/attr()
- azemetre 5y ago
  Thanks for the explanation, I've never seen the attr() property before. A lot of similar codepens I've seen in the past, that do fancy stylings, are suddenly making sense. I always struggle to change my mental model about css to be more expressive, but now many wheels are starting to turn.
  - ericwood 5y ago
    Glad I could help! This is definitely weirder CSS territory but it unlocks some really wonderful techniques.
proexploit 5y ago
It's not replaced, it's in addition to the text. The HTML gives you one copy in black, then ::before & ::after are used to create copies in red and lime green. Partially showing those copies is what give you the glitch effect. `::before & ::after` are pseudo-elements and a very common way of creating independently styleable elements when doing CSS effects like this `content` is a property you can use to add text to those elements (he could have also just written `content: 'Artificial Truth';` if he preferred - having it as a data-attribute puts it right next to the "real" text and makes things easier to maintain) `attr(data-text)` sets the value of content to the value of an attribute of the HTML. data-* is a common convention for creating value that aren't used for display. It is not possible, to my knowledge, to access the text contained within the `<h1>` with CSS only, hence the above choices.
- azemetre 5y ago
  That makes sense! Your explanation on why using the data attribute can enable more advance trickery just clicked multiple things in my brain when remembering other fancy codepens.

ericwood 5y ago

The `data-text` attribute is used to set the `content` of the `before` and `after` pseudo-elements[0], effectively creating two "clones" of the original text. These get their own text shadows and clipping animations applied, which creates the effect. You can grab attributes from elements using `attr`[1], which they're using alongside `content`. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after [1] https://developer.mozilla.org/en-US/docs/Web/CSS/attr https://developer.mozilla.org/en-US/docs/Web/CSS/attr()

azemetre 5y ago
Thanks for the explanation, I've never seen the attr() property before. A lot of similar codepens I've seen in the past, that do fancy stylings, are suddenly making sense. I always struggle to change my mental model about css to be more expressive, but now many wheels are starting to turn.
- ericwood 5y ago
  Glad I could help! This is definitely weirder CSS territory but it unlocks some really wonderful techniques.

proexploit 5y ago

It's not replaced, it's in addition to the text. The HTML gives you one copy in black, then ::before & ::after are used to create copies in red and lime green. Partially showing those copies is what give you the glitch effect. `::before & ::after` are pseudo-elements and a very common way of creating independently styleable elements when doing CSS effects like this `content` is a property you can use to add text to those elements (he could have also just written `content: 'Artificial Truth';` if he preferred - having it as a data-attribute puts it right next to the "real" text and makes things easier to maintain) `attr(data-text)` sets the value of content to the value of an attribute of the HTML. data-* is a common convention for creating value that aren't used for display. It is not possible, to my knowledge, to access the text contained within the `<h1>` with CSS only, hence the above choices.

azemetre 5y ago
That makes sense! Your explanation on why using the data attribute can enable more advance trickery just clicked multiple things in my brain when remembering other fancy codepens.