Neomorphism Elementor Pro Tutorial - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Template Monster Video: Neomorphism Elementor Pro Tutorial.
Neomorphism effect is one of the most talked-about web design and UI trends in 2020.
Is it possible to recreate in Elementor? Absolutely! Elementor Pro allows you to add custom CSS code to your elements, and this is the feature that is going to help us construct this trendy neomorphic look. Tune in!

• Timestamps:
1:15 - What is Neomorphism?
1:44 - The components of neomorphism
2:42 - When to avoid neomorphism
4:10 - How to create the 1st effect
8:33 - How to create the 2nd effect

#neomorphism #softui #ElementorTutorial

The background and object color in this video: #f5f5f5;

HERE GOES THE CODE:

1st effect •

.your-class {
-webkit-box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

-moz-box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

}

.your-class:hover {
-webkit-box-shadow:
15px 15px 20px rgba(0,0,0,0.1),
-15px -15px 20px #fff;

-moz-box-shadow:
15px 15px 20px rgba(0,0,0,0.1),
-15px -15px 20px #fff;

box-shadow:
15px 15px 20px rgba(0,0,0,0.1),
-15px -15px 20px #fff;

}

2nd effect •

.your-class {
-webkit-box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

-moz-box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

}

.your-class:hover {
-webkit-box-shadow:
inset 10px 10px 20px rgba(0,0,0,0.05),
inset -15px -15px 20px #fff;

-moz-box-shadow:
inset 10px 10px 20px rgba(0,0,0,0.05),
inset -15px -15px 20px #fff;

box-shadow:
inset 10px 10px 20px rgba(0,0,0,0.05),
inset -15px -15px 20px #fff;

}

~~~~~

Subscribe to our channel to learn more about web design: https://www.youtube.com/user/TemplateMonsterCo/

Follow us on social media:
•Facebook https://www.facebook.com/TemplateMonster/
•Twitter https://twitter.com/templatemonster
•Instagram https://www.instagram.com/template_monster/
•Pinterest https://www.pinterest.com/templatemonster/
•Dribble https://dribbble.com/TemplateMonster/
in LinkedIn https://www.linkedin.com/company/templatemonster/

Published: Monday, February 24, 2020 10:45 PM
Category: Template Monster

82 Views

Related Videos

Popular
Elementor WordPress Tutorial (2019) - A Complete Elementor Page Builder For WordPress Tutorial

by Best Webhosting Added 4 years ago 125 Views / 0 Likes

ELEMENTOR FOR BEGINNERS This complete Elementor for WordPress tutorial for 2019 covers all the steps needed to create your own Elementor website for free from start to finish with no html, css, javascript, or any other web coding experience. The course shows you how to acquire web hosting, install WordPress for free, install themes for free, then install the best WordPress page builder, Elementor page builder for WordPress plugin. Plus you will create
Elementor Theme Builder Tutorial [Elementor PRO Tutorial]

by Best Webhosting Added 4 years ago 80 Views / 0 Likes

Get Elementor PRO: https://www.darrelwilson.com/elementor The theme builder for elementor allows you to make custom headers, customer footers, post templates, and much more for your wordpress website. The theme builder for elementor is only available in the pro version so make sure to grab a copy. Elementor eCommerce Theme Builder Tutorial: Coming In 3 Days Thanks for watching! i hope this was helpful for you in learning how to use the elementor theme
Popular
5 Free Elementor Add-ons | Best Free Plugins for Elementor. Elementor Addon. Elementor Tutorial

by Best Webhosting Added 4 years ago 110 Views / 0 Likes

Looking for FREE Elementor Add-ons to expand the possibilities of this already amazing Page Builder? • Check out this list of 5 Free Elementor Addons and watch our unbiased review! • Get these 5 Free Elementor Add-on Plugins! Follow the links below! • FREE Elementor WordPress Theme: https://www.templatemonster.com/wordpress-themes/tourizto-lite-travel-company-elementor-wordpress-theme-79863.html BONUS: Get the premium paid Elementor Addons almost for
Elementor Tutorial (+ Elementor Pro!) For WordPress: Quick Basics Overview June 2021

by Best Webhosting Added 1 year ago 16 Views / 0 Likes

Elementor Tutorial (+ Elementor Pro!): Quick Basics Overview June 2021 ELEMENTOR & ELEMENTOR PRO: https://wpventure.com/elementor In this video we'll be going over a basic Elementor Tutorial and Elementor Pro Tutorial for WordPress. We'll review what Elementor is and what you can do with it. We'll give a quick overview of how to actually use Elementor to build a WordPress website quickly and easily. We'll also quickly review Elementor Pro and what add
Elementor Tutorial - 3 Easy Ways To Add Parallax Scrolling Effect To Elementor Sections

by Best Webhosting Added 4 years ago 99 Views / 0 Likes

People love their parallax effect and in this video, I am going to show you how to add it to your Elementor designs... Ok so there are 3 different ways to do this until Elementor adds it themselves: - http://snifflevalve.com/tutorials/elementor-parallax-section-background-image/ - https://wordpress.org/plugins/granular-controls-for-elementor/ - https://shop.namogo.com/elementor-extras/extensions/parallax-elements/ On a side note, I am not really a par
Gradient Button Elementor Tutorial | Elementor FREE, NO Plugins Or Add-Ons, SUPER Easy

by Best Webhosting Added 4 years ago 87 Views / 0 Likes

In this video, you'll learn how to create gradient button in Elementor WITHOUT any extra add-ons or plugins. This tutorial is SUPER beginner-friendly, you'll be able to recreate it in 2 minutes! Visit Elementor Marketplace •https://www.templatemonster.com/elementor-marketplace/ •️•️•️If you want more AWESOME tutorials like this, Subscribe to our channel: https://www.youtube.com/user/TemplateMonsterCo/ Follow us on social media: •Facebook https://www.f
Popular
Change Lightbox Settings in Elementor Page Builder. Elementor tutorial. TemplateMonster

by Best Webhosting Added 4 years ago 114 Views / 0 Likes

Learn how you can change the default Lightbox Settings in Elementor Editor. This tutorial is relevant for the Elementor Page Builder version 2.6 and the nearest later releases. Get the Best Elementor Themes, Templates and Add-ons: • https://www.templatemonster.com/elementor-marketplace/ Get Monstroid2 Modular Constructor Elementor WordPress Theme: • https://www.templatemonster.com/wordpress-themes/monstroid2.html • Subscribe to ONE by TemplateMonster,
UNDO CHANGES IN ELEMENTOR WEBSITE BUILDER How To Use Elementor WordPress Plugin Revisions Tutorial

by Best Webhosting Added 1 year ago 20 Views / 0 Likes

In today's video tutorial we'll learn how to undo changes or go back to earlier versions of your pages using Elementor website builder WordPress plugin revisions in a simple, fast and effective method. Download WordPress Themes https://visualmodo.com/ WORDPRESS REVISIONS: Learn How To Undo Changes & Go Back to an Earlier Version of Posts / Pages? https://www.youtube.com/watch?v=_M3IcCEzEmE How To Create A Custom Slider In WordPress For Free? Borderles
Efeito INCRÍVEL de Cartão Mágico com Elementor, Tutorial WordPress Elementor Pro, Truques

by Best Webhosting Added 1 year ago 24 Views / 0 Likes

🏆 Vou te ensinar como criar cards (cartões) mágicos com bordas brilhantes usando CSS no elementor pro, tudo passo a passo. ----- LINKS IMPORTANTES ----- ✔ Download CSS: https://mesaquemota.com.br/videos/efeito-elementor-bordas-magicas/ 🚀 Hospedagem 90% Off + 7% Off com Cupom: MESAQUEMOTA: https://urlaki.com/hostngr 💎 Grupo Vip Telegram: https://urlaki.com/wpx-canal-telegram 🚩 Elementor PRO + desconto: https://urlaki.com/elementor 🔑 Curso Elementor + L
Elementor Cloud Tutorial | Webhosting, Elementor Pro, Domain & Email Account

by Best Webhosting Added 1 year ago 17 Views / 0 Likes

Learn how to set up a website using Elementor Cloud. In this Elementor Cloud tutorial, I show you how to get Elementor Cloud, how to set up your website that includes Elementor Pro, add a custom .COM domain, and make use of an external email hosting provider. Get Elementor Cloud: https://ferdykorp.com/cloud When you apply everything I teach in this tutorial you will have an Elementor Pro website with a custom domain name and your custom email account
Elementor Complete Tutorial 2019 - Build a Full Website with Elementor

by Best Webhosting Added 4 years ago 79 Views / 0 Likes

In today's mega tutorial, I am going to show you how to use Elementor page builder plugin to build a full one page website for a fictional company. This fictional company is titled 'The White Hat Hackers' and is a company that specializes in cyber security. We are going to build a website promoting this company first by using the free version of Elementor. We will then use Elementor Pro to enhance the design of the website in part 2. If you want to us
Overlapping Sections + Sticky Header and Footer with Elementor Pro. Elementor pro tutorial

by Best Webhosting Added 4 years ago 99 Views / 0 Likes

Create an overlapping sections effect alongside with a sticky header and a sticky footer, which is revealed once you scroll to the bottom of the page. The sticky functionality available in Elementor Pro allows you to design creative layouts with a modern and sophisticated look by using sticky sections, sticky headers, and sticky footers. Want to get hundreds of premium Elementor WordPress Themes, Templates and Plugins at only $19/month? • Subscribe to