Channel: Elementor

Category: Education

Tags: neumorphiccsswordpressneumorphismsoftuielementorelementor proelemntor

Description: 👋🏼 Help us improve by answering this short survey: elemn.to/survey-time In this tutorial, we’ll learn how to add neumorphic style effects to enhance our website designs in Elementor. As a bonus, we’ll also use CSS code to really add that wow factor. Neumorphism, or soft UI, is a design style that combines highlights and shadows, to make elements look as if they’re emerging from the page. The tutorial will cover: ✔︎ Styling buttons for a soft UI effect ✔︎ Using pre-styled images to complement layouts ✔︎ Using image boxes to style layouts ✔︎ Reusing styles for a more efficient workflow ✔︎ Adding CSS to enhance ✔︎ And much more! CSS Code Snippet: selector { box-shadow: 3px 3px 7px rgba(174, 174, 192, 0.25), -3px -3px 7px rgba(255, 255, 255, 0.7), inset 3px 3px 3px rgba(255, 255, 255, 0.7), inset -3px -3px 3px rgba(174, 174, 192, 0.25); border-radius: 30px; } Don’t forget to subscribe to our channel! Get Elementor: elementor.com Get Elementor Pro: elementor.com/pro Visit the Elementor Academy: elementor.com/academy See Also: Global Styles - youtu.be/CjdFxKPPikU Margin and Padding - youtu.be/YhmwlWb8amY Custom CSS - youtu.be/xv9RjJky720 Chapters: 00:00 - Intro to Neumorphism/Soft UI 01:12 - Neumorphic style with Elementor 03:40 - Using pre-styled images 04:23 - Image boxes 05:50 - Adding a CSS effect