Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,756 subscribers

200,156 Aufrufe • vor 8 Monaten •via X (Twitter)

KunstBildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

you can totally do it with css 🧑‍🍳 use a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙
0:16

you can totally do it with css 🧑‍🍳 use a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙

jhey ʕ•ᴥ•ʔ

286,399 Aufrufe • vor 8 Monaten

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:
0:15

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

Emil Kowalski

118,103 Aufrufe • vor 12 Tagen

Remember Arteta explaining why he wants the pass from full-back to winger on an angle, not straight. Brighton Clip: FB a bit narrower → angled pass → easier for Trossard to play round the corner & use the air→ Gyokeres reacts to the pass. Leeds Clip: FB wider → straighter pass → harder to play but credit Trossard’s ability to rotate his hips and still find it→ This time Gyokeres is already on the move, anticipating it. Clear sign of a growing player relationship between Trossard & Gyokeres 🤝
0:15

Remember Arteta explaining why he wants the pass from full-back to winger on an angle, not straight. Brighton Clip: FB a bit narrower → angled pass → easier for Trossard to play round the corner & use the air→ Gyokeres reacts to the pass. Leeds Clip: FB wider → straighter pass → harder to play but credit Trossard’s ability to rotate his hips and still find it→ This time Gyokeres is already on the move, anticipating it. Clear sign of a growing player relationship between Trossard & Gyokeres 🤝

The Individual Coach-Analyst

15,750 Aufrufe • vor 6 Monaten

Tom Hollander says he accidentally received Tom Holland’s Marvel box office bonus because their agency mixed them up. “I got one from the agency saying, ‘Payment slip for first box office bonus for The Avengers.’” “At that moment, I thought, ‘I don’t think I’m in The Avengers.’” Then he opened the email. “It was an astonishing amount of money.” “It was not his salary. It was his first box office bonus… and it was more money than I’d ever seen.” “It was a seven figure sum.”
0:11

Tom Hollander says he accidentally received Tom Holland’s Marvel box office bonus because their agency mixed them up. “I got one from the agency saying, ‘Payment slip for first box office bonus for The Avengers.’” “At that moment, I thought, ‘I don’t think I’m in The Avengers.’” Then he opened the email. “It was an astonishing amount of money.” “It was not his salary. It was his first box office bonus… and it was more money than I’d ever seen.” “It was a seven figure sum.”

Movies Scenes 🎫

3,463,249 Aufrufe • vor 2 Monaten

lord, please take all my pain & suffering and give it to all the taurus placements except for taurus moon. rain down upon virgo risings with an iron fist and cast a shadow on all gemini suns. the scorpios shall fast for 40 days & 40 nights!
0:12

lord, please take all my pain & suffering and give it to all the taurus placements except for taurus moon. rain down upon virgo risings with an iron fist and cast a shadow on all gemini suns. the scorpios shall fast for 40 days & 40 nights!

blessed ess :)

10,251 Aufrufe • vor 2 Jahren

🇨🇳🇹🇼 Rubio just described Taiwan talks with China like a recurring argument between an old married couple. "They raise it. We state our position. We move on." Beijing has spent years trying to make Taiwan a pressure point it can actually use on Washington. Rubio just told the world it doesn't work. Secretary Marco Rubio
0:12

🇨🇳🇹🇼 Rubio just described Taiwan talks with China like a recurring argument between an old married couple. "They raise it. We state our position. We move on." Beijing has spent years trying to make Taiwan a pressure point it can actually use on Washington. Rubio just told the world it doesn't work. Secretary Marco Rubio

Mario Nawfal

22,494 Aufrufe • vor 3 Monaten

The ultimate boost on Dust 2 Catwalk Memorize this position and surprise your opponents with an unexpected angle. Almost nobody checks this peek — perfect chance to grab a frag and turn the round. Don’t forget, to get a free bonus from us, all you need to do is use the promo code “farm25” #cs2 #farmskins
0:16

The ultimate boost on Dust 2 Catwalk Memorize this position and surprise your opponents with an unexpected angle. Almost nobody checks this peek — perfect chance to grab a frag and turn the round. Don’t forget, to get a free bonus from us, all you need to do is use the promo code “farm25” #cs2 #farmskins

Farmskins

15,535 Aufrufe • vor 6 Monaten

This was such a huge shot for Anthony Davis. To take this three with confidence and bury it with maybe the game on the line, he's at an ELITE level right now
0:12

This was such a huge shot for Anthony Davis. To take this three with confidence and bury it with maybe the game on the line, he's at an ELITE level right now

Trevor Lane

215,041 Aufrufe • vor 1 Jahr

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 Aufrufe • vor 3 Monaten

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.
0:15

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.

Leon Lin

72,887 Aufrufe • vor 5 Monaten

This is the level of “ballistics expertise” he brought to the Candace debate. And somehow he thinks he won. 😂 “Take an empty box of ammunition, put it on a table, and fire near the muzzle—the box will blow off the table.” Only if the box is 143 yards away, genius.🤪
0:10

This is the level of “ballistics expertise” he brought to the Candace debate. And somehow he thinks he won. 😂 “Take an empty box of ammunition, put it on a table, and fire near the muzzle—the box will blow off the table.” Only if the box is 143 yards away, genius.🤪

Project Constitution

30,213 Aufrufe • vor 1 Tag

"We need to use, effectively, a shadow carbon price." A 'shadow carbon price' is nothing more than an at source carbon tax. Mark Carney isn't getting rid of the carbon tax, he's just trying to hide it from consumers. Why is that important? Follow me on a Net Zero journey.🧵 /1
0:12

"We need to use, effectively, a shadow carbon price." A 'shadow carbon price' is nothing more than an at source carbon tax. Mark Carney isn't getting rid of the carbon tax, he's just trying to hide it from consumers. Why is that important? Follow me on a Net Zero journey.🧵 /1

David Jacobs

156,866 Aufrufe • vor 1 Jahr

This is a demonstration of use of a Glock switch on a semi-automatic gun at Birmingham Police firing range. Notice the trigger is pulled once. 17 rounds shot in less than 3 secs. Now imagine an assault weapon with an extended clip with a conversion device on it. This is why we need stiffer penalties for the manufacturing, selling, possession, and use of conversions devices.
0:14

This is a demonstration of use of a Glock switch on a semi-automatic gun at Birmingham Police firing range. Notice the trigger is pulled once. 17 rounds shot in less than 3 secs. Now imagine an assault weapon with an extended clip with a conversion device on it. This is why we need stiffer penalties for the manufacturing, selling, possession, and use of conversions devices.

Randall Woodfin

54,160 Aufrufe • vor 1 Jahr

🤫 6’10 Zachary secretly recorded a video showing his size 18 shoes, socks, and feet on an airplane! Get it for 20% off with code FEET20 at checkout:
0:10

Sensitive content

🤫 6’10 Zachary secretly recorded a video showing his size 18 shoes, socks, and feet on an airplane! Get it for 20% off with code FEET20 at checkout:

Giant Feet Promo

53,053 Aufrufe • vor 6 Monaten

A Taiwanese politician (wearing an orange jacket with his name and position printed on it) is canvassing votes for his campaign. This is the Taiwanese democracy praised by the West.🙃
0:13

A Taiwanese politician (wearing an orange jacket with his name and position printed on it) is canvassing votes for his campaign. This is the Taiwanese democracy praised by the West.🙃

ShanghaiPanda （ Account deactivation）

2,478,445 Aufrufe • vor 1 Jahr

I'm not an engineer, but I rebuilt Savee — the app a million designers use Friday, 5pm. I asked Claude how much work it would take to rebuild our iOS app fully native. It had been sitting on our someday list for years, waiting for a team we didn't have. I stopped waiting and built it myself — a designer with Claude Code, one feature at a time. Claude wrote the Swift; I answered with the feedback designers give: two points left, lighter tint, that corner radius is wrong. Another round. And another. 33 days from the first prompt to live on the App Store. 1,078 prompts. Three releases in the first week. Something changed for designers. The distance between an idea and shipping used to be a team, a budget, and a year. Now it's a conversation. Savee 3.0 is out. It's the app I always wanted us to have 🚀
0:14

I'm not an engineer, but I rebuilt Savee — the app a million designers use Friday, 5pm. I asked Claude how much work it would take to rebuild our iOS app fully native. It had been sitting on our someday list for years, waiting for a team we didn't have. I stopped waiting and built it myself — a designer with Claude Code, one feature at a time. Claude wrote the Swift; I answered with the feedback designers give: two points left, lighter tint, that corner radius is wrong. Another round. And another. 33 days from the first prompt to live on the App Store. 1,078 prompts. Three releases in the first week. Something changed for designers. The distance between an idea and shipping used to be a team, a budget, and a year. Now it's a conversation. Savee 3.0 is out. It's the app I always wanted us to have 🚀

Andre do Amaral

163,514 Aufrufe • vor 26 Tagen

🚨NEW #FC25 BROKEN CORNER TACTIC🚨 1 • Point to the player on the edge of the box✅ 2 • High power + low cross to them✅ 3 • Hold the ball and give it back✅ 4 • Wait for back post player to peel off and cross to them✅ 5 • Lay off to a player in box✅ 6 • GOALLL 🏆✅
0:14

🚨NEW #FC25 BROKEN CORNER TACTIC🚨 1 • Point to the player on the edge of the box✅ 2 • High power + low cross to them✅ 3 • Hold the ball and give it back✅ 4 • Wait for back post player to peel off and cross to them✅ 5 • Lay off to a player in box✅ 6 • GOALLL 🏆✅

FTD - EAFC Trader/Creator

119,036 Aufrufe • vor 1 Jahr

Overseas people may not be familiar with it, but this is a mouse called "Trackball Mouse" that Japanese people love very much. Move the pointer by sliding your thumb without shaking your arm by a millimeter. The old generation of mice had a ball on the bottom, but I have the impression that it is a thumb version. The advantage is that it can reduce the burden on the wrist and save space. More than anything else, the smooth rotation of this ball is comfortable. If you have the opportunity, please give it a try. In addition, recently, even unknown devices beyond the scope of the mouse have appeared. "Nape Pro" You can place your favorite commands on all 6 keys, and you can also move the pointer. And it's super small. This may be an effective device for those who do not have a stereotype about the trackball mouse. Please be aware of it.
0:19

Overseas people may not be familiar with it, but this is a mouse called "Trackball Mouse" that Japanese people love very much. Move the pointer by sliding your thumb without shaking your arm by a millimeter. The old generation of mice had a ball on the bottom, but I have the impression that it is a thumb version. The advantage is that it can reduce the burden on the wrist and save space. More than anything else, the smooth rotation of this ball is comfortable. If you have the opportunity, please give it a try. In addition, recently, even unknown devices beyond the scope of the mouse have appeared. "Nape Pro" You can place your favorite commands on all 6 keys, and you can also move the pointer. And it's super small. This may be an effective device for those who do not have a stereotype about the trackball mouse. Please be aware of it.

翁（おきな）

260,488 Aufrufe • vor 4 Monaten

On your open perpetual position can become an NFT and live in your wallet. You open a position like normal than mint it. The program issues a token 2022 nft, that points to your exact position. Normally your open position lives inside the protocol. With Percolator Trade your able to wrap it into an NFT that sits in your own wallet. A real, ownable object instead of a line in a dashboard. Because it’s a token, it moves like one. Send the NFT to another wallet and the position goes with it. Whoever holds the NFT owns the trade. One NFT = one position If you burn it, your back to holding the position directly. That’s the composable part, a position use to be stuck inside one account. Because it’s a token, it can now be sold OTC or used by anything that speaks tokens. Why does it matter? Because the position is bound to the NFT, it can’t be drained out from under whoever holds it so there is no middleman that holds your position. The NFT does, and the NFT is yours. One important safety detail; transfers run through a token 2022 hook that checks the positions health first, so it can’t be handed off in a broken state & the NFT layer is a separate program so it can never touch the funds the core engine holds.
0:13

On your open perpetual position can become an NFT and live in your wallet. You open a position like normal than mint it. The program issues a token 2022 nft, that points to your exact position. Normally your open position lives inside the protocol. With Percolator Trade your able to wrap it into an NFT that sits in your own wallet. A real, ownable object instead of a line in a dashboard. Because it’s a token, it moves like one. Send the NFT to another wallet and the position goes with it. Whoever holds the NFT owns the trade. One NFT = one position If you burn it, your back to holding the position directly. That’s the composable part, a position use to be stuck inside one account. Because it’s a token, it can now be sold OTC or used by anything that speaks tokens. Why does it matter? Because the position is bound to the NFT, it can’t be drained out from under whoever holds it so there is no middleman that holds your position. The NFT does, and the NFT is yours. One important safety detail; transfers run through a token 2022 hook that checks the positions health first, so it can’t be handed off in a broken state & the NFT layer is a separate program so it can never touch the funds the core engine holds.

Percolator

12,359 Aufrufe • vor 1 Monat