Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

z-index in CSS explained 🫣

RyanEls4's profile picture

Ryan Els

18,500 subscribers

616,953 görüntüleme • 2 yıl önce •via X (Twitter)

EğitimBilim & TeknolojiKomedi
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️
0:19

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

17,112 görüntüleme • 6 ay önce

CSS explained in 15 seconds
0:15

CSS explained in 15 seconds

patoroco 👌

43,401 görüntüleme • 3 yıl önce

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👑

120,484 görüntüleme • 4 ay önce

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }
0:18

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }

jhey ʕ•ᴥ•ʔ

121,039 görüntüleme • 1 yıl önce

We set the heat index🤫🫣
0:15

Sensitive content

We set the heat index🤫🫣

Mahi Shah

14,303 görüntüleme • 20 gün önce

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:
0:15

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

bolt.new

369,631 görüntüleme • 2 yıl önce

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,636 görüntüleme • 3 yıl önce

sibling-index() = knowing your exact spot in line sibling-count() = knowing how long the line is Both CSS functions have reached Baseline Newly Available status for the latest browsers. Read the full docs → Guides and fallbacks are in Modern Web Guidance →
0:10

sibling-index() = knowing your exact spot in line sibling-count() = knowing how long the line is Both CSS functions have reached Baseline Newly Available status for the latest browsers. Read the full docs → Guides and fallbacks are in Modern Web Guidance →

Chrome for Developers

14,062 görüntüleme • 1 ay önce

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }
0:17

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

jhey ʕ•ᴥ•ʔ

281,342 görüntüleme • 2 yıl önce

CSSの新しいsibling-index()を使うと、順番に出現するモーションを簡単に実装できます。
0:19

CSSの新しいsibling-index()を使うと、順番に出現するモーションを簡単に実装できます。

池田 泰延

80,434 görüntüleme • 9 ay önce

🎮 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,763 görüntüleme • 2 yıl önce

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.
0:12

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

Soren

426,308 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

Tailwind CSS Tip (24/30) ✨ You can create a transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉
0:12

Tailwind CSS Tip (24/30) ✨ You can create a transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉

Surjith S M ✪

45,134 görüntüleme • 3 yıl önce

British devs every time they type "color" in CSS 🛀
0:10

British devs every time they type "color" in CSS 🛀

Supabase

528,481 görüntüleme • 3 yıl önce

How to create a customizable 'flipped' border-radius in CSS ↓
0:16

How to create a customizable 'flipped' border-radius in CSS ↓

Sebastiano Guerriero

203,250 görüntüleme • 2 yıl önce

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.
0:17

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.

一丝

32,996 görüntüleme • 7 ay önce