Loading video...

Video Failed to Load

Go Home

Future CSS Tip! ๐Ÿคž You could create an image zoom/crop using the CSS object-view-box property ๐Ÿ” img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! ๐Ÿ‘‡

jh3yy's profile picture

jhey ส•โ€ขแดฅโ€ขส”

145,818 subscribers

167,991 views โ€ข 2 years ago โ€ขvia X (Twitter)

LIVE

Anya Rossiโ€ข Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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! ๐Ÿ‘‡
0:15

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 views โ€ข 3 years ago

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! ๐Ÿ‘‡
0:10

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 views โ€ข 3 years ago

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! ๐Ÿ‘‡
0:18

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 views โ€ข 3 years ago

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! ๐Ÿ‘‡
0:18

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 views โ€ข 2 years ago

Did you know? โœจ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code ๐Ÿ‘‡ (9/30) follow for 21 more tips ๐Ÿ””
0:13

Did you know? โœจ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code ๐Ÿ‘‡ (9/30) follow for 21 more tips ๐Ÿ””

Surjith S M โœช

57,984 views โ€ข 3 years ago

Little progressively enhanced CSS border reveal button using mask && @โ€‹property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }
0:19

Little progressively enhanced CSS border reveal button using mask && @โ€‹property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }

jhey ส•โ€ขแดฅโ€ขส”

111,340 views โ€ข 1 year ago

Responsive magnetic link effect using CSS anchor positioning ๐Ÿงฒ nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }
0:17

Responsive magnetic link effect using CSS anchor positioning ๐Ÿงฒ nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }

jhey ส•โ€ขแดฅโ€ขส”

396,107 views โ€ข 2 years ago

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; }}
0:11

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 views โ€ข 1 year ago

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) ); }
0:17

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,847 views โ€ข 1 year ago

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! ๐Ÿ‘‡
0:17

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,239 views โ€ข 2 years ago

Little skeumorphic button experiment using css box-shadow
0:15

Little skeumorphic button experiment using css box-shadow

Petr Knoll

362,777 views โ€ข 1 year ago

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! ๐Ÿ‘‡
0:18

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 views โ€ข 3 years ago

Reworked the box throwing so they keep momentum if they hit an object so you can now do trickshots
0:17

Reworked the box throwing so they keep momentum if they hit an object so you can now do trickshots

โ”‚โ–ˆโ•‘โ”‚โ•‘โ–Œโ•‘germfood

14,857 views โ€ข 1 year ago

Tutorial on how to add an embroidered effect on any object in illustrator with no plugin, using object > create mosaic + global edit
0:18

Tutorial on how to add an embroidered effect on any object in illustrator with no plugin, using object > create mosaic + global edit

After Effects Tricks!

70,859 views โ€ข 3 months ago

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 ๐Ÿ””
0:11

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 views โ€ข 3 years ago

Tailwind CSS Tip โœจ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo โ†“ (21/30) follow for 9 more tips ๐Ÿ””
0:12

Tailwind CSS Tip โœจ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo โ†“ (21/30) follow for 9 more tips ๐Ÿ””

Surjith S M โœช

203,341 views โ€ข 3 years ago

TailwindCSS Tip 1/5 Create Responsive Image Gallery easily with Tailwind CSS Check out steps ๐Ÿงต๐Ÿ‘‡
0:11

TailwindCSS Tip 1/5 Create Responsive Image Gallery easily with Tailwind CSS Check out steps ๐Ÿงต๐Ÿ‘‡

Poonam Soni

25,935 views โ€ข 3 years ago

What is the bright object that comes into view ~10 seconds into the video?
0:14

What is the bright object that comes into view ~10 seconds into the video?

Prof. Brian Keating

23,893 views โ€ข 5 months ago

Zelensky gave Pope Leo XIV an icon painted on a box from heavy artillery shells. The divine image is depicted on the object for murder weapons that bring death and destruction. Symbolism?
0:12

Zelensky gave Pope Leo XIV an icon painted on a box from heavy artillery shells. The divine image is depicted on the object for murder weapons that bring death and destruction. Symbolism?

Diana Panchenko ๐Ÿ‡บ๐Ÿ‡ฆ

80,800 views โ€ข 1 year ago