正在加载视频...

视频加载失败

返回首页

✍️ New Article: Should masonry be part of CSS grid? I explored whether masonry should be integrated into CSS Grid or introduced as its own display type, with examples comparing both approaches.

shadeed9's profile picture

Ahmad Shadeed

25,511 subscribers

30,481 次观看 • 2 年前 •via X (Twitter)

科学技术艺术教育
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

✍️ New article: CSS cap unit A look at how I solved a design problem with CSS cap unit. 🔗
0:18

✍️ New article: CSS cap unit A look at how I solved a design problem with CSS cap unit. 🔗

Ahmad Shadeed

34,492 次观看 • 2 年前

Create responsive holy grail layout with CSS grid 💪🚀
0:12

Create responsive holy grail layout with CSS grid 💪🚀

David Mráz

133,448 次观看 • 3 年前

📌 2 lines of CSS to create a responsive Grid
0:13

📌 2 lines of CSS to create a responsive Grid

andrej

404,631 次观看 • 3 年前

Responsive grid layout using HTML and CSS 🚀
0:11

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,843 次观看 • 2 年前

New component will be added in daisyUI 5.5 soon. CSS-only. What should be the class name for it?
0:18

New component will be added in daisyUI 5.5 soon. CSS-only. What should be the class name for it?

Pouya 🌼 daisyUI 5.6 soon

23,446 次观看 • 1 年前

🍱 Generador de estructuras HTML y CSS con Flexbox y Grid Layout
0:13

🍱 Generador de estructuras HTML y CSS con Flexbox y Grid Layout

Carmen Ansio

107,265 次观看 • 3 年前

Generador de estructuras HTML y CSS con Flexbox y Grid Layout 🤘🏻
0:13

Generador de estructuras HTML y CSS con Flexbox y Grid Layout 🤘🏻

Carmen Ansio

103,687 次观看 • 2 年前

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇
0:18

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,631 次观看 • 3 年前

💡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 次观看 • 1 年前

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }
0:19

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }

jhey ʕ•ᴥ•ʔ

225,369 次观看 • 2 年前

Herramienta para crear un CSS Grid rápido y fácil. ¡Perfecto para crear diseños para tu web! →
0:15

Herramienta para crear un CSS Grid rápido y fácil. ¡Perfecto para crear diseños para tu web! →

Miguel Ángel Durán

118,250 次观看 • 1 年前

Law should be equal both side ✍️
0:13

Law should be equal both side ✍️

Dudu Don

1,245,713 次观看 • 1 年前

Meet CSS text-wrap: balance, a new CSS feature to help in having balanced headlines 🤩 Article: Demo (Chrome Canary only):
0:15

Meet CSS text-wrap: balance, a new CSS feature to help in having balanced headlines 🤩 Article: Demo (Chrome Canary only):

Ahmad Shadeed

89,048 次观看 • 3 年前

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }
0:14

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }

jhey ʕ•ᴥ•ʔ

59,460 次观看 • 1 年前

Big news: A new marketing template has just arrived. ↳ Built with Next.js 15 & React 19 ↳ Tailwind CSS v4 beta and Motion ↳ Animated illustrations and grid layout Give it a spin:
0:17

Big news: A new marketing template has just arrived. ↳ Built with Next.js 15 & React 19 ↳ Tailwind CSS v4 beta and Motion ↳ Animated illustrations and grid layout Give it a spin:

tremor

10,993 次观看 • 1 年前

I don’t know if i should be like “WTF is even this” or if i should just be laughing. Or both 🤣
0:14

I don’t know if i should be like “WTF is even this” or if i should just be laughing. Or both 🤣

PNWGUERRILLA

33,268 次观看 • 4 个月前

Stripped of color. Packed with character. A grid that tells its own story.
0:18

Stripped of color. Packed with character. A grid that tells its own story.

Basit A. Khan

22,573 次观看 • 1 年前

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }
0:11

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

jhey ʕ•ᴥ•ʔ

326,445 次观看 • 9 个月前

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
0:19

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨

jhey ʕ•ᴥ•ʔ

270,769 次观看 • 1 年前