Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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,442 subscribers

507,628 Aufrufe • vor 2 Jahren •via X (Twitter)

Kunst Wissenschaft & Technologie Bildung

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

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 🤓

Profilbild von Mohamed Ramadan

Mohamed Ramadanvor 2 Jahren

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

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

P.s I know these cards are ugly 😅

Profilbild von Simon Ramsay 🚀 🧞‍♂️ 𝕩

Simon Ramsay 🚀 🧞‍♂️ 𝕩vor 2 Jahren

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

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

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 😅

Profilbild von Estebandido

Estebandidovor 2 Jahren

@Alejo_Gamboa

Profilbild von EREIAMJH

EREIAMJHvor 2 Jahren

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.

Profilbild von Pedro Filho

Pedro Filhovor 2 Jahren

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

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

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 😅

Profilbild von Morgan - Freelance frontend developer

Morgan - Freelance frontend developervor 2 Jahren

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

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

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?

Ähnliche Videos

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 5 Monaten

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,358 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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,159 Aufrufe • vor 2 Jahren

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,051 Aufrufe • vor 9 Monaten

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 Aufrufe • vor 2 Monaten

$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,836 Aufrufe • vor 2 Jahren

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,657 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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,177 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 2 Jahren

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

10,914 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 5 Monaten

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,456 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 8 Monaten

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,684 Aufrufe • vor 3 Monaten

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,932 Aufrufe • vor 16 Tagen

"[Trump] knows how dangerous [the mRNA technology] is. The facts are on the table...And...Bobby is going to do everything he can...[but] he's up against...the whole control grid...[and] mRNA technology is an integral part of implementing the control grid." Former Assistant Secretary of Housing and Urban Development, investment banker, and founder of the Solari Report Catherine Austin Fitts (The Solari Report | Catherine Austin Fitts) describes on a recent episode of the Children’s Health Defense series Financial Rebellion how President Trump knows how dangerous the mRNA injections are as "the facts are on the table." Fitts adds that while RFK Jr. will do "everything he can" to limit the damage done by the injections, "he's up against...the whole control grid" that is currently being ushered in and consists of things like digital IDs and controllable digital currencies. "If you look at the pressure that started in early 2020, building enormous momentum in the investment community for this technology and for the control grid, this is at the heart of building the Internet of bodies and using the AI to connect with humans and living things," Fitts says of the mRNA injections. "[T]hese guys have huge global investment all over the world since early 2020 betting on the digitization of everything in part using mRNA technology." Fitts goes on to say: "So this is far bigger and deeper. And I've seen them do a great deal to try and engineer modified hangouts to support mRNA technology. And we see the Trump administration, the president, two days, three days into the administration, right after the inauguration proposing Stargate with mRNA technology, selling it as if it's wonderful. He knows how dangerous it is. So the facts are on the table. And I think Bobby is going to do everything he can, but...you need to understand that this is a much broader, deeper [problem] and what he's up against is the whole control grid. In other words, mRNA technology is an integral part of implementing the control grid. It's not just a health thing. "We we can't put it on Bobby that he's gonna be the great man who rides in on the white horse and saves us. We need a concerted effort of millions of people off the couch saying, 'No way, Jose.' In every statehouse, across the government, getting the congressman [to act]...don't put this on one person. This has to be a hugely broad-based juggernaut."

"[Trump] knows how dangerous [the mRNA technology] is. The facts are on the table...And...Bobby is going to do everything he can...[but] he's up against...the whole control grid...[and] mRNA technology is an integral part of implementing the control grid." Former Assistant Secretary of Housing and Urban Development, investment banker, and founder of the Solari Report Catherine Austin Fitts (The Solari Report | Catherine Austin Fitts) describes on a recent episode of the Children’s Health Defense series Financial Rebellion how President Trump knows how dangerous the mRNA injections are as "the facts are on the table." Fitts adds that while RFK Jr. will do "everything he can" to limit the damage done by the injections, "he's up against...the whole control grid" that is currently being ushered in and consists of things like digital IDs and controllable digital currencies. "If you look at the pressure that started in early 2020, building enormous momentum in the investment community for this technology and for the control grid, this is at the heart of building the Internet of bodies and using the AI to connect with humans and living things," Fitts says of the mRNA injections. "[T]hese guys have huge global investment all over the world since early 2020 betting on the digitization of everything in part using mRNA technology." Fitts goes on to say: "So this is far bigger and deeper. And I've seen them do a great deal to try and engineer modified hangouts to support mRNA technology. And we see the Trump administration, the president, two days, three days into the administration, right after the inauguration proposing Stargate with mRNA technology, selling it as if it's wonderful. He knows how dangerous it is. So the facts are on the table. And I think Bobby is going to do everything he can, but...you need to understand that this is a much broader, deeper [problem] and what he's up against is the whole control grid. In other words, mRNA technology is an integral part of implementing the control grid. It's not just a health thing. "We we can't put it on Bobby that he's gonna be the great man who rides in on the white horse and saves us. We need a concerted effort of millions of people off the couch saying, 'No way, Jose.' In every statehouse, across the government, getting the congressman [to act]...don't put this on one person. This has to be a hugely broad-based juggernaut."

Sense Receptor

39,993 Aufrufe • vor 1 Jahr