Loading video...
Video Failed to Load
CSS Tip! ๐ค You could use CSS :has() to power a context-aware custom cursor experience ๐ :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! ๐
261,705 views โข 3 years ago โขvia X (Twitter)
4 Comments
jhey สโขแดฅโขส3 years ago
Here's that @CodePen link! ๐ You'll need to be in a browser that supports CSS :has() โ ๏ธ Messing around with ideas for the play button challenge. The cursor is shared between the videos which is neat ๐
Heru Hermawan3 years ago
@CodePen Great tip. Thanks, jhey!
blank_3 years ago
@CodePen How u invent this kind of stuff man
ColdHolder3 years ago
@CodePen @SaveToNotion #thread
![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! ๐](https://image.24vids.com/tw-1636420648535769107/ext_tw_video_thumb/1636419242886152232/pu/img/fu92DyOAZ6bLZ3qp.jpg)
![CSS Tip! โจ Use CSS :has() on the :root to check for a condition on the page ๐ง For example, this pure CSS Minesweeper game ๐คฏ :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! ๐ญ CodePen.IO link below! ๐](https://image.24vids.com/tw-1610787339709853697/ext_tw_video_thumb/1610786552845860865/pu/img/1Yn_P13qM6IOuaWY.jpg)
![Future UI && CSS Tip! ๐ฎ You could use View Transitions to animate CSS grid position and create an OSX-style exposรฉ for a portfolio ๐ฅ It's a grid where things move based on state. Wrapped in a VT ๐ค [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below ๐](https://image.24vids.com/tw-1684294735228289026/ext_tw_video_thumb/1684293327405871106/pu/img/_8tGY2yw7r3sRTOo.jpg)
![CSS Tip! ๐ช You can create these tab controls with CSS :has() + radio buttons โจ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick ๐ค The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs ๐ซถ Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size ๐ The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position ๐ .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode ๐ The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across ๐ .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here ๐ As always, any questions, suggestions, etc. let me know CodePen.IO link below! ๐ (There's even a Tailwind CSS play for this one too ๐)](https://image.24vids.com/tw-1746099478656901617/ext_tw_video_thumb/1746099293872898048/pu/img/oonp9Ek6MULFcFjk.jpg)
![CSS Trick ๐ค You can create these tab bar controls by using :has() to count the number of tabs โญ๏ธ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! ๐ผ Couple of CSS :has() tricks here combined with custom properties ๐ First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs ๐ .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property ๐ค .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs ๐ซถ Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size ๐ Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position ๐ .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it ๐ค The final piece is using mix-blend-mode ๐ The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across ๐ .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here ๐ As always, any questions, suggestions, etc. let me know CodePen.IO link below! ๐ (There's even a Tailwind CSS play for this one too ๐)](https://image.24vids.com/tw-1750370338041647245/ext_tw_video_thumb/1750367384505081856/pu/img/ZVW6XE5SU4mBEB5M.jpg)
![CSS Tip! โจ You can create icon sprite animations using the steps() animation-timing function ๐ค You could use this to create little icon button animations, etc. ๐ But how do you do it? Like this ๐ button img { object-fit: cover; object-position: 0 0; } The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this: [aria-pressed=true] img { animation: play 0.5s steps(20) forwards; } @ keyframes play { to { object-position: 100% 0; } } We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite ๐ Check out the video that breaks things down a little bit CodePen.IO link blow! ๐](https://image.24vids.com/tw-1694442289047703873/ext_tw_video_thumb/1694440593613557760/pu/img/OB1gtiLZhnylcC9e.jpg)
