Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

You can create the outer radius with CSS alone and no SVG 🤙 1. Create 2 elements 2x the radius size 2. Pin each side 3. Clip segment: clip-path: inset(50% 50% 0 0) 4. Radial gradient mask a pseudo 5. Border the other 6. Flip one side with scale:... show more

jhey ʕ•ᴥ•ʔ

146,347 subscribers

100,645 görüntüleme • 1 yıl önce •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 Yorum

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

Know some people don't like digging out the SVG and you could control it with CSS all the way like this 🤙 Love the little challenge of making the border. Did this for an article a few years back Anyways, here's the @CodePen 🚀

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

Some weirdness happening here where it doesn't quite line up on mobile device 🙃 Not sure why. The technique adds up. Not sure if I'll get round to fixing it up though 🥲

Alfonso Vargas profil fotoğrafı

Alfonso Vargas1 yıl önce

🐛

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

Hmm - Tried a couple of things. I must be missing something I've added here to make it do that. Seems to be fine until on a mobile device 🤔 Kinda annoying because the technique adds up

siddharth0x.eth profil fotoğrafı

siddharth0x.eth1 yıl önce

Waiting for your css course 🫢

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

Need to make it happen 💯

Jeffrey profil fotoğrafı

Jeffrey1 yıl önce

Ouu, thanks for sharing man!

Umair profil fotoğrafı

Umair1 yıl önce

Which editor you are using??

Sebastiano Guerriero profil fotoğrafı

Sebastiano Guerriero1 yıl önce

Super! 👌

Ricci profil fotoğrafı

Ricci1 yıl önce

👏👏

Benzer Videolar

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,739 görüntüleme • 2 yıl önce

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

283,498 görüntüleme • 2 yıl önce

CSS Trick! 🎃 You can create a wavey border for elements by layering masks 🎭 Used to create this ghost! 👻 Check the video for an exploding view 🫶 .👻 { --size: 20px; mask: radial-gradient(var(--size) at bottom, transparent 97%, #000), radial-gradient(var(--size) at 25% 50%, #000 97%, transparent); mask-repeat: repeat-x; mask-size: calc(2 * var(--size)) 100%, calc(4 * var(--size)) calc(2 * var(--size)); mask-position: 50% calc(100% - var(--size)), calc(50% - var(--size)) 99%; } That code looks kinda scary! 👻 This is one way you could do things. Check the video again or explode in the demo. One mask cuts out circles from the bottom of the element. The other adds overlaid circles back. And that overlap creates the wavey line you want for the ghost 🤙 Using a custom property you can write once and not have to touch again. Update the custom property to update the wave size as shown in the video 🎬 The last piece of the puzzle is animating the mask-position to create that animation @ keyframes flow { to { mask-position: calc(50% + (var(--size) * 4)) calc(100% - var(--size)), calc((50% - var(--size)) + (var(--size) * 4)) 99%; } } If you play with the demo, you may find some Easter eggs! Shake the ghost and double-tap it 😉 Happy Halloween! 🎃 CodePen.IO link below! 👇

CSS Trick! 🎃 You can create a wavey border for elements by layering masks 🎭 Used to create this ghost! 👻 Check the video for an exploding view 🫶 .👻 { --size: 20px; mask: radial-gradient(var(--size) at bottom, transparent 97%, #000), radial-gradient(var(--size) at 25% 50%, #000 97%, transparent); mask-repeat: repeat-x; mask-size: calc(2 * var(--size)) 100%, calc(4 * var(--size)) calc(2 * var(--size)); mask-position: 50% calc(100% - var(--size)), calc(50% - var(--size)) 99%; } That code looks kinda scary! 👻 This is one way you could do things. Check the video again or explode in the demo. One mask cuts out circles from the bottom of the element. The other adds overlaid circles back. And that overlap creates the wavey line you want for the ghost 🤙 Using a custom property you can write once and not have to touch again. Update the custom property to update the wave size as shown in the video 🎬 The last piece of the puzzle is animating the mask-position to create that animation @ keyframes flow { to { mask-position: calc(50% + (var(--size) * 4)) calc(100% - var(--size)), calc((50% - var(--size)) + (var(--size) * 4)) 99%; } } If you play with the demo, you may find some Easter eggs! Shake the ghost and double-tap it 😉 Happy Halloween! 🎃 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

181,442 görüntüleme • 2 yıl önce

$CSS Tip! 💫 You can create this responsive perspective warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀) .warp { container-type: size; perspective: 100px; transform-style: preserve-3d; resize: both; overflow: hidden; } Couple of tricks in this one 🤓 The main idea is to create a tunnel (an open-ended cube). On each side of the tunnel, use linear-gradient to create the grid lines ✨ .side { background: linear-gradient(#fff 0 1px, transparent 1px 5%) 50% 0 / 5% 5%, linear-gradient(90deg, #fff 0 1px, transparent 1px 5%) 50% 50% / 5% 5%; } To position each side, you rotate on the x-axis by 90deg. Each side would become invisible at this point. So you give the scene perspective 😉 .warp__side--top { width: 100cqi; height: 100cqmax; transform-origin: 50% 0%; transform: rotateX(-90deg); } The cool part here is that you want to make each side the same height. But the container is responsive. So you can use a container query and make sure each side is 100cqmax tall 🫶 Then the "beams". Each side contains "beams". They have different colors, sizes, and positions, and move at different speeds ⚡️ We can control that through scoped custom properties. .beam { width: 5%; position: absolute; top: 0; left: calc(var(--x, 0) * 5%); aspect-ratio: 1 / 2; background: linear-gradient( hsl(var(--hue) 80% 60%), transparent ); translate: 0 100%; animation: warp calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * -1s) infinite linear; } The magic here is though that a beam's animation is as basic as translating it from the top of the side to the bottom. And you can get that distance with a container query again 🔥 @keyframes warp { 0% { translate: -50% 100cqmax; } 100% { translate: -50% -100%; } } And that is pretty much it! A cool warp animation effect using 3D CSS and container queries ⚡️ If you have any questions, let me know ᵔᴥᵔ CodePen.IO link below! 👇$

CSS Tip! 💫 You can create this responsive perspective warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀) .warp { container-type: size; perspective: 100px; transform-style: preserve-3d; resize: both; overflow: hidden; } Couple of tricks in this one 🤓 The main idea is to create a tunnel (an open-ended cube). On each side of the tunnel, use linear-gradient to create the grid lines ✨ .side { background: linear-gradient(#fff 0 1px, transparent 1px 5%) 50% 0 / 5% 5%, linear-gradient(90deg, #fff 0 1px, transparent 1px 5%) 50% 50% / 5% 5%; } To position each side, you rotate on the x-axis by 90deg. Each side would become invisible at this point. So you give the scene perspective 😉 .warp__side--top { width: 100cqi; height: 100cqmax; transform-origin: 50% 0%; transform: rotateX(-90deg); } The cool part here is that you want to make each side the same height. But the container is responsive. So you can use a container query and make sure each side is 100cqmax tall 🫶 Then the "beams". Each side contains "beams". They have different colors, sizes, and positions, and move at different speeds ⚡️ We can control that through scoped custom properties. .beam { width: 5%; position: absolute; top: 0; left: calc(var(--x, 0) * 5%); aspect-ratio: 1 / 2; background: linear-gradient( hsl(var(--hue) 80% 60%), transparent ); translate: 0 100%; animation: warp calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * -1s) infinite linear; } The magic here is though that a beam's animation is as basic as translating it from the top of the side to the bottom. And you can get that distance with a container query again 🔥 @keyframes warp { 0% { translate: -50% 100cqmax; } 100% { translate: -50% -100%; } } And that is pretty much it! A cool warp animation effect using 3D CSS and container queries ⚡️ If you have any questions, let me know ᵔᴥᵔ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

187,474 görüntüleme • 2 yıl önce

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇

jhey ʕ•ᴥ•ʔ

79,932 görüntüleme • 1 yıl önce

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

532,865 görüntüleme • 2 yıl önce

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,112 görüntüleme • 2 yıl önce

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,809 görüntüleme • 2 yıl önce

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

jhey ʕ•ᴥ•ʔ

90,496 görüntüleme • 2 yıl önce

CSS Trick! ⭐️ You can create this sparkly backdrop with a single element using mask-composite whilst animating the mask-position 😷 .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } The trick is to layer the masks and then use the intersect value on the mask-composite ✨ Intersect works as it would in SVG by combining the masks and taking their intersection. The dots mask is a basic radial-gradient that is repeated across the element: mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px; The noise mask is a generated image of Perlin Noise (h/t to JohnPhamous for finding the site for that). That becomes the second mask: mask: url("noise.png") 50% 50% / 256px 256px; Once they are intersected. The last piece is to animate the mask-position as shown above 👆 Have a play with the demo and see what you think! CodePen.IO link below! 👇

CSS Trick! ⭐️ You can create this sparkly backdrop with a single element using mask-composite whilst animating the mask-position 😷 .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } The trick is to layer the masks and then use the intersect value on the mask-composite ✨ Intersect works as it would in SVG by combining the masks and taking their intersection. The dots mask is a basic radial-gradient that is repeated across the element: mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px; The noise mask is a generated image of Perlin Noise (h/t to JohnPhamous for finding the site for that). That becomes the second mask: mask: url("noise.png") 50% 50% / 256px 256px; Once they are intersected. The last piece is to animate the mask-position as shown above 👆 Have a play with the demo and see what you think! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

279,699 görüntüleme • 2 yıl önce

CSS multiplayer stack masking 🤙 – create a radial gradient circle mask that cuts out the previous disc – on :hover, transition mask of the sibling – let the background shine through the border space 🎉

CSS multiplayer stack masking 🤙 – create a radial gradient circle mask that cuts out the previous disc – on :hover, transition mask of the sibling – let the background shine through the border space 🎉

jhey ʕ•ᴥ•ʔ

122,373 görüntüleme • 1 yıl önce

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,331 görüntüleme • 2 yıl ö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! 👇

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

186,673 görüntüleme • 2 yıl önce

$A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }$

A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }

jhey ʕ•ᴥ•ʔ

154,664 görüntüleme • 1 yıl önce

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

646,445 görüntüleme • 2 yıl önce

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) */ --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) / --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

375,402 görüntüleme • 2 yıl önce

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.

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

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

426,307 görüntüleme • 2 yıl önce

CSS Tip! 🚥 You can create these trending expanding scroll indicators with scroll-driven animations and flex 🤙 .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @keyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators 😉 .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap 🤏 To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#fff, #fff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across 🤙 li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope 👀 .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size ⚡️ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @keyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations 😎 Sprinkle a little JavaScript to make them clickable and scroll the the right card ✨ const shift = (event) => { if (event.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(event.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations 🫶 CodePen.IO link below! 👇

CSS Tip! 🚥 You can create these trending expanding scroll indicators with scroll-driven animations and flex 🤙 .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @keyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators 😉 .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap 🤏 To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#fff, #fff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across 🤙 li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope 👀 .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size ⚡️ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @keyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations 😎 Sprinkle a little JavaScript to make them clickable and scroll the the right card ✨ const shift = (event) => { if (event.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(event.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations 🫶 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

575,316 görüntüleme • 2 yıl önce