Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Design Engineering Tip: Separate the object from its shadow. When an element lifts away from a surface, the shadow doesn't always need to move with it. Keeping the shadow grounded and fading it based on distance can create a stronger sense of depth and physicality. Used carefully, this can... make interfaces feel more tangible and less like layers floating on a screen. It's not something I'd apply everywhere, but for moments that need extra emphasis, it can be surprisingly effective. js const card = document.querySelector(".notification"); const shadow = document.querySelector(".shadow"); card.animate( [ { transform: "translateY(0)" }, { transform: "translateY(-160px)" }, ], { duration: 900, easing: "cubic-bezier(.64,0,.78,0)" } ); shadow.animate( [ { opacity: 0.5, transform: "scaleX(1)" }, { opacity: 0, transform: "scaleX(.35)" }, ], { duration: 700, easing: "ease-out" } );show more

Gabriel

6,172 subscribers

63,826 Aufrufe • vor 6 Tagen •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

yo! been cooking a new game ✨ it's called Shadow Trick and it's a cute platformer where you can turn into a shadow. Wishlist it on Steam 👇

yo! been cooking a new game ✨ it's called Shadow Trick and it's a cute platformer where you can turn into a shadow. Wishlist it on Steam 👇

Neutronized 🐸💨

49,421 Aufrufe • vor 2 Jahren

<ShadowAlpha /> was added to drei by Faraz add it to any mesh and its shadow will now support opacity, transmission and shadowAlpha. it's using bayer dithering, but you can pair it with <SoftShadows /> to cover it up.

<ShadowAlpha /> was added to drei by Faraz add it to any mesh and its shadow will now support opacity, transmission and shadowAlpha. it's using bayer dithering, but you can pair it with <SoftShadows /> to cover it up.

☄︎

19,432 Aufrufe • vor 2 Jahren

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳

jhey ʕ•ᴥ•ʔ

54,852 Aufrufe • vor 10 Monaten

Ever played Shadow Hearts on PlayStation 2? 👻 The story is set in 1913 and follows Yuri Hyuga, a human with the ability to capture and transform into monsters. Actions in battle rely on a timing-based system dubbed the Judgement Ring.

Ever played Shadow Hearts on PlayStation 2? 👻 The story is set in 1913 and follows Yuri Hyuga, a human with the ability to capture and transform into monsters. Actions in battle rely on a timing-based system dubbed the Judgement Ring.

FantasyAnime

52,409 Aufrufe • vor 9 Monaten

A Super update is coming to Minecraft! Gather the Chaos Emeralds, defeat Dr. Eggman, and transform into Super Sonic and Super Shadow in the newest Sonic Add-On Update TODAY!

A Super update is coming to Minecraft! Gather the Chaos Emeralds, defeat Dr. Eggman, and transform into Super Sonic and Super Shadow in the newest Sonic Add-On Update TODAY!

Sonic the Hedgehog

779,943 Aufrufe • vor 10 Monaten

I’m happy Shadow can finally start a healthy grieving process now. This scene wasn’t as simple as Shadow saying goodbye. It’s Shadow being able to finally let it out. It’s Shadow being able to express his grief after a lifetime of that being an impossibility.

I’m happy Shadow can finally start a healthy grieving process now. This scene wasn’t as simple as Shadow saying goodbye. It’s Shadow being able to finally let it out. It’s Shadow being able to express his grief after a lifetime of that being an impossibility.

Caramel Smoothie

108,507 Aufrufe • vor 1 Jahr

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

jhey ʕ•ᴥ•ʔ

257,886 Aufrufe • vor 1 Jahr

In honor of April 1st, here is my "Sussy Shadow" Asset!😳 You can pin this shadow on your model for a funny look! Usage: No need to credit but i would appreciate it! The asset is on my VGen~ #VTuberAsset #VTuber素材

Sensitive content

In honor of April 1st, here is my "Sussy Shadow" Asset!😳 You can pin this shadow on your model for a funny look! Usage: No need to credit but i would appreciate it! The asset is on my VGen~ #VTuberAsset #VTuber素材

nei✨🪱【lucid ☁️】💘🔜OFFKAI | lobita💙🐺

132,552 Aufrufe • vor 2 Monaten

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,420 Aufrufe • vor 2 Jahren

Can I get your guys' feedback on this? I'm working on creating a fake shadow effect under Lina, so look underneath her during this clip. It's made up of two parts, a circular shadow and a light, transparent and rotating ring. Just need to know if its obnoxious lol

Can I get your guys' feedback on this? I'm working on creating a fake shadow effect under Lina, so look underneath her during this clip. It's made up of two parts, a circular shadow and a light, transparent and rotating ring. Just need to know if its obnoxious lol

CornflowerBlue

28,605 Aufrufe • vor 1 Monat

Great Britain was once a mighty empire, but today it’s a shadow of its former self. Can it be saved? Maybe. But for now, Australia should distance itself and focus on strengthening our alliance with President Trump and the United States. Support my work and help me bring back common sense Join The Movement -

Great Britain was once a mighty empire, but today it’s a shadow of its former self. Can it be saved? Maybe. But for now, Australia should distance itself and focus on strengthening our alliance with President Trump and the United States. Support my work and help me bring back common sense Join The Movement -

Senator Babet

60,821 Aufrufe • vor 1 Jahr

“This is a shadow on the Mountain from that planes trail - I’ve never seen that before it’s insane” It keeps on happening an nobody can explain this new Phenomena

“This is a shadow on the Mountain from that planes trail - I’ve never seen that before it’s insane” It keeps on happening an nobody can explain this new Phenomena

Concerned Citizen

291,787 Aufrufe • vor 7 Monaten

The shadow of the story can now be told. Learn the history of the Realm of Shadow, the unseen land that will be revealed on June 21, 2024. Pre-order #ELDENRING Shadow of the Erdtree:

The shadow of the story can now be told. Learn the history of the Realm of Shadow, the unseen land that will be revealed on June 21, 2024. Pre-order #ELDENRING Shadow of the Erdtree:

ELDEN RING

9,251,397 Aufrufe • vor 2 Jahren

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

152,818 Aufrufe • vor 2 Jahren

'Shadow the Hedgehog: Reloaded' (Shadow Mod) by LimblessVector & dreamsyntax An improvement mod of Shadow the Hedgehog designed to make the game less tedious, increase challenge, fix bugs and oversights,

'Shadow the Hedgehog: Reloaded' (Shadow Mod) by LimblessVector & dreamsyntax An improvement mod of Shadow the Hedgehog designed to make the game less tedious, increase challenge, fix bugs and oversights,

Sonic The Hedgeblog

111,303 Aufrufe • vor 1 Jahr

Every Shadow garden member wants to go on a date with Shadow, also Alpha didnt need to do Nu like that

Every Shadow garden member wants to go on a date with Shadow, also Alpha didnt need to do Nu like that

Kaneki

105,369 Aufrufe • vor 11 Monaten

Object shadow. Design tip#453

Object shadow. Design tip#453

DAILY DESIGN POSTS©

13,831 Aufrufe • vor 3 Monaten

Thinking about what a missed opportunity it was for Shadow Generations Final Boss to not use the scrapped Final Boss Theme from Shadow 05

Thinking about what a missed opportunity it was for Shadow Generations Final Boss to not use the scrapped Final Boss Theme from Shadow 05

SplashDash

75,717 Aufrufe • vor 1 Jahr

Did a Sonadow comic dub this time the lovely artwork is from E i d Eid 🫀 ! 💖 Thought it was a short and sweet one to dub quick. Sonic and Shadow are in a relationship but Shadow seems to be still stuck in thought. 👀 💙🖤 #SonicTheHedgehog #sonadow #Sonic #Shadow

Did a Sonadow comic dub this time the lovely artwork is from E i d Eid 🫀 ! 💖 Thought it was a short and sweet one to dub quick. Sonic and Shadow are in a relationship but Shadow seems to be still stuck in thought. 👀 💙🖤 #SonicTheHedgehog #sonadow #Sonic #Shadow

FRAIL✨

27,329 Aufrufe • vor 2 Jahren