Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

shadeed9's profile picture

Ahmad Shadeed

25,493 subscribers

34,492 Aufrufe • vor 2 Jahren •via X (Twitter)

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

✍️ 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.
0:10

✍️ 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.

Ahmad Shadeed

30,464 Aufrufe • vor 1 Jahr

wrote a short article on the css perspective property and how to add depth to interfaces
0:12

wrote a short article on the css perspective property and how to add depth to interfaces

will

13,102 Aufrufe • vor 6 Monaten

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩
0:17

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩

CSS by T. Afif

13,762 Aufrufe • vor 2 Jahren

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan
0:16

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

Bram.us (by @bramus)

15,630 Aufrufe • vor 1 Jahr

Capped to look cool! A Big Cap Creative Park has become a unique landmark building in Dongguan, south China's Guangdong Province due to its eye-catching design in the shape of a cap.
0:14

Capped to look cool! A Big Cap Creative Park has become a unique landmark building in Dongguan, south China's Guangdong Province due to its eye-catching design in the shape of a cap.

People's Daily, China

2,182,477 Aufrufe • vor 2 Jahren

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.
0:16

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.

Roma Komarov (inactive)

138,374 Aufrufe • vor 3 Jahren

There’s a downed colony of bees in the park and the people who found them called the cops who are attempting to get ahold of Emergency Services Unit (ESU) which they say has a “bee unit.” My amateur estimation is the heat downed the queen. I left a bottle cap of water.
0:15

There’s a downed colony of bees in the park and the people who found them called the cops who are attempting to get ahold of Emergency Services Unit (ESU) which they say has a “bee unit.” My amateur estimation is the heat downed the queen. I left a bottle cap of water.

Talia Ben-Ora

61,266 Aufrufe • vor 3 Monaten

@ DIV1 STOP DENYING US OF A MINCHAN UNIT BCS LOOK AT THIS MASTERPIECE
0:16

@ DIV1 STOP DENYING US OF A MINCHAN UNIT BCS LOOK AT THIS MASTERPIECE

𝚍𝚎𝚎 🐰🐺

28,695 Aufrufe • vor 11 Monaten

I was one of the first to call $PONS at a $200K market cap. I was one of the first to call $CASHCAT at a $1M market cap. I was one of the first to call $AI at a $400K market cap. I was one of the first to call $CATE at a $1.5M market cap. And you still don't follow me? I honestly feel bad for you.
0:12

I was one of the first to call $PONS at a $200K market cap. I was one of the first to call $CASHCAT at a $1M market cap. I was one of the first to call $AI at a $400K market cap. I was one of the first to call $CATE at a $1.5M market cap. And you still don't follow me? I honestly feel bad for you.

qianbaidu.eth 千百度

37,666 Aufrufe • vor 19 Tagen

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👑

119,967 Aufrufe • vor 3 Monaten

I liked the design so much I concepted a game unit based on the TP21 but added a wood gasifier and too many guns
0:16

I liked the design so much I concepted a game unit based on the TP21 but added a wood gasifier and too many guns

Mike Doscher

11,415 Aufrufe • vor 5 Monaten

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:
0:15

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

Emil Kowalski

121,394 Aufrufe • vor 1 Monat

I don't think its usable but it was a fun little experiment built with Three.js Motion Tailwind CSS and Next.js
0:15

I don't think its usable but it was a fun little experiment built with Three.js Motion Tailwind CSS and Next.js

Manu Arora

25,757 Aufrufe • vor 7 Monaten

The triangle🔺 is the most popular shape and I still see old and obsolete methods to create it. ⚠️STOP DOING THIS⚠️ 👉 A collection of CSS-only triangles made with a single-element and modern CSS. With the border-only and rounded corners variations.
0:16

The triangle🔺 is the most popular shape and I still see old and obsolete methods to create it. ⚠️STOP DOING THIS⚠️ 👉 A collection of CSS-only triangles made with a single-element and modern CSS. With the border-only and rounded corners variations.

CSS by T. Afif

14,689 Aufrufe • vor 2 Jahren

Liminal enters a new era. We’re evolving into a more flexible, progress-driven, and time-based model. Introducing Epochs. Four-week cycles, with dynamic cap per asset, starting with a new cap of $50M on $HYPE. Epoch 0 begins now👇
0:17

Liminal enters a new era. We’re evolving into a more flexible, progress-driven, and time-based model. Introducing Epochs. Four-week cycles, with dynamic cap per asset, starting with a new cap of $50M on $HYPE. Epoch 0 begins now👇

Liminal

243,507 Aufrufe • vor 1 Jahr

This CSS unit is quietly ruining your website's mobile experience. In mobile, "vh" doesn't account for the browser's address bar so the bottom of your page gets cut off. Even worse if you have a bottom right action button since users won't even know it's there. The "svh" unit fixes it: .page { min-height: 100svh; } If you found this one useful, follow for more! ❤️
0:10

This CSS unit is quietly ruining your website's mobile experience. In mobile, "vh" doesn't account for the browser's address bar so the bottom of your page gets cut off. Even worse if you have a bottom right action button since users won't even know it's there. The "svh" unit fixes it: .page { min-height: 100svh; } If you found this one useful, follow for more! ❤️

Ali

11,841 Aufrufe • vor 3 Monaten