How to Create a Claymorphism Effect in Elementor
👋🏼 Help us improve by answering this short survey: http://elemn.to/survey-time
In this tutorial we’ll learn how to create a claymorphism effect using Elementor. As an added bonus, we’ll teach you two ways to achieve this. The first natively in Elementor, and the second using custom CSS.
Claymorphism is a technique used to give your website elements an effect of depth and it is achieved by combining two shadows. It kinda looks like clay and therefore is named claymorphism.
The tutorial will cover:
✔︎ Applying Claymorphism to shapes
✔︎ Applying Claymorphism to buttons
✔︎ Adding custom CSS for further enhancements
✔︎ Using CSS classes for efficiency
✔︎ And much more!
CSS Code Snippets:
selector .elementor-widget-container{
box shadow: inset 10px 10px 15px #F1FCE3, box shadow: inset -10px -10px 30px #BCD39C;
}
clay .elementor-widget-wrap{
background-color: #fff;
box-shadow: inset 10px 10px 15px #F1FCE3, inset -10px -10px 20px #A9C682, 10px 10px 20px #1F688C42;
}
Don’t forget to subscribe to our channel!
Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro
Timestamps:
00:00 Introduction
00:45 Get started
00:55 Add Claymorphism to shape
01:49 Add Claymorphism with CSS
02:29 Use CSS classes for efficiency
03:45 Add Claymorphism to a button
Видео How to Create a Claymorphism Effect in Elementor канала Elementor
In this tutorial we’ll learn how to create a claymorphism effect using Elementor. As an added bonus, we’ll teach you two ways to achieve this. The first natively in Elementor, and the second using custom CSS.
Claymorphism is a technique used to give your website elements an effect of depth and it is achieved by combining two shadows. It kinda looks like clay and therefore is named claymorphism.
The tutorial will cover:
✔︎ Applying Claymorphism to shapes
✔︎ Applying Claymorphism to buttons
✔︎ Adding custom CSS for further enhancements
✔︎ Using CSS classes for efficiency
✔︎ And much more!
CSS Code Snippets:
selector .elementor-widget-container{
box shadow: inset 10px 10px 15px #F1FCE3, box shadow: inset -10px -10px 30px #BCD39C;
}
clay .elementor-widget-wrap{
background-color: #fff;
box-shadow: inset 10px 10px 15px #F1FCE3, inset -10px -10px 20px #A9C682, 10px 10px 20px #1F688C42;
}
Don’t forget to subscribe to our channel!
Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro
Timestamps:
00:00 Introduction
00:45 Get started
00:55 Add Claymorphism to shape
01:49 Add Claymorphism with CSS
02:29 Use CSS classes for efficiency
03:45 Add Claymorphism to a button
Видео How to Create a Claymorphism Effect in Elementor канала Elementor
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Create Vibrant Gradient Backgrounds in Elementor](https://i.ytimg.com/vi/xnhx_8M8Ovk/default.jpg)
![Introducing Elementor 3.6: Pixel-Perfect & Lean Responsive Designs with Flexbox Containers!](https://i.ytimg.com/vi/iRAeFQLM2Fw/default.jpg)
![Improve Your Elementor Skills by Avoiding 6 Common Mistakes - Monday Masterclass](https://i.ytimg.com/vi/btuTznwQYGM/default.jpg)
![⚡ Create a Sticky Scrolling Effect Using Elementor](https://i.ytimg.com/vi/pQGPBCta4Ac/default.jpg)
![Build a Landing Page with Elementor: Step-by-Step](https://i.ytimg.com/vi/XjS-vPXblpk/default.jpg)
![](https://i.ytimg.com/vi/IZr_K2Lv9I4/default.jpg)
![[01] Layout Optimization Best Practice](https://i.ytimg.com/vi/vBAKGupM0co/default.jpg)
![Live Show! - Elementor 3.6 Flexbox](https://i.ytimg.com/vi/BJr5RjzP9-A/default.jpg)
![How to Use Custom Positioning Units For Best Mobile Responsive Behavior](https://i.ytimg.com/vi/x5mrXwfavU0/default.jpg)
![How to Transform Any WordPress Site Into an Online Store With Elementor](https://i.ytimg.com/vi/BX57j0HcCIM/default.jpg)
![Do's & Don'ts: Absolute & Fixed Position in Elementor](https://i.ytimg.com/vi/RA0T52VB2Os/default.jpg)
![Bring a Character to Life in Elementor](https://i.ytimg.com/vi/buMv5cx1Aso/default.jpg)
![How to Use the Progress Tracker Widget in Elementor [PRO]](https://i.ytimg.com/vi/vaD8sLjdyQk/default.jpg)
![Create a Popup Text Path Menu with a Hover Image Effect in Elementor [Advanced PRO]](https://i.ytimg.com/vi/ro8S69VE7Bk/default.jpg)
![[05] Building the Homepage in Elementor](https://i.ytimg.com/vi/LjQptEShDJo/default.jpg)
![Elementor Button Hover Fill Effect With Custom CSS | Elementor Pro CSS Tutorial](https://i.ytimg.com/vi/bh_lASwY3UY/default.jpg)
![How to Use Additional Custom Breakpoints](https://i.ytimg.com/vi/i1yTLQ9R-Yw/default.jpg)
![[04] Website Essentials: Layout, Header & Footer](https://i.ytimg.com/vi/KKnFuAWtvk0/default.jpg)
![Create a Color Changing Sticky Header Without Code in Elementor [PRO/CLOUD]](https://i.ytimg.com/vi/PJp87rmeLcI/default.jpg)
![How to display posts in Elementor Pro with your own Design (Elementor Custom Loop)](https://i.ytimg.com/vi/F7QRFgw4DCo/default.jpg)