Neomorphism Elementor Pro Tutorial | TemplateMonster
HTML-код
- Опубликовано: 25 авг 2024
- 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
Soon after its appearance on Dribbble, Neumorphism has become one of the most talked-about web design trends 2020. Did you know that it is possible to recreate neumorphism in Elementor? Absolutely! By the way, this is pretty easy and convenient. Watch our Neumorphism Elementor tutorial to get know how to create a neumorphism effect.
Neumorphism looks cool and innovative.
➤ Is it really a new trend?
Actually, it originates from two UI design trends:
1. Skeuomorphism - when designers aimed at making the virtual world more realistic. Nowadays, it may seem to be the past tense. Does anybody miss the realistic leather cover of Apple's Notes?
2. UI Flat design replaced Skeuomorphism. Users loved it for its simplicity and laconism. But we need to admit that we’ve had it up, and Flat design seems quite boring now.
Neumorphism UI design combines realistic elements of Skeuomorphism and minimalism of the Flat design.
➤ Neumorphism UI design looks unique and fresh
✅Neumorphism design components are fulfilled in a single color and have a dark frame shadow. Using darkness transitions, the effect of pushing the elements of UI is created.
✅The user presses the virtual button and seems like he presses the real one. Your button looks cool and even seems to be real. You receive a fancy visual illusion, in an elegant performance.
✅Esthetically attractive soft UI design with the effect of pleasant texture. A user experiences “fresh impressions”. Thus, the site looks airy and isn’t overloaded with extra details. That’s amazing!
➤ When to avoid Neumorphism
📌 Neumorphism UI may be inefficient. Neumorphic buttons might be a problem for a friendly UI. The borders of the button are hardly visible and they are blurred with the background. That may cause particular difficulties for older users, but not only for them. Thus, it is better to make the major buttons in contrast colors with precise boundaries.
📌Keep in mind that the neuromorphic charming effect strongly depends on the quality of its performance. You can notice that while looking through the Neumorphism web designs. With poor design quality, the visual effect gets lost and the aesthetics of the interface suffers. 👇
❗️ All you need is just to copy and paste the ready-made Neumorphism CSS into the Custom CSS field of Elementor and follow a couple of simple steps from our Neumorphism Elementor tutorial.
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;
}
Credits:
Neomorphism by Anatoliy dribbble.com/s...
Neumorphism Cashback App (white version) by Douglas Ramos dribbble.com/s...
~~~~~
Subscribe to our channel to learn more about web design: / templatemonsterco
Follow us on social media:
🔖Facebook / templatemonster
🐦Twitter / templatemonster
📷Instagram / template_monster
📎Pinterest / templatemonster
🏀Dribble dribbble.com/T...
in LinkedIn / templatemonster
Copy and Paste:)
Edit: Ooh, forgot to mention that the background color and the card color was #f5f5f5
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;
}
Pin this
What is the best colors for the same effect with black background? I tryed it but could get a good look
You guys have the best tips and tricks for Elementor. Thanks for this great content! 🙏
Thank you so much for positive feedback!
you can do any custom css with the free version of elementor just add an html widget and CSS GOES HERE simply give your target elements classes and your good to go
Thanks for sharing! :)
Awesome tutorial. Really love that effect.
Thanks a lot!
I'm in love with your design idea
Jump to 4:10 to skip the lecture about Neomorphism 😝
Well, the lecture is an important part, thanks for the tutorial 😁
@@zerosandones7547 You're welcome! We have another one on Neumorphism if you're interested in the topic!
Amazing good explaination
Great example , thanks . 🙏🙏🙏
Thanks. Love this video
Wonderful tutorial, thank you so much.
Cool tutorial! Thanks!
Thank you, Mike!
Pretty cool!
Demn her voice
Getting melted 🤭🤤
Subscribed!
:::))) THANKSSS!!!!
Glad you enjoyed!
I like your tuto!
Glad to hear that!
Freaking amazing, just made my website look from 2200
Nice work!
No meu não deu certo
It's neo morphs ism
Neo as in ",new" reborn" morph as In transform" ism a movement or religion etc.
Amazing!
Thanks, Daniel! Glad you liked it :)
great look! i wanna create post types with cpt ui + acf. can i use this look, to design the frame of the post types?
Hi you must go to sing talent . Your voice is perfect .
the neumorphism website that let's you cut an paste the css code is a lot easier than inspecting elements, and the 100 step process in this tutorial ..Work smarter not harder.
Hello inside the neomorphism since the text is long can you insert a button keep reading?
Is there a way to make the transition to the hover state in the 2nd effect slower? i tried it with transition: all 1s ease; but it didn't work
any ideas?
nice
Hi. I am trying to get this effect working on a header button within an elementor header template. It seems to be working fine in the hover state, but no matter what I change in the normal state, it won't show the norma state as it is suposed to... any ideea on this?
Wow
does this alter in dark mode? if not how can I make a dark version of it?
Hello mam , please make a tutorial for WooCommerce site. Please 🙏
How to add in my e-commerce website
I like this ui but it needs to be more fleshed out.
And for free elementor you can use HTML vijet. To insert there div within text. And then to stylish it via style="box-shadow:...
." Am I right?
Yeah, pretty much, as far as I'm aware, you can use HTML widget in Elementor Free, and just copy and paste the box-shadow styles, but replace "selector" with the class name of the element you want to target.
But I haven't tested it myself with this particular one, so I'll need to check and will get back to you with the results.
@@templatemonster by the way I have found that in theme Astra it has custom CSS. So no it's no need to buy elementor pro. n1creative.design/%d7%a9%d7%90%d7%9c%d7%95%d7%9f-%d7%9c%d7%9c%d7%a7%d7%95%d7%97/ for example I created this telephone via it.
i want to click on all of them i dont get your point
Waoooo
Hi! im a user Mac. F12 in Mac with is? thank you!
Hey! Sorry, my bad, didn't include it in the video.
On a Mac, it's Ctrl+Option+J, or just right click on the page and select "Inspect".
TemplateMonster THANK you!
Isn't this effect - neumorphism?