You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Achieving a glass effect is very simple nowadays: Apply a blur effect and an optional saturate effect on a block element's backdrop and that has a semi-transparent background.
The "hard" part for us consumers of unmodified Bootstrap or already-modified Bootstrap (for instance, my company has a customized version that I'm not supposed to touch) is setting the partial opacity in the background color. My limited knowledge tells me that this should be defined early in the Bootstrap-building process where the RGB or HSL values are available.
My proposal would be for Bootstrap to provide at least the dropdown-menu-glass CSS class that switches to the semi-transparent background color (whichever that is, including the ones set using bg-<variant>) and applies the backdrop-filter CSS attribute. The blur radius and saturation percentage would come from data-bs- attributes, or perhaps overridable CSS variables that us consumers and component library creators can define in, say DIV elements with its display CSS attribute set to contents.
NOTE: The d-contents helper class doesn't exist in Bootstrap, so it would have to be defined.
I am no expert in Bootstrap, so unsure if interjecting the DIV.d-contents HTML element disrupts the dropdown CSS mechanisms.
Motivation and context
While this might be possible for Bootstrap experts to achieve, us mainstream developers would have a very hard time achieving this glass effect in a way that is fully compliant with all other Bootstrap features like the text-bg-* and bg-* classes, or any other background color-related features in this comprehensive CSS library.
The text was updated successfully, but these errors were encountered:
Thanks, @morrissey-ingenious for dropping by and your suggestion. Indeed, the information piece I missed was the fact that the color opacity can be worked out via the CSS variable. This makes the implementation easier for sure. My sincere gratitude.
I'll leave the decision of closing this to you: Maybe glass is a cool thing Bootstrap would like to have? If not, close the request.
IMHO, this would be too specific to add to Bootstrap as it could be done from "outside". I would add that glass effect can probably also be tricky on the a11y side.
Assigning this feature request to @mdo for a design point of view and final word.
Prerequisites
Proposal
Achieving a glass effect is very simple nowadays: Apply a blur effect and an optional saturate effect on a block element's backdrop and that has a semi-transparent background.
The "hard" part for us consumers of unmodified Bootstrap or already-modified Bootstrap (for instance, my company has a customized version that I'm not supposed to touch) is setting the partial opacity in the background color. My limited knowledge tells me that this should be defined early in the Bootstrap-building process where the RGB or HSL values are available.
My proposal would be for Bootstrap to provide at least the
dropdown-menu-glass
CSS class that switches to the semi-transparent background color (whichever that is, including the ones set usingbg-<variant>
) and applies thebackdrop-filter
CSS attribute. The blur radius and saturation percentage would come fromdata-bs-
attributes, or perhaps overridable CSS variables that us consumers and component library creators can define in, sayDIV
elements with itsdisplay
CSS attribute set tocontents
.Using data attributes:
Using CSS variables:
NOTE: The
d-contents
helper class doesn't exist in Bootstrap, so it would have to be defined.I am no expert in Bootstrap, so unsure if interjecting the
DIV.d-contents
HTML element disrupts the dropdown CSS mechanisms.Motivation and context
While this might be possible for Bootstrap experts to achieve, us mainstream developers would have a very hard time achieving this glass effect in a way that is fully compliant with all other Bootstrap features like the
text-bg-*
andbg-*
classes, or any other background color-related features in this comprehensive CSS library.The text was updated successfully, but these errors were encountered: