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

rainbow button w/ CSS animation-composition + hue interpolation 🌈 you can create a rainbow gradient as easy as: linear-gradient(in lch longer hue, red 0 0) animate the background-position but speed it up on :hover by using animation-composition: add 🤙

jhey ʕ•ᴥ•ʔ

146,453 subscribers

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

Eğitim Sanat Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

7 Yorum

Martin profil fotoğrafı

Martin1 yıl önce

are you done with your setup or not ? 😜

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

ha - it still needs tidying up 🫣🥲 also, funniest thing happened... got it set up and was furious that my thunderbolt dock wasn't working... 20 minutes later I found out it had become unplugged...

Anima profil fotoğrafı

Anima1 yıl önce

Transform your @figma designs into production-ready @shadcn components with Anima. Streamline your workflow, maintain design consistency, and generate Tailwind-based code effortlessly.✨

.dev profil fotoğrafı

.dev1 yıl önce

Very cool 🔥

Muyideen.Jsx ⚛️💧 profil fotoğrafı

Muyideen.Jsx ⚛️💧1 yıl önce

Easy peasy

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

needs a little update 🤏

@drip profil fotoğrafı

@drip1 yıl önce

very cool.

Benzer Videolar

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

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,444 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

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

126,491 görüntüleme • 1 yıl önce

CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇

CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

116,791 görüntüleme • 2 yıl önce

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

CSS Tip! ✨ You can create icon sprite animations using the steps() animation-timing function 🤙 You could use this to create little icon button animations, etc. 😎 But how do you do it? Like this 👇 button img { object-fit: cover; object-position: 0 0; } The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this: [aria-pressed=true] img { animation: play 0.5s steps(20) forwards; } @ keyframes play { to { object-position: 100% 0; } } We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite 🎉 Check out the video that breaks things down a little bit CodePen.IO link blow! 👇

CSS Tip! ✨ You can create icon sprite animations using the steps() animation-timing function 🤙 You could use this to create little icon button animations, etc. 😎 But how do you do it? Like this 👇 button img { object-fit: cover; object-position: 0 0; } The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this: [aria-pressed=true] img { animation: play 0.5s steps(20) forwards; } @ keyframes play { to { object-position: 100% 0; } } We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite 🎉 Check out the video that breaks things down a little bit CodePen.IO link blow! 👇

jhey ʕ•ᴥ•ʔ

562,736 görüntüleme • 3 yıl önce

Gemini 3 is the best model at creating animations. It's not even close. Here are the prompts I used for creating these UI animations. You don't need animations everywhere, but there are key places where it can enhance your design: the hero intro, hover interactions, slow content reveal, background effects and navigation transitions. Gemini 3 relies heavily on good prompting, ideally with image or code. Intro + animation on scroll: "Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. Add a clip animation to the background, column by column using clip-path." Buttons: "Add a 1px border beam animation around the pill-shaped button on hover. " Text animation: "Add a vertical text clip slide down animation letter by letter" Logos looping: "Add a marquis infinite loop slow animation to the logos using alpha mask" Content switching: "Animate the big card to rotate between 3 cards in a loop. Add prev/next arrows to switch between cards." Flashlight on hover: "Add a subtle flashlight effect on hover/mouse position to both background and border of the cards." Testimonials looping: "Make the cards animate marquis in an infinite loop with alpha mask slowly."

Gemini 3 is the best model at creating animations. It's not even close. Here are the prompts I used for creating these UI animations. You don't need animations everywhere, but there are key places where it can enhance your design: the hero intro, hover interactions, slow content reveal, background effects and navigation transitions. Gemini 3 relies heavily on good prompting, ideally with image or code. Intro + animation on scroll: "Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. Add a clip animation to the background, column by column using clip-path." Buttons: "Add a 1px border beam animation around the pill-shaped button on hover. " Text animation: "Add a vertical text clip slide down animation letter by letter" Logos looping: "Add a marquis infinite loop slow animation to the logos using alpha mask" Content switching: "Animate the big card to rotate between 3 cards in a loop. Add prev/next arrows to switch between cards." Flashlight on hover: "Add a subtle flashlight effect on hover/mouse position to both background and border of the cards." Testimonials looping: "Make the cards animate marquis in an infinite loop with alpha mask slowly."

Meng To

200,148 görüntüleme • 11 ay önce

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

210,485 görüntüleme • 3 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

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 👇

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,944 görüntüleme • 3 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 ʕ•ᴥ•ʔ

647,526 görüntüleme • 3 yıl önce

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target.style.setProperty('--x', x - bounds.left) target.style.setProperty('--y', y - bounds.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target.style.setProperty('--x', x - bounds.left) target.style.setProperty('--y', y - bounds.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

153,005 görüntüleme • 2 yıl önce

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

495,991 görüntüleme • 2 yıl önce

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! */ } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) * 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @keyframes show-cta { to { --show: 1; } } } Using @supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! / } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @keyframes show-cta { to { --show: 1; } } } Using @supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

133,020 görüntüleme • 2 yıl önce

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

CSS Trick 🍏 You can create that Apple-style blowout text effect with CSS scroll animations and fixed positioning ⚡️ .word { animation: blowout; animation-timeline: --section; } @keyframes blowout { 0%, 95% { background: transparent; } to { transform: translateZ(99vh); background: #000; } } The trick here is to fix the position of some things in your layout and then animate them based on their non-fixed containers ⭐️ The .word is position: fixed within a that has a height of 200vh section { view-timeline: --section; } section:first-of-type { height: 200vh; } Every section has a view-timeline: --section that creates a scoped ViewTimeline for each section's children 🤙 As that first section scrolls out of view, you increase its opacity and move it on the z-axis towards you. That gives it the impression of scaling up 🆙 .word { animation: blowout, fade-in; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; animation-range: exit-crossing 10% exit 0%; } You can use the exit-crossing range combined with the exit range to get a timing you like ✨ Definitely experiment with these ranges to see how they play. The timing function creates interesting effects too! At the same time as the text scales up, you need to fade in the video and the text that goes with it. Again, you can use the parent container's ViewTimeline --section p, video { animation: fade-in, fade-out; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; } p { animation-range: entry 10% entry 35%, exit 0% exit 25%; } video { animation-range: entry 0% entry 25%, exit 10% exit 35%; } The timings are slightly different here. Again, you can play with them to get something that feels right for you! @keyframes fade-in { to { opacity: 1; }} @keyframes fade-out { to { opacity: 0; }} Theoretically, you should be able to do something with animation-direction: reverse/alternate like yesterday's demo video { animation: fade 2 both linear alternate-reverse; } The trick with this effect is all about timing and creating containers that are bigger than the content and using them to drive the animations 🏎️ The scroll-driven signature is a bonus! ✍️ Perhaps a follow-up on that one 🤙 As always, any questions, requests, etc. Hit me up! With this demo, the GreenSock ScrollTrigger code is included where the CSS scroll-driven animations API is not supported 🙌 That means you could use this demo today! CodePen.IO link below! 👇

CSS Trick 🍏 You can create that Apple-style blowout text effect with CSS scroll animations and fixed positioning ⚡️ .word { animation: blowout; animation-timeline: --section; } @keyframes blowout { 0%, 95% { background: transparent; } to { transform: translateZ(99vh); background: #000; } } The trick here is to fix the position of some things in your layout and then animate them based on their non-fixed containers ⭐️ The .word is position: fixed within a that has a height of 200vh section { view-timeline: --section; } section:first-of-type { height: 200vh; } Every section has a view-timeline: --section that creates a scoped ViewTimeline for each section's children 🤙 As that first section scrolls out of view, you increase its opacity and move it on the z-axis towards you. That gives it the impression of scaling up 🆙 .word { animation: blowout, fade-in; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; animation-range: exit-crossing 10% exit 0%; } You can use the exit-crossing range combined with the exit range to get a timing you like ✨ Definitely experiment with these ranges to see how they play. The timing function creates interesting effects too! At the same time as the text scales up, you need to fade in the video and the text that goes with it. Again, you can use the parent container's ViewTimeline --section p, video { animation: fade-in, fade-out; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; } p { animation-range: entry 10% entry 35%, exit 0% exit 25%; } video { animation-range: entry 0% entry 25%, exit 10% exit 35%; } The timings are slightly different here. Again, you can play with them to get something that feels right for you! @keyframes fade-in { to { opacity: 1; }} @keyframes fade-out { to { opacity: 0; }} Theoretically, you should be able to do something with animation-direction: reverse/alternate like yesterday's demo video { animation: fade 2 both linear alternate-reverse; } The trick with this effect is all about timing and creating containers that are bigger than the content and using them to drive the animations 🏎️ The scroll-driven signature is a bonus! ✍️ Perhaps a follow-up on that one 🤙 As always, any questions, requests, etc. Hit me up! With this demo, the GreenSock ScrollTrigger code is included where the CSS scroll-driven animations API is not supported 🙌 That means you could use this demo today! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

270,144 görüntüleme • 2 yıl önce

$CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇$

CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

168,629 görüntüleme • 2 yıl önce