正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Use Copilot to kickstart your CSS layout. Ctrl + i toggles the inline chat.

Visual Studio Code

807,708 subscribers

65,757 次观看 • 2 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

8 条评论

Visual Studio Code 的头像

Visual Studio Code2 年前

Cmd + i on Mac

Hitesh Choudhary 的头像

Hitesh Choudhary2 年前

I will be showing if off in my next youtube video 😁

Open Dev Log 的头像

Open Dev Log2 年前

Love copilot!

g! 的头像

g!2 年前

@oinotna_luiz @CaboRomansini

Дмитро *не виспався* 的头像

Дмитро *не виспався*2 年前

Holly cow!

ycsg 的头像

ycsg2 年前

如何实现分屏？预览

Jenan’s Husband 的头像

Jenan’s Husband2 年前

I just took a screenshot ...thanks

Sudaraka Senevirathne 的头像

Sudaraka Senevirathne2 年前

a gem for full-stacked backend devs 🤣

相关视频

I feel like the GitHub Copilot team created the Ctrl + s shortcut just for me!

I feel like the GitHub Copilot team created the Ctrl + s shortcut just for me!

Gwyneth Peña-Siguenza

20,962 次观看 • 29 天前

3 lines of CSS to make your tooltips/menus stay in view 🤯 (Check it! 👇) [popover] { top: anchor(top); left: anchor(right); position-try-options: flip-block, flip-inline; } Responds to scroll, layout change, etc. Watch the nested menu 👇 Anchor Positioning is coming 🚀

3 lines of CSS to make your tooltips/menus stay in view 🤯 (Check it! 👇) [popover] { top: anchor(top); left: anchor(right); position-try-options: flip-block, flip-inline; } Responds to scroll, layout change, etc. Watch the nested menu 👇 Anchor Positioning is coming 🚀

jhey ʕ•ᴥ•ʔ

484,069 次观看 • 2 年前

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

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

Marko Denic

211,392 次观看 • 1 年前

From Copilot Chat to Copilot in your PRs, the CLI, and much, much more. Join us for a look at the future of GitHub Copilot. 🔮

From Copilot Chat to Copilot in your PRs, the CLI, and much, much more. Join us for a look at the future of GitHub Copilot. 🔮

GitHub

295,053 次观看 • 3 年前

Make your tooltips and menus stay in view with 3 lines of CSS 🤙 .menu { top: anchor(top); left: anchor(right); position-try-fallbacks: flip-block, flip-inline; } Property updated 📝 Responds to scroll, layout change, etc. Watch 👇 Anchor Positioning is coming 🚀

Make your tooltips and menus stay in view with 3 lines of CSS 🤙 .menu { top: anchor(top); left: anchor(right); position-try-fallbacks: flip-block, flip-inline; } Property updated 📝 Responds to scroll, layout change, etc. Watch 👇 Anchor Positioning is coming 🚀

jhey ʕ•ᴥ•ʔ

88,055 次观看 • 2 年前

From Copilot Workspace to Copilot Chat, the future of the developer environment is AI-native on This is o1 & Copilot, right where you manage your code.

From Copilot Workspace to Copilot Chat, the future of the developer environment is AI-native on This is o1 & Copilot, right where you manage your code.

Thomas Dohmke

45,614 次观看 • 1 年前

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,721 次观看 • 9 个月前

New in TanStack Start: route-aware CSS inlining. Inline initial route CSS during SSR to reduce blocking stylesheet requests and improve FCP.

New in TanStack Start: route-aware CSS inlining. Inline initial route CSS during SSR to reduce blocking stylesheet requests and improve FCP.

TANSTACK

91,407 次观看 • 2 个月前

CSS Tip! 🔮 Use scroll-linked animations to create list animations ✨ li { view-timeline: --i inline; } .card { scale: 0.8; animation-timeline: --i; animation: s; animation-delay:cover 40%; animation-end-delay:cover 60%; } keyframes s { 50% { scale:1; }} CodePen.IO link below!👇

CSS Tip! 🔮 Use scroll-linked animations to create list animations ✨ li { view-timeline: --i inline; } .card { scale: 0.8; animation-timeline: --i; animation: s; animation-delay:cover 40%; animation-end-delay:cover 60%; } keyframes s { 50% { scale:1; }} CodePen.IO link below!👇

jhey ʕ•ᴥ•ʔ

110,281 次观看 • 3 年前

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 👇

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,526 次观看 • 3 年前

Is your JSON data getting hung up with trailing commas or incorrect data types? Just ask GitHub Copilot Chat what’s wrong and how to fix it 🛠️ Learn more in the Copilot Chat Cookbook.

Is your JSON data getting hung up with trailing commas or incorrect data types? Just ask GitHub Copilot Chat what’s wrong and how to fix it 🛠️ Learn more in the Copilot Chat Cookbook.

GitHub

29,212 次观看 • 1 年前

4 ways to go from Figma layout to HTML/CSS with AI. The first method sucks. The fourth method is goated. Figma

4 ways to go from Figma layout to HTML/CSS with AI. The first method sucks. The fourth method is goated. Figma

Gary Simon

33,571 次观看 • 9 个月前

Want your own PostgreSQL expert, right in Visual Studio Code? Use the PostgreSQL DBA chat mode for a more tailored chat experience! Find it in the repo, a community-contributed resource for customizing GitHub Copilot.

Want your own PostgreSQL expert, right in Visual Studio Code? Use the PostgreSQL DBA chat mode for a more tailored chat experience! Find it in the repo, a community-contributed resource for customizing GitHub Copilot.

Visual Studio Code

24,522 次观看 • 1 年前

As soon as I saw the GitHub Copilot SDK, I knew EXACTLY what I wanted to use it for!

As soon as I saw the GitHub Copilot SDK, I knew EXACTLY what I wanted to use it for!

Gwyneth Peña-Siguenza

120,831 次观看 • 6 个月前

THE MUGGGGGGG. CTRL-ZA HAS ENTERED THE CHAT

THE MUGGGGGGG. CTRL-ZA HAS ENTERED THE CHAT

cel ⋆༄₊·˚✧

11,614 次观看 • 11 个月前

I saw this nifty CSS Video Masking technique on the iPad website. Pretty neat use of CSS - not what I expected!

I saw this nifty CSS Video Masking technique on the iPad website. Pretty neat use of CSS - not what I expected!

Wes Bos

583,465 次观看 • 2 年前

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

jhey ʕ•ᴥ•ʔ

348,300 次观看 • 2 年前

How to use the COPILOT () Function in Excel 📊

How to use the COPILOT () Function in Excel 📊

Mike Tholfsen

10,948 次观看 • 3 个月前

How to use the :where CSS selector to solve specificity problems ↓

How to use the :where CSS selector to solve specificity problems ↓

Sebastiano Guerriero

61,881 次观看 • 2 年前