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

13,999 subscribers

43,132 görüntüleme • 1 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

2 Yorum

Dex profil fotoğrafı
Dex1 yıl önce

Lack of browser support.

Hamza Syrage profil fotoğrafı
Hamza Syrage1 yıl önce

Css is awesome

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

730,990 görüntüleme • 3 yıl önce

Wave goodbye to complex page layout requirements 👋 With the CSS anchor positioning API, you can easily anchor tooltips, menus, and more to their trigger elements with just a few lines of code ▶️
0:53

Wave goodbye to complex page layout requirements 👋 With the CSS anchor positioning API, you can easily anchor tooltips, menus, and more to their trigger elements with just a few lines of code ▶️

Chrome for Developers

32,477 görüntüleme • 1 yıl önce

Future CSS Tip! 🔮 You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator 🤯 .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! 😎 CodePen.IO link below! 👇
0:34

Future CSS Tip! 🔮 You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator 🤯 .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

129,299 görüntüleme • 3 yıl önce

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇
0:21

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

201,244 görüntüleme • 3 yıl önce

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.
0:22

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.

CSS by T. Afif

25,843 görüntüleme • 10 ay önce

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }
0:28

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

jhey ʕ•ᴥ•ʔ

164,722 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,078,278 görüntüleme • 8 ay önce

Putting CSS Anchor Positioning to the test by throwing dropdown menus around 💪 [popover].dropdown { top: anchor(bottom); right: anchor(right); position-try-options: flip-block, flip-inline; } That's all 👆 Keeps the menu tethered to the button
0:29

Putting CSS Anchor Positioning to the test by throwing dropdown menus around 💪 [popover].dropdown { top: anchor(bottom); right: anchor(right); position-try-options: flip-block, flip-inline; } That's all 👆 Keeps the menu tethered to the button

jhey ʕ•ᴥ•ʔ

112,155 görüntüleme • 2 yıl önce

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀
0:22

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀

jhey ʕ•ᴥ•ʔ

234,760 görüntüleme • 2 yıl ö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 • 11 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 • 5 ay önce

The best @minecraft news anchor is back! The only news source you can trust! VILLAGER NEWS!
7:04

The best @minecraft news anchor is back! The only news source you can trust! VILLAGER NEWS!

Element Animation

164,902 görüntüleme • 2 yıl ö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,459 görüntüleme • 2 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

195,137 görüntüleme • 3 ay önce