Tutorial: Adding subtle frosted glass effect #6060
BieleckiLtd
started this conversation in
Show and tell
Replies: 3 comments
-
Thanks :) |
Beta Was this translation helpful? Give feedback.
0 replies
-
This is exactly what I was looking for, thanks! <3 |
Beta Was this translation helpful? Give feedback.
0 replies
-
I added .mud-popover to frosted-glass.css for the MudMenu :
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Mud docs use an engaging, translucent frosted glass effect for its MudAppBar. The below example shows how a similar effect can be achieved in any MudBlazor app. We will change the backgrounds of MudAppBar, MudDialog and MudDrawer to give you an idea.
2022-12-29_21-25-18.mp4
If you like what you see let's learn how to do it.
MainLayout.razor
file add this code at the bottom:Notice that I used default colours, and only changed the last (alpha) value from ff to cc. A list of default colour values can be found in the docs
MudThemeProvider
component in the sameMainLayout.razor
file. We need to tell it to use our new theme:frosted-glass.css
file in your wwwroot/css folder with the following content:Pages\_Layout.cshtml
file and add this line in thehead
section:Experiment with backdrop-filter blur as you wish but consider two things: this lowers accessibility as the foreground will usually have lower contrast and remember to use backdrop filters sparingly as they could have a significant impact on rendering performance! Finally test, test, test in various browsers, especially for mobile.
That's it, let me know if you have any questions. Thanks!
Keywords: acrylic, translucent, frosted glass, semi-opaque, blur
Beta Was this translation helpful? Give feedback.
All reactions