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

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

145,705 subscribers

182,528 görüntüleme • 3 yıl önce •via X (Twitter)

Bilim & Teknoloji Sanat Eğitim

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

jhey ʕ•ᴥ•ʔ

280,934 görüntüleme • 1 yıl önce

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @keyframes show { to { --s: 1; }}

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @keyframes show { to { --s: 1; }}

jhey ʕ•ᴥ•ʔ

32,727 görüntüleme • 1 yıl önce

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }

jhey ʕ•ᴥ•ʔ

120,836 görüntüleme • 1 yıl önce

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

517,577 görüntüleme • 2 yıl önce

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

107,091 görüntüleme • 3 yıl önce

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,185 görüntüleme • 3 yıl önce

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,561 görüntüleme • 3 yıl önce

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

Adam Argyle

22,444 görüntüleme • 1 yıl önce

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

267,557 görüntüleme • 3 yıl önce

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,527 görüntüleme • 1 yıl önce

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,919 görüntüleme • 2 yıl önce

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 görüntüleme • 1 yıl önce

Fine. Real-life CSS lesson 🧑‍🍳🍕 .topping { translate: calc(var(--x, 0) * 1cqi) calc(var(--y, 0) * 1cqi); transition: translate 0.2s; } [id=slide]:checked ~ .scene .topping { --x: 100; } cc David East

Fine. Real-life CSS lesson 🧑‍🍳🍕 .topping { translate: calc(var(--x, 0) * 1cqi) calc(var(--y, 0) * 1cqi); transition: translate 0.2s; } [id=slide]:checked ~ .scene .topping { --x: 100; } cc David East

jhey ʕ•ᴥ•ʔ

154,620 görüntüleme • 2 yıl önce

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }

jhey ʕ•ᴥ•ʔ

225,181 görüntüleme • 1 yıl önce

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner

CodePen.IO

21,647 görüntüleme • 9 ay önce

I’m creating a playground of CSS easing functions 🌟 Each animation will include an SVG preview, along with a ready-to-copy Tailwind CSS class. Launching next week 🔥

I’m creating a playground of CSS easing functions 🌟 Each animation will include an SVG preview, along with a ready-to-copy Tailwind CSS class. Launching next week 🔥

Pasquale Vitiello

35,479 görüntüleme • 1 yıl önce

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 görüntüleme • 3 yıl önce

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,796 görüntüleme • 2 ay önce

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;

Solarin

20,995 görüntüleme • 1 yıl önce