Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

KaraBharat's profile picture

Bharat Kara

4,304 subscribers

44,475 Aufrufe • vor 3 Monaten •via X (Twitter)

#ff0066#CSS#WebAPIs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ä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 (
0:35

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,569 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!
0:29

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,763 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 👇
0:36

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,251 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 🎨
0:28

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,057 Aufrufe • vor 1 Jahr

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

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

Interesting AF

360,109 Aufrufe • vor 5 Monaten

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! 👇
0:44

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 2 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!
0:29

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,699,365 Aufrufe • vor 1 Jahr

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

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

PyroZoku

33,727 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.
0:21

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

154,480 Aufrufe • vor 1 Monat

Here's the Boa highlight reel. Just like Street Fighter II touch of death combos, but a lot more elaborate, lol. Complete highlight reel, video, and results of The Gilluminati #3 will be posted shortly.
2:14

Here's the Boa highlight reel. Just like Street Fighter II touch of death combos, but a lot more elaborate, lol. Complete highlight reel, video, and results of The Gilluminati #3 will be posted shortly.

riz0ne

18,931 Aufrufe • vor 2 Jahren

Future CSS Tip! ⚡️ You can combine CSS :has() & :user-valid/:user-invalid to power micro interactions 😍 No JavaScript. Watch for the little animations ✨ label { --color: var(--default); color: var(--color); border-color: var(--color); } .group:has(:user-valid) { --color: var(--valid); } .group:not(:focus-within):has(:user-invalid) { --color: var(--invalid); } These new pseudo-elements only fire once an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌 Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎 It's a nice little touch. But remember, don't rely on color to communicate things! CodePen.IO link below! 👇
0:32

Future CSS Tip! ⚡️ You can combine CSS :has() & :user-valid/:user-invalid to power micro interactions 😍 No JavaScript. Watch for the little animations ✨ label { --color: var(--default); color: var(--color); border-color: var(--color); } .group:has(:user-valid) { --color: var(--valid); } .group:not(:focus-within):has(:user-invalid) { --color: var(--invalid); } These new pseudo-elements only fire once an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌 Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎 It's a nice little touch. But remember, don't rely on color to communicate things! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

283,944 Aufrufe • vor 2 Jahren

YC F24's @AdittoCo lets you run search engine marketing without marketers. Aditto generates new search ads and custom landing pages daily and lets you launch them with the click of a button. Congrats on the launch, Will Jack and Keller Maloney!
1:21

YC F24's @AdittoCo lets you run search engine marketing without marketers. Aditto generates new search ads and custom landing pages daily and lets you launch them with the click of a button. Congrats on the launch, Will Jack and Keller Maloney!

Y Combinator

26,702 Aufrufe • vor 1 Jahr

Why search some of the Internet, when you can search all of the Internet? All the Internet was created to be extremely fast, easy to use, secure and have the most relevant search results. You can search the whole Internet with All the Internet.
0:30

Why search some of the Internet, when you can search all of the Internet? All the Internet was created to be extremely fast, easy to use, secure and have the most relevant search results. You can search the whole Internet with All the Internet.

All the Internet

4,902,925 Aufrufe • vor 2 Jahren

Google Search is now dominated by spam. So I made this Chrome extension that queries Reddit in the background, summarizes results and shows them in a sidebar next to google search results. It's like having your own Perplexity! Want it? Let me know!
1:38

Google Search is now dominated by spam. So I made this Chrome extension that queries Reddit in the background, summarizes results and shows them in a sidebar next to google search results. It's like having your own Perplexity! Want it? Let me know!

Paras Chopra

53,105 Aufrufe • vor 2 Jahren

Did a thing for Google the other day as they announced 2024 in search! Enjoy the highlight. Full video coming soon. Happy birthday to me 😌🎻
1:02

Did a thing for Google the other day as they announced 2024 in search! Enjoy the highlight. Full video coming soon. Happy birthday to me 😌🎻

𝕺𝖉𝖉𝖞𝖘𝖊𝖚𝖘

16,589 Aufrufe • vor 1 Jahr

📍A local SEO trick every pro should know: Use the UULE parameter to set a precise location for your search results. Adding a UULE parameter to your Google search query lets you see search results from a specific region without needing an extension or being physically there. Here’s how: 1️⃣ Generate a UULE for the location (Find a tool by googling “uule generator”) You will get a code that looks like this: &uule=w+CAIQICIQRWRtb250b24sIENhbmFkYQ 2️⃣ Now run any search in Google. 3️⃣ Look at the URL for your search and replace the last part of it with the UULE parameter. For example: google . com/search?q=sushi+restaurant &uule=w+CAIQICIQRWRtb250b24sIENhbmFkYQ How do you set your search location? #seo #localseo
0:34

📍A local SEO trick every pro should know: Use the UULE parameter to set a precise location for your search results. Adding a UULE parameter to your Google search query lets you see search results from a specific region without needing an extension or being physically there. Here’s how: 1️⃣ Generate a UULE for the location (Find a tool by googling “uule generator”) You will get a code that looks like this: &uule=w+CAIQICIQRWRtb250b24sIENhbmFkYQ 2️⃣ Now run any search in Google. 3️⃣ Look at the URL for your search and replace the last part of it with the UULE parameter. For example: google . com/search?q=sushi+restaurant &uule=w+CAIQICIQRWRtb250b24sIENhbmFkYQ How do you set your search location? #seo #localseo

Darren Shaw

28,511 Aufrufe • vor 2 Jahren

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨
2:19

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

Simon Vrachliotis

127,870 Aufrufe • vor 3 Jahren

🌟 Discover the ultimate Tailwind hack! I'm using an amazing Eslint plugin that streamlines your Tailwind CSS code for cleaner, more consistent results. Learn as you code, with intelligent shorthands and organized structure. ▶️ Link: #buildinpublic
0:49

🌟 Discover the ultimate Tailwind hack! I'm using an amazing Eslint plugin that streamlines your Tailwind CSS code for cleaner, more consistent results. Learn as you code, with intelligent shorthands and organized structure. ▶️ Link: #buildinpublic

Kristoffer Eriksson

37,437 Aufrufe • vor 2 Jahren

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇
0:57

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

413,657 Aufrufe • vor 2 Jahren

extra little details™ animate a CSS custom property to sync scrollbar-color with the active item ✨ html { scrollbar-color: oklch(65% 0.3 var(--p)) #0000; animation: sync; animation-timeline: --ul; animation-range: entry 50% exit 50% } @​keyframes sync { to { --p: 320; } }
0:33

extra little details™ animate a CSS custom property to sync scrollbar-color with the active item ✨ html { scrollbar-color: oklch(65% 0.3 var(--p)) #0000; animation: sync; animation-timeline: --ul; animation-range: entry 50% exit 50% } @​keyframes sync { to { --p: 320; } }

jhey ʕ•ᴥ•ʔ

61,107 Aufrufe • vor 1 Jahr