Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

💡 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.

CSS by T. Afif

14,062 subscribers

43,046 Aufrufe • vor 9 Monaten •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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! 👇

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

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 👇

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

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! 👇

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

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

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

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.

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

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:

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

🟢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!

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

⚙️ 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 Aufrufe • vor 1 Jahr

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!

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

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

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,568 Aufrufe • vor 10 Tagen

⚠️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:

⚠️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 Aufrufe • vor 1 Jahr

✨ 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.

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

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.

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

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 👇

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

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!

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

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

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

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 ⚡️

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 Aufrufe • vor 1 Monat

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.

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

Thousands of people asked us to opensource Whomane - an AI wearable with a camera We will be sued but today we are publishing all the code, schema, and designs Also added a case and created a live demo you can try NOW with just one click

Thousands of people asked us to opensource Whomane - an AI wearable with a camera We will be sued but today we are publishing all the code, schema, and designs Also added a case and created a live demo you can try NOW with just one click

Nik Shevchenko

204,827 Aufrufe • vor 2 Jahren