Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

1,949 subscribers

39,408 görüntüleme • 1 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

8 Yorum

Mark Hurrell profil fotoğrafı
Mark Hurrell1 ay önce

we still making typography like this?

Justin Murphy profil fotoğrafı
Justin Murphy1 ay önce

it’s beautiful

Mark Hurrell profil fotoğrafı
Mark Hurrell1 ay önce

💞

Pat Capulong profil fotoğrafı
Pat Capulong1 ay önce

fire

Mark Hurrell profil fotoğrafı
Mark Hurrell1 ay önce

thanks man

Shubhu profil fotoğrafı
Shubhu1 ay önce

this is nice!

noty profil fotoğrafı
noty1 ay önce

so sick

PIXEL CVLT profil fotoğrafı
PIXEL CVLT1 ay önce

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

Benzer Videolar

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 görüntüleme • 5 ay önce

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 görüntüleme • 9 ay önce

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,745 görüntüleme • 2 yıl önce

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,480 görüntüleme • 3 yıl önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 1 yıl önce

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,690 görüntüleme • 1 yıl önce

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,431 görüntüleme • 1 yıl önce

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 ʕ•ᴥ•ʔ

408,898 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

Did you know about the CSS property 'text-wrap: balance'? It balances text distribution when wrapping, creating a harmonious layout. Now it's so easy to control the text 😎
0:20

Did you know about the CSS property 'text-wrap: balance'? It balances text distribution when wrapping, creating a harmonious layout. Now it's so easy to control the text 😎

Viki ✨

16,549 görüntüleme • 2 yıl önce

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h
0:35

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

67,623 görüntüleme • 4 ay önce

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇
1:23

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

190,822 görüntüleme • 2 yıl önce

🤌 Glassmorphism with Tailwind CSS 1️⃣ set a semi-transparent background 2️⃣ use `backdrop-filter: blur` 3️⃣ play with the bg opacity, blur level, border and shadow ✨
0:59

🤌 Glassmorphism with Tailwind CSS 1️⃣ set a semi-transparent background 2️⃣ use `backdrop-filter: blur` 3️⃣ play with the bg opacity, blur level, border and shadow ✨

Simon Vrachliotis

12,802 görüntüleme • 2 yıl önce

you can get the casetify phone case doyoung is using with casetify’s text custom case function 🩵
0:26

you can get the casetify phone case doyoung is using with casetify’s text custom case function 🩵

링

23,494 görüntüleme • 1 ay önce

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 ʕ•ᴥ•ʔ

284,028 görüntüleme • 3 yıl önce

Proxies, proxy generation, screenshots, non linear keyframes, multiline text editing, text outlining and write-out effects, AV1 and ProRes encoding, color mattes.. SO many new features in Blick 0.2.0 and you can get it now!
3:38

Proxies, proxy generation, screenshots, non linear keyframes, multiline text editing, text outlining and write-out effects, AV1 and ProRes encoding, color mattes.. SO many new features in Blick 0.2.0 and you can get it now!

Blick Video Editor

28,912 görüntüleme • 11 gün önce

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.
0:34

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

184,850 görüntüleme • 11 ay önce