Загрузка видео...
Не удалось загрузить видео
Use masks for your scrollable areas Use the CSS at-rule `property` to register stops as animatable values. The browser treats your custom property as a `percentage`, so the mask edges transition smoothly. Result: scroll lists that fade at the edges, revealing content underneath. No JavaScript needed.
49,867 просмотров • 3 месяцев назад •via X (Twitter)
Комментарии: 0
Нет доступных комментариев
Здесь появятся комментарии из оригинального поста
![SHOULD GOVERNMENT BE ALLOWED TO TAKE PRIVATE PROPERTY? “People are waking up to the fact that the asset seizure tax is an elimination of private property rights, that fundamentally what you're saying [is] that private property now becomes public property. Because as soon as you give the government the right to collect your post-tax assets through a legislative vote, you are basically saying that you no longer have private property — because at any point in the future the government can vote to say I'm going to take your private property — which is different than an income tax. [An income tax] is when you earn something that you didn't have before, and they take a percentage of your earnings (of your income). The statement now is after you've made your income (it's now your private property) — they can come and take it. And so that is a distinction that has never existed in the United States. And I will make the retort right now to property tax, because people always say to me: ‘what about property tax?’ A property tax is a service fee on a particular, specific asset. The money that is collected provides services for that asset to make it more valuable. So you get roads, infrastructure, policing, fire, schools… All the stuff that comes with property tax makes that property [more valuable]. And you have the option at any point you want to sell that property and stop paying that property tax. You have the option at any point to downgrade your property and get a cheaper property and pay [a lower tax]. And here's the other important point about property tax: it’s uniform. Uniform means that everyone pays the same percentage, the same property tax rate in a county. This asset seizure tax that's being proposed is a demographic tax — meaning that the state or the legislature defines a specific group of individuals (in this case, they're saying anyone with a net worth over a billion dollars) and then they can go and take assets from only that group. That is nonuniform taxation. It means that for the first time we're saying based on the demographics of a person meaning whatever you want to use to define that person (in this case their wealth) — you are going to be treated differently. And that is different than an income tax, because remember when you have graduated income tax rates (and you say high earners get taxed more) — what you're taxing is the earnings, not the individual. You're not looking through to the individual to determine whether or not they're wealthy. All you're doing is looking at the independent earnings amount that's coming in. And so a uniformity clause is supposed to protect people from being demographically discriminated against. And you may roll your hand and be like: ‘Oh, who cares about the billionaires? Eat the rich. That's great.’ But fundamentally, you're giving the government, the legislature, the ability to in the future take any demographic definition they want and go in and take any percentage they want of after-tax property from you. That is why this is so troubling.” david friedberg The All-In Podcast](https://image.24vids.com/tw-2012558948130501004/amplify_video_thumb/2012557570549088256/img/tvspEgv_CJZyLczl.jpg)
![CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇](https://image.24vids.com/tw-1734369933558010226/ext_tw_video_thumb/1734365662590418944/pu/img/320Dgq_k3RZoZOFV.jpg)
