Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

💡 CSS Tip! In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀 No one can memorize them all, so I've created an interactive demo from where you can get the code.

ChallengesCss's profile picture

CSS by T. Afif

14,062 subscribers

43,046 görüntüleme • 9 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,851 görüntüleme • 3 yıl önce

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇
0:36

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

jhey ʕ•ᴥ•ʔ

160,641 görüntüleme • 3 yıl önce

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇
0:25

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

729,417 görüntüleme • 2 yıl önce

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS
0:59

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS

Rebane

1,075,571 görüntüleme • 5 ay önce

Each of these illegals receive auto-parole and get social security numbers so they can work. Fun fact, with an SSN you can register to vote without an ID. It’s illegal but there is no system in place to catch or stop them.
0:45

Each of these illegals receive auto-parole and get social security numbers so they can work. Fun fact, with an SSN you can register to vote without an ID. It’s illegal but there is no system in place to catch or stop them.

@amuse

984,616 görüntüleme • 2 yıl önce

Medications should meet you where you are, not the other way round, so we're making the experience simpler. Now you can find your medications across 1000+ pharmacies in one place, compare prices & get them to you in an hour. Visit:
0:34

Medications should meet you where you are, not the other way round, so we're making the experience simpler. Now you can find your medications across 1000+ pharmacies in one place, compare prices & get them to you in an hour. Visit:

Famasi Africa

10,669 görüntüleme • 8 ay önce

🟢Substance Painter Tip With "Anchor Points" you can link layers together (e.g. use one layer as a mask for another), which makes workflows much faster. Example: You have a shadow layer and want to add an outline around it. Instead of repainting the outline every time you change the shadows, use an Anchor Point: 1. Add an Anchor Point to the shadow layer 2. Add a Fill Filter for the shadow outline layer 3. For the Fill grayscale, select the Anchor Point 4. Add a "Mask Outline" filter 5. If you paint new shadows now, the outline will adjust automatically!
0:52

🟢Substance Painter Tip With "Anchor Points" you can link layers together (e.g. use one layer as a mask for another), which makes workflows much faster. Example: You have a shadow layer and want to add an outline around it. Instead of repainting the outline every time you change the shadows, use an Anchor Point: 1. Add an Anchor Point to the shadow layer 2. Add a Fill Filter for the shadow outline layer 3. For the Fill grayscale, select the Anchor Point 4. Add a "Mask Outline" filter 5. If you paint new shadows now, the outline will adjust automatically!

Keeki | 3D Artist

38,950 görüntüleme • 2 ay önce

⚙️ The new Profiles editor in Visual Studio Code makes it simple to manage your profiles in one place, so you can easily switch between different setups. Watch how you can quickly view all of your existing profiles and create a new profile + configure its source of contents.
1:00

⚙️ The new Profiles editor in Visual Studio Code makes it simple to manage your profiles in one place, so you can easily switch between different setups. Watch how you can quickly view all of your existing profiles and create a new profile + configure its source of contents.

Visual Studio Code

42,453 görüntüleme • 1 yıl önce

You can now use AI to make an interactive 3D world from text prompts 🤯 Watch me use KREA AI's new Scene feature - I created the underground environment, and then prompted to drop in 3D meshes for objects. You can move, resize, or rotate the objects as you please!
0:25

You can now use AI to make an interactive 3D world from text prompts 🤯 Watch me use KREA AI's new Scene feature - I created the underground environment, and then prompted to drop in 3D meshes for objects. You can move, resize, or rotate the objects as you please!

Justine Moore

30,851 görüntüleme • 1 yıl önce

Logan Paul sent himself into "Peel Camp" where he peeled open hundreds of Pokémon cards in an attempt to perfect his peeling ability for an upcoming $800,000 card peel 😭 - he found out that you can find a loose edge to use as an anchor point in order to get the cleanest peel
3:30

Logan Paul sent himself into "Peel Camp" where he peeled open hundreds of Pokémon cards in an attempt to perfect his peeling ability for an upcoming $800,000 card peel 😭 - he found out that you can find a loose edge to use as an anchor point in order to get the cleanest peel

yoxic

194,737 görüntüleme • 13 gün önce

⚠️ATTENTION CREATORS/EDITORS⚠️ I've created one of the most useful tools you can use to speed up your workflow! And it's available right now!! First 10 people can use code "LAUNCH50" for 50% off! Get it here:
1:54

⚠️ATTENTION CREATORS/EDITORS⚠️ I've created one of the most useful tools you can use to speed up your workflow! And it's available right now!! First 10 people can use code "LAUNCH50" for 50% off! Get it here:

Adge

72,673 görüntüleme • 1 yıl önce

While doing the Screw hunt, I found a place where you can catch Pansear, Pansage (including an Alpha one), and Panpour all together. I’ll also show you how to get there — you’ll need the Rotom Glide to reach it.
0:38

While doing the Screw hunt, I found a place where you can catch Pansear, Pansage (including an Alpha one), and Panpour all together. I’ll also show you how to get there — you’ll need the Rotom Glide to reach it.

Light

77,424 görüntüleme • 9 ay önce

✨ Tailwind CSS Tip ✨ You can use peer/{name} to create a beautiful "Pill Menu Animation" like this. × No javascript × No custom styles Comment 👋 and I'll share the code.
0:26

✨ Tailwind CSS Tip ✨ You can use peer/{name} to create a beautiful "Pill Menu Animation" like this. × No javascript × No custom styles Comment 👋 and I'll share the code.

Surjith S M ✪

123,239 görüntüleme • 3 yıl önce

KIDS: Sometimes a passing lane isn't there so you need to put the puck where your teammate is going to be. Here are two unreal "area passes" that lead to goals. By putting the puck into an area where they can skate into it you can negate good gaps or defensive sticks. Great job!
0:52

KIDS: Sometimes a passing lane isn't there so you need to put the puck where your teammate is going to be. Here are two unreal "area passes" that lead to goals. By putting the puck into an area where they can skate into it you can negate good gaps or defensive sticks. Great job!

Topher Scott

46,718 görüntüleme • 2 yıl önce

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇
0:20

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

490,227 görüntüleme • 3 yıl önce

Want to edit a trade, but want to get a player from a different position? This might help. In this example, but Macrae to Setterfield trade can be edited so that Ziebell is the new in. You will get an error from the Edit Trade page, but this is a work around. #AFLFantasy
1:07

Want to edit a trade, but want to get a player from a different position? This might help. In this example, but Macrae to Setterfield trade can be edited so that Ziebell is the new in. You will get an error from the Edit Trade page, but this is a work around. #AFLFantasy

Warnie

67,616 görüntüleme • 3 yıl önce

Rewrite The Odyssey in your own playable game demo! No 3D modeling, no coding, just one image! With HappyOyster World Model, you can turn any image into an interactive game demo in seconds.
0:41

Rewrite The Odyssey in your own playable game demo! No 3D modeling, no coding, just one image! With HappyOyster World Model, you can turn any image into an interactive game demo in seconds.

HappyOyster

1,656,267 görüntüleme • 3 gün önce

MagicPath is now available as an official plugin for Cursor. Give Cursor an infinite canvas where you can view and edit interactive code, build apps that are instantly sharable. Use your local files, skills, etc. And with Composer 2.5 you can design at the speed of thought ⚡️
0:30

MagicPath is now available as an official plugin for Cursor. Give Cursor an infinite canvas where you can view and edit interactive code, build apps that are instantly sharable. Use your local files, skills, etc. And with Composer 2.5 you can design at the speed of thought ⚡️

Pietro Schirano

28,176 görüntüleme • 1 ay önce

Ready to become a top crypto data analyst? I've created an interactive roadmap with tips, guides, and reference work for you to learn from. You can leverage this resource to go from using basic explorer tools to becoming a respected expert in a domain.
5:42

Ready to become a top crypto data analyst? I've created an interactive roadmap with tips, guides, and reference work for you to learn from. You can leverage this resource to go from using basic explorer tools to becoming a respected expert in a domain.

ilemi

29,875 görüntüleme • 2 yıl önce