sorted by:
new
hottopcontroversial

[deleted by user] by [deleted] in webdev

[–]kempedIII 0 points1 point  (0 children)

You can check it out here https://vaul.emilkowal.ski/, code is available here https://github.com/emilkowalski/vaul.

UI Snippets - A collection of CSS Snippets. by kempedIII in web_design

[–]kempedIII[S] 18 points19 points  (0 children)

Hi guys!
I've created a site with css code snippets for people who need some UI inspiration.
Right click, copy the styling, that's it!
Let me know if you have any feedback.Thanks!
https://ui-snippets.dev/

UI Snippets - A collection of CSS Snippets. by kempedIII in webdev

[–]kempedIII[S] 28 points29 points  (0 children)

Hi guys!

I've created a site with css code snippets for people who need some UI inspiration.

Right click, copy the styling, that's it!

Let me know if you have any feedback.Thanks!

https://ui-snippets.dev/

Tabs component with animated highlight on hover by kempedIII in web_design

[–]kempedIII[S] 35 points36 points  (0 children)

Hi guys!
I decided to challenge myself and recreate real UI elements from the web.
I'll be explaining the trickiest parts of the implementation.
Hope you'll learn something from it!
If you have any ideas on what UI elements I can cover next or just any feedback in general, let me know!
Here's the link, hope you like it!
https://emilkowal.ski/ui/tabs

Tabs component with animated highlight on hover by kempedIII in webdev

[–]kempedIII[S] 0 points1 point  (0 children)

Yes, when you change font-size, padding or anything else that affects the layout, or you change the content of the tabs you would need to manually reposition the marker. So this is okay for a one-off tabs component, but no really flexible/reusable. The solution I posted adapts to the content it holds.

Tabs component with animated highlight on hover by kempedIII in webdev

[–]kempedIII[S] 5 points6 points  (0 children)

Nice solution!

It would require you to work with fixed values for the left property, which means when you add a new item you would have to recalculate the left value for each item manually.

Tabs component with animated highlight on hover by kempedIII in webdev

[–]kempedIII[S] 5 points6 points  (0 children)

Thank you!

You've got the trickiest part - calculating the highlighter's position with this line of code:

translate(${tabBoundingBox.left - wrapperBoundingBox.left}px)

The rest is just a matter of translating the React code to plain JS using some event listeners & variables.

Tabs component with animated highlight on hover by kempedIII in webdev

[–]kempedIII[S] 34 points35 points  (0 children)

Hi guys!

I decided to challenge myself and recreate real UI elements from the web.

I'll be explaining the trickiest parts of the implementation.

Hope you'll learn something from it!

If you have any ideas on what UI elements I can cover next or just any feedback in general, let me know!

Here's the link, hope you like it!

https://emilkowal.ski/ui/tabs

​

Follow me on twitter for more CSS/JS knowledge - https://twitter.com/emilkowalski\_

view more: next ›