Como criar efeito de VIDRO DESFOCADO no Figma e no Elementor [apenas com CSS]

Creating a Blurred Glass Effect in Figma and Elementor

Introduction to the Tutorial

• Marcelo Rocha introduces himself as a designer and welcomes viewers to learn how to create a blurred glass effect using Figma and Elementor. He emphasizes the simplicity of the effect while highlighting its aesthetic appeal.

• Marcelo invites viewers to follow his channel for more content on website creation and sales, aiming to help them achieve monthly earnings of $10,000 through web design.

Creating the Effect in Figma

• The tutorial begins with Marcelo opening Figma, where he plans to recreate the blurred glass effect. He starts by creating a rectangle shape that will serve as the container for the effect.

• He suggests using either light or dark colors for better visibility; in this case, he chooses a darker blue shade with 50% transparency.

• To enhance aesthetics, he rounds the corners of the rectangle by setting a radius of 50 pixels and adds a stroke with a lighter blue color for contrast against the background.

Applying Blur Effects

• Marcelo explains that adding effects is crucial; he navigates to "Effects" in Figma to apply a "Background Blur," which blurs only what’s behind the object.

• He discusses adjusting blur levels (suggesting around 10-15 for usability), noting that higher blur levels may require more processing power from users' devices.

Understanding Layer vs Background Blur

• The difference between "Background Blur" (blurring only background elements) and "Layer Blur" (which blurs everything including the object itself) is clarified.

• Marcelo demonstrates how both types can be applied within Figma before moving on to replicate this effect in Elementor.

Transitioning to Elementor

• After confirming that his design is complete in Figma, he prepares to implement it in Elementor. He mentions adding text ("desfoque") centered within his design for demonstration purposes.

• In Elementor, he sets up an empty container as a background image before organizing layers effectively by renaming containers for clarity.

Replicating Dimensions from Figma

• Marcelo details how to adjust container dimensions in Elementor based on those used in Figma (905px width x 321px height).

• He explains how to set these dimensions accurately within Elementor's settings while ensuring proper alignment of all elements involved.

Setting Up Container Dimensions in Elementor

Defining Width and Height

• The width of the container is set, while the height is defined as 320 pixels to match the design specifications from Figma.

• The border radius is adjusted to 50 pixels, which rounds the corners of the container. This property is referred to as border-radius in CSS.

Background Color and Transparency

• A background color is applied using a classic background setting; however, it initially appears non-transparent due to a 50% opacity setting.

• To ensure precise transparency levels, RGBA values are used where 'A' represents alpha (transparency). For 50% transparency, an alpha value of 0.5 must be used instead of a comma.

Applying Borders and Effects

Border Settings

• A solid border with a width of one pixel is added using the same color as previously defined. Adjustments can be made for thicker borders if desired.

Adding Blur Effect

• To apply a blur effect, custom CSS code is introduced via advanced settings. The syntax includes backdrop-filter: blur(10px);.

• The level of blur can be modified by changing the pixel value; for instance, increasing it from 10 pixels to 50 pixels enhances the blurriness.

Ensuring Cross-Browser Compatibility

Additional Code for Compatibility

• To ensure that effects work across different browsers like Safari and Firefox, additional webkit-prefixed code should be included alongside standard CSS rules.

Finalizing Text Elements

Text Customization

• A title text element is added with specific styling: white color and font size set at 80 pixels to match design consistency.

Centralizing Content

• Padding within child containers is removed for better alignment and centralization of elements on the page.

Advanced Blurring Techniques

Full Object Blur Application

CSS Effects and Techniques

Understanding Container Filters

• The child container's properties affect all objects within it, including filters like backdrop-filter which can create a blur effect.

• To ensure compatibility across browsers, it's recommended to use the -webkit-backdrop-filter property alongside standard CSS.

Using CSS Pgas for Visual Effects

• The website CSS Pgas allows users to visually create effects by adjusting parameters such as color transparency and blur levels.

• Users can manipulate the outline visibility and generate corresponding CSS code automatically, enhancing user experience in design.

Copying and Implementing Generated Code

• After generating the desired effect on CSS Pgas, users can copy the generated CSS code directly into their project.

• If the copied color does not match expectations due to existing element styles, adjustments may be necessary to maintain visual hierarchy.

Managing Element Styles and Hierarchy

• The hierarchy of styles means that certain defined properties (like border radius from Elementor) may override custom CSS settings unless explicitly adjusted.

• Users have control over shadow effects through properties like box-shadow, allowing for customization of shadow position and visibility.

Finalizing Design Choices

• Adjustments to shadow positioning can be made by altering values in the box-shadow property for both X and Y axes.

• Users are encouraged to manage style definitions either through direct CSS or via design tools like Elementor based on personal preference.

Conclusion: Enhancing Visual Appeal with Simple Techniques

• Proper organization of code enhances readability; using indentation helps clarify relationships between elements in complex designs.