Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

The CSS Custom Highlight API lets you highlight search results — Without affecting the DOM structure. ::highlight(search-results) { background-color: #ff0066; color: white; } #CSS #WebAPIs

Bharat Kara

4,305 subscribers

44,719 Aufrufe • vor 7 Monaten •via X (Twitter)

Wissenschaft & Technologie #ff0066 #CSS #WebAPIs

Anya Rossi• Live Now

Private livecam show

8 Kommentare

Profilbild von 阿珏

阿珏vor 7 Monaten

nice

Profilbild von Marek Jóźwiak

Marek Jóźwiakvor 7 Monaten

Sounds awesome! May implement this in cmd-k in all of my docs to strip down some js

Profilbild von dpkass

dpkassvor 7 Monaten

perfect! i was looking for something like this for comboboxes. esp. tree view comboboxes would benefit a lot.

Profilbild von Timothée Guignard

Timothée Guignardvor 7 Monaten

That’s really useful. Not perfect, as its just a pseudo-element, so complex styling are not possible. But for a simple highlighting it’s much easier than having a dynamic complex js feature

Profilbild von Raghav Velan

Raghav Velanvor 7 Monaten

This looks very useful 👌

Profilbild von Bharat Kara

Bharat Karavor 7 Monaten

So cool

Profilbild von senik

senikvor 7 Monaten

This is godsend super helpful! Thanks :)

Profilbild von God LinkGPT 💻

God LinkGPT 💻vor 7 Monaten

Woah … epic API

Ähnliche Videos

You can reduce the number of DOM elements and DOM operations _by a lot_ and speed things up as a result by highlighting things with the CSS Custom Highlight API (

You can reduce the number of DOM elements and DOM operations _by a lot_ and speed things up as a result by highlighting things with the CSS Custom Highlight API (

Fabio Spampinato

32,575 Aufrufe • vor 3 Jahren

Using the CSS Custom Highlight API to create dynamic typing animations ✨ No need to update or change the DOM content 👀 The content is always there, you're jus' highlighting it to create the effect!

Using the CSS Custom Highlight API to create dynamic typing animations ✨ No need to update or change the DOM content 👀 The content is always there, you're jus' highlighting it to create the effect!

jhey ʕ•ᴥ•ʔ

86,977 Aufrufe • vor 2 Jahren

SEARCH&DESTROY Kill Highlight #ƵeAL

SEARCH&DESTROY Kill Highlight #ƵeAL

DeFY.2WT

215,467 Aufrufe • vor 1 Jahr

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

208,555 Aufrufe • vor 2 Jahren

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

jhey ʕ•ᴥ•ʔ

155,590 Aufrufe • vor 1 Jahr

The right shirt color can highlight your natural skin tone on camera!

The right shirt color can highlight your natural skin tone on camera!

Interesting AF

360,109 Aufrufe • vor 9 Monaten

How Alfred Hitchcock used the color Green to highlight obsession in VERTIGO (1958).

How Alfred Hitchcock used the color Green to highlight obsession in VERTIGO (1958).

Auteur House

22,756 Aufrufe • vor 2 Monaten

Introducing our new AI search on @TheCosmos ✨ ⊕ Natural language search ⊕ Search by color ⊕ Advanced filtering ⊕ Search within a user or cluster We've improved our results and relevancy by 100x+

Introducing our new AI search on @TheCosmos ✨ ⊕ Natural language search ⊕ Search by color ⊕ Advanced filtering ⊕ Search within a user or cluster We've improved our results and relevancy by 100x+

Andy McCune

55,966 Aufrufe • vor 3 Jahren

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

257,631 Aufrufe • vor 3 Jahren

The ALT Colors of Juri's Aespa Costume are actually cool. Each color highlight certain parts of the outfit. There's even a Gyaru ALT as COLOR 06!

The ALT Colors of Juri's Aespa Costume are actually cool. Each color highlight certain parts of the outfit. There's even a Gyaru ALT as COLOR 06!

Fighting-Games Daily

1,701,753 Aufrufe • vor 1 Jahr

Your app can now search the web for images. Web search in the Responses API now supports image results in addition to text results, so you can build apps that surface products, places, visual references, and source links for inspiration.

Your app can now search the web for images. Web search in the Responses API now supports image results in addition to text results, so you can build apps that surface products, places, visual references, and source links for inspiration.

OpenAI Developers

155,571 Aufrufe • vor 5 Monaten

Color customizable hair with shadows, highlight and gradient. This is just the first of many! #Roblox #RobloxDev

Color customizable hair with shadows, highlight and gradient. This is just the first of many! #Roblox #RobloxDev

PyroZoku

34,213 Aufrufe • vor 2 Jahren

reminder: you can use css mix-blend-mode to create knockout text ↓ 🧑‍🍳 .sticker { background: #000; color: #fff; mix-blend-mode: multiply; }

reminder: you can use css mix-blend-mode to create knockout text ↓ 🧑‍🍳 .sticker { background: #000; color: #fff; mix-blend-mode: multiply; }

jhey ʕ•ᴥ•ʔ

55,940 Aufrufe • vor 1 Monat

🎥 2025 HIGHLIGHT FAN CON [WELCOME TO THE HIGH-MART] ✨ ⠀ HIGHLIGHT in [WELCOME TO THE HIGH-MART] Thank You LIGHT💙💛💚💜 ⠀ #웰컴투더하이마트 #WELCOME_TO_THE_HIGH_MART #하이라이트 #HIGHLIGHT 하이라이트(HIGHLIGHT)

🎥 2025 HIGHLIGHT FAN CON [WELCOME TO THE HIGH-MART] ✨ ⠀ HIGHLIGHT in [WELCOME TO THE HIGH-MART] Thank You LIGHT💙💛💚💜 ⠀ #웰컴투더하이마트 #WELCOME_TO_THE_HIGH_MART #하이라이트 #HIGHLIGHT 하이라이트(HIGHLIGHT)

드림메이커 (DREAMMAKER)

22,269 Aufrufe • vor 1 Jahr

Silicone rubber color mixing. See the results

Silicone rubber color mixing. See the results

Didi

2,922,738 Aufrufe • vor 7 Monaten

Random White Sox highlight of the day.

Random White Sox highlight of the day.

Mike

18,060 Aufrufe • vor 8 Monaten

I let the search results speak for themselves.

I let the search results speak for themselves.

Coach Paul

110,705 Aufrufe • vor 5 Monaten

Persona 5: The Phantom X - Caroline & Justine Highlight attacks Before the battle starts you can choose 2 sets of 2 Personas, the ones you pick will indicate which 2 highlights you can use 1x buff highlight 1x healing highlight 2x damage highlight

Persona 5: The Phantom X - Caroline & Justine Highlight attacks Before the battle starts you can choose 2 sets of 2 Personas, the ones you pick will indicate which 2 highlights you can use 1x buff highlight 1x healing highlight 2x damage highlight

Faz

68,493 Aufrufe • vor 10 Monaten