正在加载视频...

视频加载失败

返回首页

Build Flow Charts with #CSS Anchor Positioning

coryrylan's profile picture

Cory Rylan

4,228 subscribers

28,522 次观看 • 2 年前 •via X (Twitter)

#CSS
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

CSS view transitions + anchor positioning now let you easily build smooth SPA-like navigation on a good old static website!
0:11

CSS view transitions + anchor positioning now let you easily build smooth SPA-like navigation on a good old static website!

Benjamin De Cock

138,226 次观看 • 3 个月前

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗
0:16

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗

Ahmad Shadeed

38,739 次观看 • 10 个月前

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.
0:19

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

CSS by T. Afif

82,668 次观看 • 6 个月前

progressive css-only pagination indicators w/ anchor positioning 👨‍🍳 nav::before { position-anchor: --h; } nav::before { left: anchor(left); } a:hover { anchor-name: --h; } use the nav pseudoelements, ::before for intent, ::after for current 🤙
0:16

progressive css-only pagination indicators w/ anchor positioning 👨‍🍳 nav::before { position-anchor: --h; } nav::before { left: anchor(left); } a:hover { anchor-name: --h; } use the nav pseudoelements, ::before for intent, ::after for current 🤙

jhey ʕ•ᴥ•ʔ

192,456 次观看 • 9 个月前

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO
0:17

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

CSS by T. Afif

12,042 次观看 • 1 年前

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }
0:17

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }

jhey ʕ•ᴥ•ʔ

396,709 次观看 • 2 年前

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉
0:15

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Devon Govett

83,922 次观看 • 9 个月前

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 次观看 • 9 个月前

table of contents marker w/ modern css 🧑‍🍳 .toc { scroll-target-group: auto; } a:target-current { anchor-name: --active; } .toc::after { position-anchor: --active; top: anchor(top); } fun progressive enhancement, no js 🤙
0:15

table of contents marker w/ modern css 🧑‍🍳 .toc { scroll-target-group: auto; } a:target-current { anchor-name: --active; } .toc::after { position-anchor: --active; top: anchor(top); } fun progressive enhancement, no js 🤙

jhey ʕ•ᴥ•ʔ

177,317 次观看 • 6 个月前

✨ Build Next.js, Tailwind CSS & shadcn UIs with a visual editor. Export the code with one click. Link below.
0:14

✨ Build Next.js, Tailwind CSS & shadcn UIs with a visual editor. Export the code with one click. Link below.

Mattia

107,119 次观看 • 1 年前

✨ Build Next.js, Tailwind CSS & shadcn websites with drag and drop. And yes, you can export the code. Link below.
0:16

✨ Build Next.js, Tailwind CSS & shadcn websites with drag and drop. And yes, you can export the code. Link below.

Mattia

205,173 次观看 • 1 年前

How to create a Simple Sushi 🍣 Restaurant Landing Page. I’ll provide you with the HTML, CSS, and JavaScript code snippets to build it step by step.
0:13

How to create a Simple Sushi 🍣 Restaurant Landing Page. I’ll provide you with the HTML, CSS, and JavaScript code snippets to build it step by step.

Dhanian 🗯️

46,880 次观看 • 1 年前

Sigma BF - Rebuilt with CSS
0:13

Sigma BF - Rebuilt with CSS

Florian

27,342 次观看 • 1 年前

To all the devs telling me my button style was impossible to build with code. I did it in Webflow in 10 minutes using only HTML/CSS. No SVGs.
0:13

To all the devs telling me my button style was impossible to build with code. I did it in Webflow in 10 minutes using only HTML/CSS. No SVGs.

Brett

132,352 次观看 • 1 年前

How I build with Claude Fable 5 1. CSS position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️
0:14

How I build with Claude Fable 5 1. CSS position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️

FHILY👑

117,941 次观看 • 1 个月前

a pixelating logo carousel made with css
0:12

a pixelating logo carousel made with css

ty

62,358 次观看 • 3 个月前

Infinite Marquee Scrolling with Tailwind CSS ✨ ↳
0:11

Infinite Marquee Scrolling with Tailwind CSS ✨ ↳

Surjith S M ✪

103,497 次观看 • 3 年前