Skip to content

Polishing the window glass effect#82

Merged
khang-nd merged 4 commits intokhang-nd:mainfrom
hohaicongthuan:dev-glass-stripes
Oct 27, 2023
Merged

Polishing the window glass effect#82
khang-nd merged 4 commits intokhang-nd:mainfrom
hohaicongthuan:dev-glass-stripes

Conversation

@hohaicongthuan
Copy link
Contributor

Add the glass stripes/reflection effect.

It's not an exact replica but I think it's close enough.

I've also put together a small demo here with draggable windows.

@vercel
Copy link

vercel bot commented Oct 23, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
7css ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 26, 2023 10:09am

@hohaicongthuan
Copy link
Contributor Author

Also, should I make those glass stripe effects optional? Because, on second thought, that's a lot of gradients, some low-end and mobile devices might have difficulty rendering those.

@khang-nd khang-nd linked an issue Oct 23, 2023 that may be closed by this pull request
Copy link
Owner

@khang-nd khang-nd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is solid work @hohaicongthuan, super impressed 🤯 But as we can notice some performance drawbacks, let's keep these gradients in a utility class (maybe chuck them in the same .glass class) so users can opt-in if they want to experience the glass reflection effect.

@hohaicongthuan
Copy link
Contributor Author

Okay, I've moved it to the .glass class. I've also made these windows wider to make the glass effects more noticeable.

Screenshot_20231026_133538

Copy link
Owner

@khang-nd khang-nd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, thanks mate 👍

@khang-nd khang-nd changed the title Resolve #30 Polishing the window glass effect Oct 27, 2023
@khang-nd khang-nd merged commit 0dc850d into khang-nd:main Oct 27, 2023
@hohaicongthuan hohaicongthuan deleted the dev-glass-stripes branch October 28, 2023 03:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

properly style the aero stripes/glass reflection effect

2 participants