Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

lol used the wrong svg function. updated it so you can still set text color with css (and have transparent backgrounds)

markhurrell's profile picture

Mark Hurrell

2,055 subscribers

41,382 Aufrufe • vor 3 Monaten •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

8 Kommentare

Profilbild von Mark Hurrell
Mark Hurrellvor 3 Monaten

we still making typography like this?

Profilbild von Justin Murphy
Justin Murphyvor 3 Monaten

it’s beautiful

Profilbild von Mark Hurrell
Mark Hurrellvor 3 Monaten

💞

Profilbild von Pat Capulong
Pat Capulongvor 3 Monaten

fire

Profilbild von Mark Hurrell
Mark Hurrellvor 3 Monaten

thanks man

Profilbild von Shubhu
Shubhuvor 3 Monaten

this is nice!

Profilbild von noty
notyvor 3 Monaten

so sick

Profilbild von PIXEL CVLT
PIXEL CVLTvor 3 Monaten

Some how Neville Brody is still designing fonts. Nice one.

Ähnliche Videos

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.
0:34

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

15,196 Aufrufe • vor 7 Monaten

messin' with text using CSS + SVG 🤌
0:26

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 Aufrufe • vor 1 Jahr

I wanted to visualize color spaces so badly that the first version of Hueplot worked simply on divs. I used CSS as a 3D engine, and no canvas or SVG was used Still can't believe it worked, what a dumb idea 😅
0:21

I wanted to visualize color spaces so badly that the first version of Hueplot worked simply on divs. I used CSS as a 3D engine, and no canvas or SVG was used Still can't believe it worked, what a dumb idea 😅

Alexey Ardov

40,819 Aufrufe • vor 11 Monaten

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,850 Aufrufe • vor 3 Jahren

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇
0:32

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

348,604 Aufrufe • vor 3 Jahren

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇
0:28

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

jhey ʕ•ᴥ•ʔ

171,109 Aufrufe • vor 5 Monaten

Liquid Glass with CSS and SVG
0:36

Liquid Glass with CSS and SVG

Andreas Storm

71,648 Aufrufe • vor 1 Jahr

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇
0:39

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,913 Aufrufe • vor 1 Jahr

Qwen Image 2.1 Turbo + Pro is now on Venice. Generate native 2K images with transparent backgrounds, edit from up to 10 reference images, and render text you can actually read. Available anonymously.
0:25

Qwen Image 2.1 Turbo + Pro is now on Venice. Generate native 2K images with transparent backgrounds, edit from up to 10 reference images, and render text you can actually read. Available anonymously.

Venice

13,085 Aufrufe • vor 1 Monat

Using CSS mask-image you can truncate texts with a smooth fade effect. It looks clean and it's a great alternative to text ellipsis. .text-container { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient( to right, black 50%, transparent); mask-image: linear-gradient( to right, black 50%, transparent); } } If you found this one useful, follow for more! ❤️
0:21

Using CSS mask-image you can truncate texts with a smooth fade effect. It looks clean and it's a great alternative to text ellipsis. .text-container { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient( to right, black 50%, transparent); mask-image: linear-gradient( to right, black 50%, transparent); } } If you found this one useful, follow for more! ❤️

Ali

13,705 Aufrufe • vor 5 Monaten

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅
0:46

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

jhey ʕ•ᴥ•ʔ

100,316 Aufrufe • vor 2 Jahren

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:
0:40

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

Lichin Lin

25,219 Aufrufe • vor 1 Jahr

Have you ever needed the CSS paint-order property? Really handy when working with text-strokes!
1:24

Have you ever needed the CSS paint-order property? Really handy when working with text-strokes!

Wes Bos

56,747 Aufrufe • vor 2 Jahren

you can now edit all your ramps at once. (and export them as SVG, CSS or as Tailwind Config)
0:39

you can now edit all your ramps at once. (and export them as SVG, CSS or as Tailwind Config)

David Aerne

64,716 Aufrufe • vor 6 Monaten

Created this lil color generator over the weekend. There are so many algorithms to choose from for generating beautiful color palettes. Also, You can get the output as CSS, JSON, or Tailwind tokens. Check it out with sound on :)
0:43

Created this lil color generator over the weekend. There are so many algorithms to choose from for generating beautiful color palettes. Also, You can get the output as CSS, JSON, or Tailwind tokens. Check it out with sound on :)

vijay verma

182,707 Aufrufe • vor 1 Jahr

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇
1:10

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

409,026 Aufrufe • vor 3 Jahren

And here it is, fully painted in color, with watercolor backgrounds!
0:28

And here it is, fully painted in color, with watercolor backgrounds!

Valhalla Cats - Stars in the Trash OUT NOW! ✨🗑️🐈

14,237 Aufrufe • vor 16 Tagen

One UI 8.5 is a new function with five LUT styles built in, which can restore different video styles to Log video with one click, but this function is under development now, and there is something wrong with the color.
0:22

One UI 8.5 is a new function with five LUT styles built in, which can restore different video styles to Log video with one click, but this function is under development now, and there is something wrong with the color.

Ice Universe

43,458 Aufrufe • vor 1 Jahr