Soren

@sorenblank • 7,182 subscribers

design eng

Shorts

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }

1,188,369 görüntüleme

prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs. but it's not the same for most web-based dropdown menus. it took me a while to implement this here. Amazon, macOS, Windows all implement some version of this.

prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs. but it's not the same for most web-based dropdown menus. it took me a while to implement this here. Amazon, macOS, Windows all implement some version of this.

1,272,455 görüntüleme

for such case where the request is almost instant ( <100ms ), jumping directly to a `success state` is much more cleaner than adding artificial delay imo. imo loading states are generally ambiguous and means nothing without a proper `success state`.

for such case where the request is almost instant ( <100ms ), jumping directly to a `success state` is much more cleaner than adding artificial delay imo. imo loading states are generally ambiguous and means nothing without a proper `success state`.

888,580 görüntüleme

"w/o prediction cone" VS "w/ prediction cone"

"w/o prediction cone" VS "w/ prediction cone"

434,033 görüntüleme

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

425,540 görüntüleme

motion should be dynamic — adapting to the interaction instead of playing the same fixed values every time. in this example the pill's stretch and blur scale with how fast it travels. Apple takes dynamic motion to the extreme with liquid glass ui. it's too much for my liking.

motion should be dynamic — adapting to the interaction instead of playing the same fixed values every time. in this example the pill's stretch and blur scale with how fast it travels. Apple takes dynamic motion to the extreme with liquid glass ui. it's too much for my liking.

38,304 görüntüleme

do you click on `mailto` links? maybe some of you do. but i’ve seen many ( me included ) prefer to just copy the email address instead. this impl satisfies both groups: – click the email address for the `mailto` link – or click the icon to copy to clipboard

do you click on `mailto` links? maybe some of you do. but i’ve seen many ( me included ) prefer to just copy the email address instead. this impl satisfies both groups: – click the email address for the `mailto` link – or click the icon to copy to clipboard

126,621 görüntüleme

ever seen these small dead zones in a list of closely stacked elements? im seeing this more often. this can be easily fixed using css `::before` pseudo element on each element: ::before { content: ""; position: absolute; inset: -10px 0; /* extends 10px vertically */ }

ever seen these small dead zones in a list of closely stacked elements? im seeing this more often. this can be easily fixed using css `::before` pseudo element on each element: ::before { content: ""; position: absolute; inset: -10px 0; /* extends 10px vertically */ }

78,626 görüntüleme

here's how I optimized video assets on my site and improved perceived performance: - added a tiny ( ~30px wide ) `base64` encoded blurred inline image for each snippet, rendered as an underneath the video ( renders instantly! ) - moved all the videos to Cloudflare CDN. previously was using Next.js `/public` local path. which was fine when I had only 2-3 videos - added both `.webm` and `.mp4` formats via elements ( .mp4 as fallback in case browser doesn't support )

here's how I optimized video assets on my site and improved perceived performance: - added a tiny ( ~30px wide ) `base64` encoded blurred inline image for each snippet, rendered as an underneath the video ( renders instantly! ) - moved all the videos to Cloudflare CDN. previously was using Next.js `/public` local path. which was fine when I had only 2-3 videos - added both `.webm` and `.mp4` formats via elements ( .mp4 as fallback in case browser doesn't support )

70,490 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

in this effect, im using `PointerEvent` to get the cursor position. then calculating a progress value (0 to 1) based on where your cursor is relative to the book's spine. each page then uses `calc()` to multiply its target rotation by the progress.

in this effect, im using `PointerEvent` to get the cursor position. then calculating a progress value (0 to 1) based on where your cursor is relative to the book's spine. each page then uses `calc()` to multiply its target rotation by the progress.

266,898 görüntüleme • 8 ay önce

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

184,261 görüntüleme • 8 ay önce

been thinking of making this since i saw Seb Cornelius's post. the static hover book is a pure css approach. no javascript used here. each page has a fixed rotation defined to it. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).

been thinking of making this since i saw Seb Cornelius's post. the static hover book is a pure css approach. no javascript used here. each page has a fixed rotation defined to it. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).

146,070 görüntüleme • 8 ay önce

oh gosh im so dumb! thanks jhey ʕ•ᴥ•ʔ! this is better ngl. in my prev impl i was trying to make the effect using css `translate-z` to create depth, perspective on container, and varied circle sizes. in this implementation, it uses 2D X/Y translation only. no Z-axis for the rings.

oh gosh im so dumb! thanks jhey ʕ•ᴥ•ʔ! this is better ngl. in my prev impl i was trying to make the effect using css `translate-z` to create depth, perspective on container, and varied circle sizes. in this implementation, it uses 2D X/Y translation only. no Z-axis for the rings.

143,654 görüntüleme • 8 ay önce

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.

97,796 görüntüleme • 6 ay önce

the sidebar icon now matches the state or the state it will go to. thanks jhey ʕ•ᴥ•ʔ :3

the sidebar icon now matches the state or the state it will go to. thanks jhey ʕ•ᴥ•ʔ :3

133,722 görüntüleme • 9 ay önce

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

119,817 görüntüleme • 8 ay önce

using `DeviceOrientationEvent`.

using `DeviceOrientationEvent`.

56,002 görüntüleme • 8 ay önce

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

21,757 görüntüleme • 8 ay önce

Daha fazla içerik yok.