Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

✍️ 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,549 subscribers

30,263 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieKunstBildung
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

✍️ 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,475 Aufrufe • vor 2 Jahren

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

Create responsive holy grail layout with CSS grid 💪🚀

David Mráz

133,448 Aufrufe • vor 2 Jahren

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

📌 2 lines of CSS to create a responsive Grid

andrej

404,490 Aufrufe • vor 3 Jahren

Responsive grid layout using HTML and CSS 🚀
0:11

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,843 Aufrufe • vor 2 Jahren

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

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

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

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,561 Aufrufe • vor 3 Jahren

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

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

117,972 Aufrufe • vor 1 Jahr

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

Law should be equal both side ✍️
0:13

Law should be equal both side ✍️

Dudu Don

1,245,477 Aufrufe • vor 1 Jahr

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,550 Aufrufe • vor 10 Monaten

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

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 ʕ•ᴥ•ʔ

314,599 Aufrufe • vor 4 Monaten

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

Los layouts más típicos para webs y apps con CSS. Usando Flex y Grid, con el código listo para copiar: →
0:16

Los layouts más típicos para webs y apps con CSS. Usando Flex y Grid, con el código listo para copiar: →

Miguel Ángel Durán

37,504 Aufrufe • vor 11 Monaten

Crea diseños en Flexbox o Grid con este recurso. Te da el HTML, CSS y código de Tailwind para copiar:
0:12

Crea diseños en Flexbox o Grid con este recurso. Te da el HTML, CSS y código de Tailwind para copiar:

Miguel Ángel Durán

29,077 Aufrufe • vor 10 Monaten

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗
0:17

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

Ahmad Shadeed

29,887 Aufrufe • vor 1 Monat