Video wird geladen...
Video konnte nicht geladen werden
The movement and the header. ๐
23,010 Aufrufe โข vor 1 Jahr โขvia X (Twitter)
6 Kommentare
Peter Elswoodvor 1 Jahr
That touch from Naylor too - probably his best ever game for us
Alastair Taylor ๐งขvor 1 Jahr
Walking along, singing a song, walking in a Stewart Wonderland!! ๐โฝ๏ธ๐
Oliver Gardinervor 1 Jahr
Probably my favourite ever #itfc goal, sums Marcus Stewart up perfectly
robert wilsonvor 1 Jahr
What a day what a game many great memories
Tomvor 1 Jahr
Venus had a wand of a Left foot. Tremendous and underrated player
@LowieBluevor 1 Jahr
Sublime. Still give goose bumps.
![CSS Tip ๐ค You can create this header effect using position: sticky, clip-path, and custom properties ๐ฅ (Video ๐) header { position: sticky; top: var(--margin); } main { clip-path: inset(var(--header) 0 0 0);) } No mix-blend-mode or animations required โจ What's the trick then? ๐ง Duplicate the header element first. Then fix the positioning of one behind the content. header[aria-hidden] { position: fixed; top: 0; margin-top: var(--margin); } Clip the top of the content to reveal the fixed header and put a sticky-positioned header inside it that matches up in position and size โ๏ธ :root { --header: calc(var(--margin) + var(--font-size)); } main { clip-path: inset(var(--header) 0 0 0); } header { position: sticky; top: var(--margin); } Make your life easier with custom properties ๐ As the body scrolls, the fixed header gets covered by the clipped content and creates the effect โจ And because the sticky header is "stuck" it reveals itself as the content goes out of view ๐ This one's pretty cool. You can set the font color to whatever you want. At first glance, it looked like it was a mix-blend-mode thing. It doesn't have to be! Think about it and lean into z-indexing ๐ซถ Watch the video to get an idea of things with the exploding view ๐คฏ Any questions, etc. let me know! Will likely do a YouTube video on this one too! ๐ CodePen.IO link below! ๐](https://image.24vids.com/tw-1742391976517927321/ext_tw_video_thumb/1742387238879514624/pu/img/qhFKDDbPrYvBH8B6.jpg)
