"I took up dave's piece of advice & decided to have a go at the css code (with (+) results). After watching some Youtube tutorials & reading your other markups, I made an attempt to apply the glassmorphism b/g on the 'Title section' of a listing page. Browser Inspect console screenshot ( showing the element on which the code is applied) CSS code snippet: .elementor-column.elementor-col-50.elementor-top-column.elementor-element.elementor-element-295fbbff { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 0.1); }"
"CSS code snippet: .elementor-column.elementor-col-50.elementor-top-column.elementor-element.elementor-element-295fbbff { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 0.1); } My qtns: How can I show a space ( gap ) btwn the logo & the container ? When I select a different element (higher up in the hierarchy) & apply the GM B/G why does the section become blank ? Cheers"
Glassmorphism background was applied to a Title section using CSS: a semi-transparent white background, a 3px backdrop blur, and a faint white border. Browser Inspect was used to target an element identified by an Elementor class name. The CSS snippet shows background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 0.1). The goal is to create spacing between a logo and its container. Applying the glassmorphism to a higher-level element caused the section to render blank, suggesting issues with stacking context, backdrop-filter support, or lack of an underlying backdrop.
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]