Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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! 👇show more

jhey ʕ•ᴥ•ʔ

146,418 subscribers

507,698 просмотров • 3 лет назад •via X (Twitter)

Искусство Наука и технологии Образование

Anya Rossi• Live Now

Private livecam show

Комментарии: 11

Фото профиля jhey ▲🐻🎈

jhey ▲🐻🎈3 лет назад

Here's that @CodePen link! 🚀 Available in Firefox, Safari, and Chrome 117+ 🤙 Now go forth and show off your CSS Grid superpowers. Keen to see what people come up with. Found it tricky to find use cases when I presented this last year 🤓

Фото профиля Mohamed Ramadan

Mohamed Ramadan3 лет назад

That is really very interseting trick! But lets wait untill it become fully supported ⚠️

Фото профиля jhey ▲🐻🎈

jhey ▲🐻🎈3 лет назад

P.s I know these cards are ugly 😅

Фото профиля Simon Ramsay 🚀 🧞‍♂️ 𝕩

Simon Ramsay 🚀 🧞‍♂️ 𝕩3 лет назад

Seem so simple. Does it automatically work out the best heights for each row?

Фото профиля jhey ▲🐻🎈

jhey ▲🐻🎈3 лет назад

Yeah, the "magic" of implicit grid tracks at play there and working it out off the parent layout 😍 I had to present it at the back end of last year and was hunting around for ways to make use of it 😅

Фото профиля Estebandido

Estebandido3 лет назад

@Alejo_Gamboa

Фото профиля EREIAMJH

EREIAMJH3 лет назад

I *really* needed this a few months ago. Found subgrid, then cried when I saw the browser support. Ended up with Javascript workaround. Guess I'll revisit in a few months if it's imminent.

Фото профиля Pedro Filho

Pedro Filho3 лет назад

This is one of the few use cases that I really use grid

Фото профиля jhey ▲🐻🎈

jhey ▲🐻🎈3 лет назад

For cards? I find myself often jus' kinda fluidly switching between flex and grid as and when it feels right which is a weird thing to do I guess 😅

Фото профиля Morgan - Freelance frontend developer

Morgan - Freelance frontend developer3 лет назад

This is one of the use-cases for sub-grid Rachel Andrew wrote about yonks ago. It’s great.

Фото профиля jhey ▲🐻🎈

jhey ▲🐻🎈3 лет назад

It's nice to finally see it coming into all the browsers. There was a little inconsistency still when I presented it last year. Looks like that is getting ironed out 🙌 Could you think of any other interesting layout use cases?

Похожие видео

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! 👇

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 просмотров • 2 лет назад

Another weekend project: GridStore Jean Cavallera and I are building simple but useful dApps that make LUKSO more accessible and easier to use. This is GridStore, an “app store” for Grid templates. You can choose a template you like and, with a single transaction, upload it to your Universal Profile and use it as your Grid. This is made possible by LSP28 The Grid, where the configurations of your Grid are stored in a JSON file on IPFS. The value stored under your ⁩LSP28TheGrid⁨ data key stored on your Universal Profile points to your grid configuration JSON file. By adding the value of a grid template you like under the ⁩LSP28TheGriddata key, you can set immediately that template on your Grid and start customizing it, saving you time. If you have ideas for useful templates for brands, artists, influencers, or any other use case: set up the Grid on a Universal Profile, go to look up the profile, and send me the “Raw value” together with a short explanation of the Grid so it can be added to the store. Or add your own templates to the store by opening a PR: It would really help if we can create some high-quality templates that the whole community can use. You can check out the store here:

JordyDutch

14,060 просмотров • 6 месяцев назад

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

331,438 просмотров • 2 лет назад

1/ FLEX YOUR VIBIES 📸✨ New site update: You can now create a custom grid of all your vibies instantly! No more screenshotting, downloading, and manually designing your own grids. We got you 🫶 1. Head to the official GVC website (link in next post) 2. Click “My Collection” 3. Connect your wallet 4. Select “Create Grid Layout” 5. Customize your grid, export it, and share it on X! Choose how many vibies to display, adjust the layout order, and flex your perfect grid all in one spot 🎨🤙 Drop your grids below! 👀👇

1/ FLEX YOUR VIBIES 📸✨ New site update: You can now create a custom grid of all your vibies instantly! No more screenshotting, downloading, and manually designing your own grids. We got you 🫶 1. Head to the official GVC website (link in next post) 2. Click “My Collection” 3. Connect your wallet 4. Select “Create Grid Layout” 5. Customize your grid, export it, and share it on X! Choose how many vibies to display, adjust the layout order, and flex your perfect grid all in one spot 🎨🤙 Drop your grids below! 👀👇

Good Vibes Club 🤙

25,623 просмотров • 1 год назад

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

542,234 просмотров • 2 лет назад

I decided to make a grid material that is always aligned with the building grid... Then I thought, why not share it? 👇LINK IN COMMENTS👇 Fully customizable: -Disable fill color (outline only) -Disable padding color (fill only) -Roundness control -Color control Perfect for cheap grid floors and walls. You can combine it with other world-aligned materials like in this video. #UEFN

I decided to make a grid material that is always aligned with the building grid... Then I thought, why not share it? 👇LINK IN COMMENTS👇 Fully customizable: -Disable fill color (outline only) -Disable padding color (fill only) -Roundness control -Color control Perfect for cheap grid floors and walls. You can combine it with other world-aligned materials like in this video. #UEFN

OzyCreates

20,419 просмотров • 10 месяцев назад

I have created this OS, based on Alpine Linux, & it is stable enough to use (i made the file manager, etc) It's all in C, and as you can tell on file view, the terminal/shell runs simultaneously with the windows on a grid, theyre not box characters they're vectors on the grid

I have created this OS, based on Alpine Linux, & it is stable enough to use (i made the file manager, etc) It's all in C, and as you can tell on file view, the terminal/shell runs simultaneously with the windows on a grid, theyre not box characters they're vectors on the grid

Shimazu.S

12,519 просмотров • 3 месяцев назад

$Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇$

Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,875 просмотров • 2 лет назад

He Built a Better Way to Live Off-Grid (40 Acres) In recent years, more people have been moving out to the countryside to live a more self-sustaining life. But going fully off-grid isn’t easy, and often turns into a full-time job. Today we head out to Doc’s 40-acre setup—a kind of off-grid 2.0. He’s connected to the world, but with a flip of a switch and a close of the gate, he’s good on his own for up to two years. Join us as we show you around this sweet setup in rural Georgia.

He Built a Better Way to Live Off-Grid (40 Acres) In recent years, more people have been moving out to the countryside to live a more self-sustaining life. But going fully off-grid isn’t easy, and often turns into a full-time job. Today we head out to Doc’s 40-acre setup—a kind of off-grid 2.0. He’s connected to the world, but with a flip of a switch and a close of the gate, he’s good on his own for up to two years. Join us as we show you around this sweet setup in rural Georgia.

Peter Santenello

63,930 просмотров • 4 месяцев назад

I’d suggest she’s genuinely that stupid. Victoria has a single electricity grid, and you can’t pick and choose which electrons you receive based on how they’re generated. The proportion of solar and wind power in Victoria’s grid fluctuates, sometimes dropping to less than 1%. Claiming that anything connected to the grid is "100% renewable" is simply dishonest. But I don’t think this confused socialist destroying Victoria is deliberately lying. I’d suggest she’s an absolute nincompoop, so clueless that she’s unaware of the facts and is merely parroting lines from the propaganda department.

I’d suggest she’s genuinely that stupid. Victoria has a single electricity grid, and you can’t pick and choose which electrons you receive based on how they’re generated. The proportion of solar and wind power in Victoria’s grid fluctuates, sometimes dropping to less than 1%. Claiming that anything connected to the grid is "100% renewable" is simply dishonest. But I don’t think this confused socialist destroying Victoria is deliberately lying. I’d suggest she’s an absolute nincompoop, so clueless that she’s unaware of the facts and is merely parroting lines from the propaganda department.

Craig Kelly:🇦🇺Foundation for Economic Education

46,739 просмотров • 1 год назад

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.

virgil pana

44,560 просмотров • 1 год назад

For years, green groups have hailed electrification as a core climate solution. And now that we’re suddenly in the middle of historic load growth, they’re largely unprepared to meet the moment with big ideas. “We should all be embarrassed,” says Jane Flegal on this week's Open Circuit episode. For a long time, the climate community talked about aggressive electrification and the need to expand and modernize the grid. But now that future is arriving, the response has been fragmented or defensive. Some groups have leaned into affordability. Others are debating who should pay. And there are increasing calls for data center moratoriums. But there’s been very little thinking about how to plan and build at the scale this moment actually requires. "There's kind of like a rude awakening happening now, where everyone's like, ‘what was our plan to actually build?' she says. Jane has an idea. She proposes a new kind of grid infrastructure fund to bring hyperscalers, utilities, and policymakers into tighter coordination and to use demand as leverage to invest in the grid in a way that actually serves the public. Jigar Shah and I dug into the idea with her. We are mired in debates about grid-connected vs off-grid data centers, gas vs renewables, and who should pay for it all. But those debates are downstream of a bigger issue: we don’t have a system that can plan, coordinate, and build the grid for this era.

For years, green groups have hailed electrification as a core climate solution. And now that we’re suddenly in the middle of historic load growth, they’re largely unprepared to meet the moment with big ideas. “We should all be embarrassed,” says Jane Flegal on this week's Open Circuit episode. For a long time, the climate community talked about aggressive electrification and the need to expand and modernize the grid. But now that future is arriving, the response has been fragmented or defensive. Some groups have leaned into affordability. Others are debating who should pay. And there are increasing calls for data center moratoriums. But there’s been very little thinking about how to plan and build at the scale this moment actually requires. "There's kind of like a rude awakening happening now, where everyone's like, ‘what was our plan to actually build?' she says. Jane has an idea. She proposes a new kind of grid infrastructure fund to bring hyperscalers, utilities, and policymakers into tighter coordination and to use demand as leverage to invest in the grid in a way that actually serves the public. Jigar Shah and I dug into the idea with her. We are mired in debates about grid-connected vs off-grid data centers, gas vs renewables, and who should pay for it all. But those debates are downstream of a bigger issue: we don’t have a system that can plan, coordinate, and build the grid for this era.

Stephen Lacey

90,569 просмотров • 4 месяцев назад

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

70,730 просмотров • 2 лет назад

This GPT Image 2 prompt creates cinematic storyboard grids from your reference images while generating an original continuous sequence. You can see two different examples in the attached video. If you want a director-inspired cinematic tone, first use the separate “director language” prompt with a director name. It gives you abstract cinematic qualities without directly replicating copyrighted styles. If you don’t want that, you can simply remove that paragraph from the grid prompt. Then you can use the Seedance 2.0 prompt I shared to animate the storyboard grid into a cinematic sequence. You can find the prompts below.

This GPT Image 2 prompt creates cinematic storyboard grids from your reference images while generating an original continuous sequence. You can see two different examples in the attached video. If you want a director-inspired cinematic tone, first use the separate “director language” prompt with a director name. It gives you abstract cinematic qualities without directly replicating copyrighted styles. If you don’t want that, you can simply remove that paragraph from the grid prompt. Then you can use the Seedance 2.0 prompt I shared to animate the storyboard grid into a cinematic sequence. You can find the prompts below.

Kōda

11,283 просмотров • 2 месяцев назад

Britain has paid billions in subsidies to build thousands of turbines across its countryside. But when high pressure systems move in, wind collapses. During these calm spells, wind generation can fall to almost nothing, as low as 0.2% of the grid. When that happens, the grid scrambles. Coal is restarted, gas plants carry the bulk of the load and supply warnings are issued. This is the reality few in elected office seem to grasp. When the weather calms, which it regularly does, wind power disappears from the grid. Britain only stays online thanks to dispatchable energy systems picking up the slack. The country would be better off, both financially and in terms of energy security, if it simply ran off dispatchable power in the first place.

Britain has paid billions in subsidies to build thousands of turbines across its countryside. But when high pressure systems move in, wind collapses. During these calm spells, wind generation can fall to almost nothing, as low as 0.2% of the grid. When that happens, the grid scrambles. Coal is restarted, gas plants carry the bulk of the load and supply warnings are issued. This is the reality few in elected office seem to grasp. When the weather calms, which it regularly does, wind power disappears from the grid. Britain only stays online thanks to dispatchable energy systems picking up the slack. The country would be better off, both financially and in terms of energy security, if it simply ran off dispatchable power in the first place.

Electroverse

11,382 просмотров • 6 месяцев назад

PG&E and Tesla have just announced that the Cybertruck, Tesla Powershare Gateway and Tesla Universal Wall Connector have all been approved for participation in PG&E's residential Vehicle‑to‑Everything (V2X) program, marking a major milestone for bidirectional EV integration in California. This marks the first AC vehicle-to-grid application approved for customers in California, enabling vehicles to connect using much simpler equipment rather than specialized DC infrastructure. PG&E customers with Cybertrucks will now be able to use their vehicle to power their home in an outage and earn money by selling power back to the electric grid during grid events. "Electric vehicles can do more than move people—they can help power homes and support the grid," said Jason Glickman, Executive VP of Strategy and Growth, PG&E. "By welcoming Tesla into our residential V2X program, we're expanding customer choice while making California's grid more flexible, resilient, and affordable. Powershare Grid Support enables Tesla vehicles to strengthen our electricity system, while earning money for EV owners." More info below:

PG&E and Tesla have just announced that the Cybertruck, Tesla Powershare Gateway and Tesla Universal Wall Connector have all been approved for participation in PG&E's residential Vehicle‑to‑Everything (V2X) program, marking a major milestone for bidirectional EV integration in California. This marks the first AC vehicle-to-grid application approved for customers in California, enabling vehicles to connect using much simpler equipment rather than specialized DC infrastructure. PG&E customers with Cybertrucks will now be able to use their vehicle to power their home in an outage and earn money by selling power back to the electric grid during grid events. "Electric vehicles can do more than move people—they can help power homes and support the grid," said Jason Glickman, Executive VP of Strategy and Growth, PG&E. "By welcoming Tesla into our residential V2X program, we're expanding customer choice while making California's grid more flexible, resilient, and affordable. Powershare Grid Support enables Tesla vehicles to strengthen our electricity system, while earning money for EV owners." More info below:

Sawyer Merritt

304,679 просмотров • 3 месяцев назад

THEY TRIED TO ERASE THIS FROM EVERY RECORD… There’s a hidden grid inside your body that holds your original divine blueprint. It’s not a metaphor. It’s not fantasy. It’s called the Kathara Grid — and it runs on base-12 Eternal Life Codes. Not the decaying bi-wave systems you’ve been conditioned to believe in. This grid is the source code of your healing. It holds the memory of who you were before the distortions. Before the pain. Before the loops. Before the separation. Inside this scalar map is your ability to: Heal chronic dis-ease Remember your past + future lives Activate dormant DNA Open organic time travel portals Reclaim your divine memory stream The truth? You were never broken. You were only disconnected. And now… you’re remembering. Not through searching outside — but by turning inward. You are the key. You are the eternal. And your Kathara Grid is waking up. ✨🙌🏾💫 © Samuel Lee

THEY TRIED TO ERASE THIS FROM EVERY RECORD… There’s a hidden grid inside your body that holds your original divine blueprint. It’s not a metaphor. It’s not fantasy. It’s called the Kathara Grid — and it runs on base-12 Eternal Life Codes. Not the decaying bi-wave systems you’ve been conditioned to believe in. This grid is the source code of your healing. It holds the memory of who you were before the distortions. Before the pain. Before the loops. Before the separation. Inside this scalar map is your ability to: Heal chronic dis-ease Remember your past + future lives Activate dormant DNA Open organic time travel portals Reclaim your divine memory stream The truth? You were never broken. You were only disconnected. And now… you’re remembering. Not through searching outside — but by turning inward. You are the key. You are the eternal. And your Kathara Grid is waking up. ✨🙌🏾💫 © Samuel Lee

🧬Maxpein🧬

27,571 просмотров • 9 месяцев назад

Meet Lovable Academy: your new home for learning how to build with Lovable. Inside, you'll find everything from a prompting guide and video lessons to an idea grid based on different user personas with pre-written prompts, to a remixable template catalog and more reading on advanced topics. This is only the beginning – expect significant updates and new content in the weeks to come. Link below:

Meet Lovable Academy: your new home for learning how to build with Lovable. Inside, you'll find everything from a prompting guide and video lessons to an idea grid based on different user personas with pre-written prompts, to a remixable template catalog and more reading on advanced topics. This is only the beginning – expect significant updates and new content in the weeks to come. Link below:

Tyler Bruno

18,770 просмотров • 4 месяцев назад

MAMDANI WANTS YOU SWEATING AT YOUR DESK, IS THIS A JOKE?! New York City is baking in a heat wave and the mayor's big solution is to tell everyone to crank their thermostats up to 78 degrees. Yeah, that's not gonna work! He said it himself. "Please set your thermostats to 78 degrees to alleviate the stress on our power grid." That is not a safety plan. That is asking New Yorkers to suffer so the grid does not have to. He even dressed it up as a workplace safety issue, saying every worker deserves a safe workplace, then defining safe as nearly 80 degrees indoors during a heat wave. Try telling a line cook or a warehouse worker that 78 degrees is the safe threshold. See how that lands. This is what happens when ideology meets infrastructure. The grid is creaking so the answer is not to fix the grid. The answer is to lower everyone's standard of living and call it civic duty. New Yorkers did not sign up to be human thermostats for a mayor who cannot keep the lights on.

MAMDANI WANTS YOU SWEATING AT YOUR DESK, IS THIS A JOKE?! New York City is baking in a heat wave and the mayor's big solution is to tell everyone to crank their thermostats up to 78 degrees. Yeah, that's not gonna work! He said it himself. "Please set your thermostats to 78 degrees to alleviate the stress on our power grid." That is not a safety plan. That is asking New Yorkers to suffer so the grid does not have to. He even dressed it up as a workplace safety issue, saying every worker deserves a safe workplace, then defining safe as nearly 80 degrees indoors during a heat wave. Try telling a line cook or a warehouse worker that 78 degrees is the safe threshold. See how that lands. This is what happens when ideology meets infrastructure. The grid is creaking so the answer is not to fix the grid. The answer is to lower everyone's standard of living and call it civic duty. New Yorkers did not sign up to be human thermostats for a mayor who cannot keep the lights on.

Bill Mitchell

18,953 просмотров • 1 месяц назад

My job is to communicate the facts, and that's what I do. 20 years ago, even 10 years ago, data centers in Virginia, where they started, used a lot of water and it caused prices to go up when it was attached to the grid. Well, you cannot attach the grid anymore. The Utah project contemplates bringing new power to Utah. All of the power will be created from nat gas pipeline that runs through there, and will give back to the community. It will generate enough power that some percentage of it will go back to the grid. If you want China to overtake our ability to develop cutting edge technology, you stop data centers. So that's the cause and effect of it all. If you want China to lead, take over our, let's call it democracy, our free speech, and the way we live with technology, just stop building data centers. It's that simple.

My job is to communicate the facts, and that's what I do. 20 years ago, even 10 years ago, data centers in Virginia, where they started, used a lot of water and it caused prices to go up when it was attached to the grid. Well, you cannot attach the grid anymore. The Utah project contemplates bringing new power to Utah. All of the power will be created from nat gas pipeline that runs through there, and will give back to the community. It will generate enough power that some percentage of it will go back to the grid. If you want China to overtake our ability to develop cutting edge technology, you stop data centers. So that's the cause and effect of it all. If you want China to lead, take over our, let's call it democracy, our free speech, and the way we live with technology, just stop building data centers. It's that simple.

Kevin O'Leary aka Mr. Wonderful

22,759 просмотров • 3 месяцев назад