Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

13 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

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 profil fotoğrafı
Safari Web Extensions1 yıl önce

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

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

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 ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

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 profil fotoğrafı
Deepak Yadav2 yıl önce

@CodePen omg! For a moment I thought why are you switching apps. ❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥♥️♥️

Wellington Alves 🖥 profil fotoğrafı
Wellington Alves 🖥2 yıl önce

@CodePen >>>

Devestor profil fotoğrafı
Devestor2 yıl önce

@CodePen Does not work in FF?

miraclemenikelechi profil fotoğrafı
miraclemenikelechi2 yıl önce

@CodePen just got a portfolio idea 💡

Tomas Jansson profil fotoğrafı
Tomas Jansson2 yıl önce

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

miraclemenikelechi profil fotoğrafı
miraclemenikelechi2 yıl önce

@CodePen can I implement this with react?

Helge Ahrens profil fotoğrafı
Helge Ahrens2 yıl önce

@CodePen @raunofreiberg

E.I.R.M🐐 profil fotoğrafı
E.I.R.M🐐2 yıl önce

@CodePen @Descargar_Bot

Niall Maher profil fotoğrafı
Niall Maher2 yıl önce

@CodePen Super slick

Benzer Videolar

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 görüntüleme • 6 ay önce

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

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

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

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

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

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

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

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

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

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

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

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

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

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,365 görüntüleme • 1 yıl önce

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

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

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

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

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 görüntüleme • 6 ay önce