Chris

[Santu @santu_design]

my favorite designs from july

[Chris @ctian97]

@phonybone Lisan al-gaib!!

[Funkeeee @sucre_xo]

This made me laugh 🤣🤣

[Chris @ctian97]

@buninux @cellothebear

[Dmitrii Bunin @buninux]

cheating in responsive design with Figma

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Trick 🤙

You can use scroll-driven animations on the inline axis to create list animations like in these cards 🫶

article {
animation: vibe;
animation-timeline: view(inline);
animation-range: cover 40% cover 60%;
}
@​keyframes vibe { 50% { scale: 1; filter: grayscale(0); }}

Here you use a view() timeline with the inline axis set inside the function. This means you can hook into the horizontal scroll position of an element inside its scroller 🙌

In this demo, you set a default smaller scale and make each card grayscale 🤏

article {
scale: 0.8;
filter: grayscale(1);
}

Then the animation happens as each card enters from the right at 0% and leaves to the left at 100% 🎞️ 50% is the halfway point and in your keyframes you make each card grow and saturate at that point before returning to its original state ✨ scroll-snap provides a nice look-and-feel here and on mobile 🫰

It's really as straightforward as that but made so much easier with a few lines of CSS 💙 For the parallax effect, you can animate a background-position on the card or the object-position on an img depending on what you go with 🤙

Lastly, you can use this today with progressive enhancement by wrapping your scroll-driven animation code in @​supports and @​media ⚡️ Users without support still get a decent experience!

@CodePen link below! 👇

[jhey ʕ•ᴥ•ʔ @jh3yy]

For some, reduced transparency can aid with readability when consuming content.

With this media query 👇

prefers-reduced-transparency: reduced

You can adjust your CSS accordingly. Take these cards. Instead of reducing transparency, you could also adjust the layout slightly 🤏

Sorry this wasn't clear from the original post 🙏

[60fps @60fpsdesign]

Animated Bento✨

[Nabeel @itsnotnabeel]

seeing alot of designers face issues caculating radii so here's a formula to help y'all out 💙

[Jake Lucky @JakeSucky]

Twitch streamer @perrikaryal is now using her brain to kill people in Halo...

Her head is a gyro for movement, she uses an eye tracker for aiming, and an EEG uses her brain activity to shoot

[Namya @ Supafast @namyakhann]

Web design's hottest trend: Dark mode.

Here're 12 neon shades to make your dark-mode website pop:

[jhey ʕ•ᴥ•ʔ @jh3yy]

Future CSS Tip! 🔮

You can create responsive animated text reveals with CSS scroll-driven animations 🔥

section { /* The red element in the video */
view-timeline-name: --section;
}
p {
animation: fill both linear;
animation-timeline: --section;
animation-range: cover;
}
keyframes fill {
to { --fill: 1; }
}

No JavaScript required with this trick 😎

What's happening there then? Well, we're animating a custom property value using @ property.

@ property --fill {
initial-value: 0;
syntax: '<number>';
inherits: true;
}

Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓

span {
background-position-x:
calc(-100vmax + (var(--progress) * 100vmax));
background-clip: text;
color: transparent;
}

@CodePen link below 👇

[Linus ✦ Ekenstam @LinusEkenstam]

If you think this is creepy…

You should know what all major stores in the world knows about you as a shopper

They use in-store, online, cell-tower, and more to keep track of everything… everything.

Cambridge analytics is a joke in comparison

[Harrison Krank @HarrisonKrank]

BREAKING: Body cam footage of the shooting ambushing Fargo Police officer has been released.

[Inverse Cramer @CramerTracker]

Wow

[Robert Sterling @RobertMSterling]

Please tell me that @elonmusk didn’t submit an unsolicited bid to acquire US Steel, a company with a $5B market cap, just to acquire the $X stock symbol.

[World of Statistics @stats_feed]

Credit rating, S&P:

🇦🇺 Australia: AAA
🇨🇦 Canada: AAA
🇩🇰 Denmark: AAA
🇩🇪 Germany: AAA
🇳🇱 Netherlands: AAA
🇳🇴 Norway: AAA
🇸🇪 Sweden: AAA
🇺🇸 US: AA+
🇦🇹 Austria: AA+
🇫🇮 Finland: AA+
🇫🇷 France: AA
🇦🇪 UAE: AA
🇬🇧 UK: AA
🇰🇷 South Korea: AA
🇮🇪 Ireland: AA
🇪🇪 Estonia: AA-
🇨🇳 China: A+
🇯🇵 Japan: A+
🇮🇸 Iceland: A
🇸🇦 Saudi Arabia: A
🇨🇱 Chile: A
🇪🇸 Spain: A
🇵🇱 Poland: A-
🇲🇾 Malaysia: A-
🇹🇭 Thailand: BBB+
🇮🇹 Italy: BBB
🇮🇩 Indonesia: BBB
🇲🇽 Mexico: BBB
🇮🇳 India: BBB-
🇬🇷 Greece: BB+
🇧🇷 Brazil: BB-
🇿🇦 South Africa: BB-
🇧🇩 Bangladesh: BB-
🇯🇲 Jamaica: B+
🇪🇬 Egypt: B
🇹🇷 Turkey: B
🇳🇬 Nigeria: B-
🇵🇰 Pakistan: CCC+
🇺🇦 Ukraine: CCC
🇦🇷 Argentina: CCC-
🇱🇧 Lebanon: D

AAA: prime
AA: high grade
A: upper medium grade
BBB: lower medium grade
BB: non-investment grade speculative
B: highly speculative
CCC+: substantial risk
CCC: extremely speculative
CCC-: in default with little prospect for recovery
D: in default

[Roshan Patel @roshanpateI]

By the time a man is 27 and works in tech, he must choose a hobby.

These are the only options:
- Formula 1
- Chess
- Pickleball
- Stock trading
- Hiking
- Health optimization / longevity

[Out of Context Human Race @NoContextHumans]

https://t.co/5INgAHoXoy