Loading video...

Video Failed to Load

Go Home

Future UI && CSS Tip! ๐Ÿ”ฎ You could use View Transitions to animate CSS grid position and create an OSX-style exposรฉ for a portfolio ๐Ÿ”ฅ It's a grid where things move based on state. Wrapped in a VT ๐Ÿค™ [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below ๐Ÿ‘‡

jh3yy's profile picture

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

141,794 subscribers

171,324 views โ€ข 2 years ago โ€ขvia X (Twitter)

LIVE

Anya Rossiโ€ข Live Now

Private livecam show

13 Comments

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

Here's that @CodePen link! ๐Ÿš€ You'll need to be in Chrome to see it as it uses the View Transitions API and the Popover API ๐Ÿค“

Safari Web Extensions's profile picture
Safari Web Extensions1 year ago

Discover the top Safari web extensions to boost productivity, enhance workflow, and customize your browsing experience on Mac, iOS, and iPadOS.

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

To be honest, I just wanted to see how you might be able to use the new APIs in combo to create this kind of UI/UX ๐Ÿ˜… Been exploring different types of portfolio design and essentially this is "Just Tabs". But, presented in a funky way. You could also do some magic with images.

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

For example, if you know what the other pages look like, you could show images as the link placeholders in "exposรฉ" mode. And to do that, you _could_ snapshot some images of your pages at build time or something with Puppeteer which would be fun ๐Ÿค” Then View Transition between!

Deepak Yadav's profile picture
Deepak Yadav2 years ago

@CodePen omg! For a moment I thought why are you switching apps. โค๏ธโ€๐Ÿ”ฅโค๏ธโ€๐Ÿ”ฅโค๏ธโ€๐Ÿ”ฅโค๏ธโ€๐Ÿ”ฅโค๏ธโ€๐Ÿ”ฅโค๏ธโ€๐Ÿ”ฅโ™ฅ๏ธโ™ฅ๏ธ

Wellington Alves ๐Ÿ–ฅ's profile picture
Wellington Alves ๐Ÿ–ฅ2 years ago

@CodePen >>>

Devestor's profile picture
Devestor2 years ago

@CodePen Does not work in FF?

miraclemenikelechi's profile picture
miraclemenikelechi2 years ago

@CodePen just got a portfolio idea ๐Ÿ’ก

Tomas Jansson's profile picture
Tomas Jansson2 years ago

@CodePen I think this would be a nice combo with @nextjs parallel routes.

miraclemenikelechi's profile picture
miraclemenikelechi2 years ago

@CodePen can I implement this with react?

Helge Ahrens's profile picture
Helge Ahrens2 years ago

@CodePen @raunofreiberg

E.I.R.M๐Ÿ's profile picture
E.I.R.M๐Ÿ2 years ago

@CodePen @Descargar_Bot

Niall Maher's profile picture
Niall Maher2 years ago

@CodePen Super slick

Related Videos

you can stack elements with css grid/subgrid by giving them the same grid position ๐Ÿง‘โ€๐Ÿณ this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown ๐Ÿ‘‡
0:27

you can stack elements with css grid/subgrid by giving them the same grid position ๐Ÿง‘โ€๐Ÿณ this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown ๐Ÿ‘‡

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

128,603 views โ€ข 6 months ago

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle
0:20

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

80,298 views โ€ข 2 years ago

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

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

Future CSS Tip! ๐Ÿ”ฎ You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator ๐Ÿคฏ .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! ๐Ÿ˜Ž CodePen.IO link below! ๐Ÿ‘‡
0:34

Future CSS Tip! ๐Ÿ”ฎ You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator ๐Ÿคฏ .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! ๐Ÿ˜Ž CodePen.IO link below! ๐Ÿ‘‡

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

129,244 views โ€ข 2 years ago

Future CSS Tip! ๐Ÿ”ฎ You could combine anchor positioning + :has to create this kinda iPad style follow effect โœจ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! ๐Ÿ˜Ž CodePen.IO link below! ๐Ÿ‘‡
0:21

Future CSS Tip! ๐Ÿ”ฎ You could combine anchor positioning + :has to create this kinda iPad style follow effect โœจ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! ๐Ÿ˜Ž CodePen.IO link below! ๐Ÿ‘‡

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

201,063 views โ€ข 3 years ago

CSS Tip! โœจ You can use background-attachment to fix backgrounds to the viewport ๐Ÿค™ card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight ๐Ÿ”ฆ CodePen.IO link below ๐Ÿ‘‡
0:20

CSS Tip! โœจ You can use background-attachment to fix backgrounds to the viewport ๐Ÿค™ card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight ๐Ÿ”ฆ CodePen.IO link below ๐Ÿ‘‡

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

490,132 views โ€ข 3 years ago

CSS Tip! โœจ You can make your component styles portable with container queries ๐Ÿ˜Ž Change a card layout based on size ๐Ÿ”ฅ Remove button text when it's small ๐Ÿค .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below ๐Ÿ‘‡
0:28

CSS Tip! โœจ You can make your component styles portable with container queries ๐Ÿ˜Ž Change a card layout based on size ๐Ÿ”ฅ Remove button text when it's small ๐Ÿค .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below ๐Ÿ‘‡

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

311,452 views โ€ข 2 years ago

Future CSS Tip! ๐Ÿ”ฎ Use scroll-driven animations to create those cool Apple-style text reveals ๐Ÿ”ฅ No JavaScript required ๐Ÿ‘€ Responsive too! ๐Ÿ™Œ .sentence { animation: highlight; animation-timeline: view(); animation-range: cover 40% cover 75%; } CodePen.IO link below! ๐Ÿ‘‡
0:49

Future CSS Tip! ๐Ÿ”ฎ Use scroll-driven animations to create those cool Apple-style text reveals ๐Ÿ”ฅ No JavaScript required ๐Ÿ‘€ Responsive too! ๐Ÿ™Œ .sentence { animation: highlight; animation-timeline: view(); animation-range: cover 40% cover 75%; } CodePen.IO link below! ๐Ÿ‘‡

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

347,881 views โ€ข 3 years ago

CSS Tip! ๐Ÿค™ You could use CSS :has() to power a context-aware custom cursor experience ๐Ÿ‘† :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! ๐Ÿ‘‡
0:33

CSS Tip! ๐Ÿค™ You could use CSS :has() to power a context-aware custom cursor experience ๐Ÿ‘† :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! ๐Ÿ‘‡

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

261,705 views โ€ข 3 years ago

Future CSS Tip! ๐Ÿ”ฎ Use scroll-driven animation to animate non-ancestor elements w/ timeline-scope ๐Ÿ‘€ main{ timeline-scope: --a; }๐Ÿ‘ˆ hoist! .a{ view-timeline: --a; } .i{ animation: indicate; animation-timeline: --a; } Peep the contact list indicators โœจ CodePen.IO link below! ๐Ÿ‘‡
0:35

Future CSS Tip! ๐Ÿ”ฎ Use scroll-driven animation to animate non-ancestor elements w/ timeline-scope ๐Ÿ‘€ main{ timeline-scope: --a; }๐Ÿ‘ˆ hoist! .a{ view-timeline: --a; } .i{ animation: indicate; animation-timeline: --a; } Peep the contact list indicators โœจ CodePen.IO link below! ๐Ÿ‘‡

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

56,805 views โ€ข 3 years ago

Quickly and easily create a CSS Grid layout for your website!
0:23

Quickly and easily create a CSS Grid layout for your website!

Marko Denic

211,198 views โ€ข 1 year ago

Future CSS Tip! ๐Ÿ”ฎ (This one's close ๐Ÿค) You can use "subgrid" to give child elements access to a parent's grid tracks ๐Ÿ‘€ This is great when you want to make sure content lines up ๐Ÿ™Œ Check those cards ๐Ÿ‘‡ article { grid-row: span 4; display: grid; grid-template-rows: subgrid; ๐Ÿ‘ˆ } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards ๐Ÿ™ Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off ๐Ÿค™ CodePen.IO link below! ๐Ÿ‘‡
0:28

Future CSS Tip! ๐Ÿ”ฎ (This one's close ๐Ÿค) You can use "subgrid" to give child elements access to a parent's grid tracks ๐Ÿ‘€ This is great when you want to make sure content lines up ๐Ÿ™Œ Check those cards ๐Ÿ‘‡ article { grid-row: span 4; display: grid; grid-template-rows: subgrid; ๐Ÿ‘ˆ } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards ๐Ÿ™ Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off ๐Ÿค™ CodePen.IO link below! ๐Ÿ‘‡

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

507,568 views โ€ข 2 years ago

Are you using position: absolute; to overlap elements? It's almost always better to Use CSS Grid instead!
0:50

Are you using position: absolute; to overlap elements? It's almost always better to Use CSS Grid instead!

Wes Bos

302,094 views โ€ข 1 year ago

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubรณw #JavaScriptGames

67,365 views โ€ข 1 year ago

DOM magnifier with CSS && SVG ๐Ÿ” .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#โ€‹magnifier); } Could use it in a [popover] ๐Ÿค™
0:27

DOM magnifier with CSS && SVG ๐Ÿ” .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#โ€‹magnifier); } Could use it in a [popover] ๐Ÿค™

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

104,078 views โ€ข 2 years ago

Future CSS Tip! ๐Ÿ”ฎ You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS ๐Ÿคฏ el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! ๐Ÿ‘‡
0:54

Future CSS Tip! ๐Ÿ”ฎ You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS ๐Ÿคฏ el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! ๐Ÿ‘‡

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

433,664 views โ€ข 2 years ago

CSS Trick ๐Ÿ–ผ๏ธ You could take the resize trick from last week and use it to create one of those sliding image components ๐Ÿ‘€ CSS only, JavaScript to enhance later ๐Ÿค“ Put an image in each panel and make them position: absolute. They can use a container query unit for their size ๐Ÿซถ img { position: absolute; width: 100cqi; // Make them the container width ๐Ÿค™ } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column ๐Ÿ˜Ž .panels{ display: grid; grid-template-columns: auto 1fr; ๐Ÿ‘ˆ } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; ๐Ÿ‘ˆ } Where does JavaScript come in? To progressively enhance the thing with keyboard controls โœจ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize ๐Ÿค” Anyways, CodePen.IO link below! ๐Ÿ‘‡
0:30

CSS Trick ๐Ÿ–ผ๏ธ You could take the resize trick from last week and use it to create one of those sliding image components ๐Ÿ‘€ CSS only, JavaScript to enhance later ๐Ÿค“ Put an image in each panel and make them position: absolute. They can use a container query unit for their size ๐Ÿซถ img { position: absolute; width: 100cqi; // Make them the container width ๐Ÿค™ } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column ๐Ÿ˜Ž .panels{ display: grid; grid-template-columns: auto 1fr; ๐Ÿ‘ˆ } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; ๐Ÿ‘ˆ } Where does JavaScript come in? To progressively enhance the thing with keyboard controls โœจ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize ๐Ÿค” Anyways, CodePen.IO link below! ๐Ÿ‘‡

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

111,404 views โ€ข 2 years ago

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

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

Future CSS && UI Tip! โšก๏ธ You could use View Transitions to create those word carousel-type effects ๐Ÿ˜ span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions ๐Ÿค™ Words and inspiration from work louderยฎ's home page. Had to see if this API could do it and it ended up raising a bug for the web platform! ๐Ÿ’ช CodePen.IO link below! ๐Ÿ‘‡
0:38

Future CSS && UI Tip! โšก๏ธ You could use View Transitions to create those word carousel-type effects ๐Ÿ˜ span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions ๐Ÿค™ Words and inspiration from work louderยฎ's home page. Had to see if this API could do it and it ended up raising a bug for the web platform! ๐Ÿ’ช CodePen.IO link below! ๐Ÿ‘‡

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

230,088 views โ€ข 2 years ago

Here is a patch to test CSS grid in React native.
0:25

Here is a patch to test CSS grid in React native.

nishan (o^โ–ฝ^o)

68,358 views โ€ข 6 months ago