Nostr Web Client

Redoing the line-up section of nostr:nprofile1qy2hwumn8ghj7un9d3shjtnddaehgu3wwp6kyqpqhw35le8cl3un6mzw769xzrmjwpg2dt9y4wzhcyg38f0hnmpmy38qltdg85 with a cool hover effect! 🤩

Demo: https://codepen.io/t_afif/full/raNNbyG via :codepen: nostr:nprofile1qy2hwumn8ghj7un9d3shjtnddaehgu3wwp6kyqpq9qceztjxtkkj8qd6d5x0ya3r9whzyu9yljdv0f6jw8y8v704dxmq3xnmhh

Psst, there is no keyframes in the code! Can you guess how it's done?

#CSS #HTML

https://cdn.masto.host/frontendsocial/media_attachments/files/113/990/991/284/652/833/original/255c4b3c8a5f8531.mp4

Replying to

Matthias Ott

🤔 I’m preparing my #CSSDay talk at the moment and I’d be glad to hear your thoughts:

In which areas do you see the most potential for innovative web design when it comes to the latest and greatest #CSS features?

Like, which CSS features would you recommend a designer (or developer) to learn who wants to create outstanding work for the Web in 2024? ✨

71

714c2ce1... 1y ago

nostr:npub1kw7zkq047pwh8zqqsf4sj7vdx6fvct8l89zzdjn4z97k64c4w6vss0mwjd for designers, CSS mask is a powerful tool especially when you master the mask-composite property.

Replying to

Eric A. Meyer

So I boiled my problem down a simplified test case and it’s still driving me bonkers — the more so because Gecko does what I expect, but Chromium and WebKit do not. In those two, when the rendering window gets short (that is, not much height), the `canvas` element overflows its grid row, despite being set to `height: 100%`. In Gecko, it always stays within its grid row, as I want it to do. Nor can I find a way to get the Gecko behavior across the board. Argh!

https://codepen.io/meyerweb/pen/eYQXERZ?editors=1100

71

714c2ce1... 2y ago

nostr:npub1c353w465eg94sjctq7kh03f9zajjqqsg9wzmg20gc8tvqwm6u54sm89pmh you are probably looking for min-height:0 on the canvas element?

Profile: 714c2ce1...