Create Inverted border-radius Card In Elementor | Elementor Flexbox Container
Vložit
- čas přidán 29. 08. 2024
- In this Tutorial am going to show you how to create Inverted border-radius Card In Elementor with the use of Image Masking, SVG, or CSS Code, With the knowledge you acquire from this you can create Wonderful Modern layouts and responsive cards.
This Tutorial was inspired by Frank Tielemans and Muhammad Irshad of Online Tutorials
Check out other Videos
Create This Unique CARD With a Show More Content Effect on HOVER | Elementor Flexbox | CSS Tips 2024 • Create This Unique CAR...
Elementor LOOP Tutorial: How to DISPLAY a Different PRODUCT Image on HOVER | No Code Required • Elementor LOOP Tutoria...
#elementor #wordpresstutorial
11:01 This is Cool thank you
Thanks for such useful information!
thank you fort his
why dont you use mask for container background? Its much easyer. Its like this if you use background overlay:
selector::before{
mask-image: url(/Union-1.svg);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center center;
}
You can make any mask in figma in 30 sec, just put some blocks, make radius and then union blocks, make radius of union)
that is one way of doing it and this is another way of doing it as well, more over not everybody knows how to use figma or photo editing software, so there will have to learn it before being able to create thier design shapes
Thanks for this tutorial. I noticed when you hover on a container selector it expands and provide two more options to duplicate and add. I don’t have that for my elementor by default, how do I get it to work?
ok it s simple on your elementor editing screen you click on the hamburger icon at the top left then goto user preference then toggle the Editing Handles option to yes and update. your editing screen will refresh and the option added
you can watch this short clip i did concerning that czcams.com/users/shortsT1-tQLFCwW8
@@thecreativarena thanks so much, this was really helpful