Hey guys! In this video, we're gonna be
exploring something new and trendy and
this is the effect called Neomorphism. So in this video, we're going to
recreate these two particular layouts
with these two different Neomorphistic
looks and I'm gonna show you how I
applied them using Elementor Pro. So, if
you are using Elementor free, well bad
news! :( But for Elementor Pro users there
is a super easy way to apply this effect
for your layout for your elements!
But we're gonna be using some custom CSS, so there are no setting in the Elementor
editor that allows you to do that. This
is why we're going to need to apply some
custom CSS, but all that we'll be using
is only a box shadow. Box shadow is
supported across all the browsers, but if
you want to make sure that you also
provide the same experience for the
users with older versions of some
browsers, you can also use mods and
WebKit prefixes for your code! And all of
the code snippets are going to be
available in the description section or
in the comments. Anyways, you can simply copy and paste it in your own editor.
Now, for those of you who haven't heard of this trend, let's actually have a look at
what it is, and what it looks like, and
what it'll started with. Well, actually,
this trend started on Dribbble, and it all
started from there - all designers started
picking it up, and making some concept
designs using this, using this particular
look, and a lot of people DO like it,
but even more people DO see a huge
problem with these kind of look because
of how little contrast it actually has
with at the background. So, the key
components to a Neomorphistic - I'm not
sure if it's an actual word - but he the
key components to a Neomorphism look is
that your object has to have the same
color as your background and you also
use two kinds of box shadows, so you add two layers of box shadows - one is darker -
which is like a shadow - and the other is
lighter - which is more like a highlight.
This is how we create this kind of look,
like this object is a part of your
background. And it's kind of protruding
from the surface. Essentially, these are
all very basic Bevel and Emboss effects
and they're available in a new software,
and this kind of look has been around
quite a while. And the fact that they
just pick it up and call it "Neomorphism"
is something new for the interfaces, for
the UI design, it is something new, but
not completely new. Alright, anyway, so now
let's see in what cases it actually
works and in what cases you shouldn't go
for it. So, in this case with this card, it
actually does work because it does
create this distinction between the card
and the background. But, it is not crucial
for us to see this contrast. What you
shouldn't do is apply this effect to a
button and hope that is going to be
enough for the user to understand it's a
clickable button, because here you see
he's not using the slug, these shadows
for this button, this pattern - it's clear
that this is a button, this is a
clickable button, it has a traditional
button look. Another example, this one, is
a pretty good design. You see it is
working with these cards, but I wouldn't
recommend doing it with things like
buttons.
Maybe, icons or other clickable objects
that have to be clear for the user that
there are objects that they can interact
with. So, for the cards, maybe for some
graphic elements, it's a great and very
interesting way to spice up your design,
but not for the elements that are
interactive. So, now let's jump back to
our Elementor editor, and see how we
can create this effect ourselves and
apply it to our objects. The thing is
that as I've said, it is great to use for
cards and for some minimalistic layouts
like these. So, these are the looks we will
be going for. Right now, let me delete all
of the effects that I have already on
these cards, so I can create the effect
from scratch. So, there we are. Here's the
look that you get with all the default
settings and the thing is that my
background here is not a completely
white - it is
something gray-ish, by the way, the widget that I'm working with today is simply a post widget
in Elementor Pro. Here it is. And,
to start recreateing the Neumorphistic
look what we need to do is to - first,
pick the CSS class of our cards. It will
be way easier to do if we start out when we can clearly see where our cards are,
where we can clearly distinguish between
the card and the background. I'm going to
jump to the preview right now, and I'm
going to click f12 so it opens my
inspector and I'm gonna grab this
"Inspect" thingy, and I'm going to hover over
one of my cards and click on it. So, what
we have to do here is to find where the
class of one individual card is. Here we
are. And you have to make sure that you
target one, only one post and not the
container of your layout. And this is
what we have. Once I click on it, it
selects the entire class and we actually
have to grab it and copy it - the entire
thing - just to make sure that we target
this specific set of cards on this
specific page. And I just copy it and you
get back to your editor. You make sure
you select your widget! Go to 'Advanced' ->
'Custom CSS' and just paste it in here. And leave it there just for now. And now
we're going to proceed to all the other
things we have to sort out before
we start writing the code for the Neumorphism look. Alright, so what do we
need to do here first thing is to change
the background of the card so it matches
the color of the background on our page
in the actual container. Well, to do that
let's go to 'Box' -> 'Background color' and
here I have it already in my palette. Now,
the next thing we need to do is to
round our corners. And we'll do it using
Border Radius '15'. Now, the last thing we
have to do is to disable the box shadow
for your objects, if you have one.
Because this setting will overwrite
everything that you write in the custom
CSS tab. So, if you have it enabled - simply
disable it and make sure you get no
shadow near objects. Now, back to 'Advanced'
and in custom CSS, we already have this
class pasted. Now, let's start writing the
actual styles for our box shadows. As
I've already said, you can simply copy
the code snippet down in description box
and paste it in your own editor. First,
we'll write the shadow which was darker
and then - the settings for the
highlight. It is black and it has only
10% opacity, but you can increase it if
you want. If this is the look you're
going for but I wouldn't recommend doing
that so. Basically, this is what it is and
now let's do the same thing. But let's
add prefixes, so if you copy and paste
this code - this is what its gonna look
like. But now let's also write the styles for
the hover state. So, this is how you do it -  simply add a semicolon and hover
after it. And then you copy the box
shadow thing here and what we need to do
is to just increase this value a little
bit, so it seems like the card is
floating above the background a little
bit higher. Done! Now, let's test it out.
There we are. Now, same thing - just copy
and paste the same lines with the two
different prefixes, so we also make sure
it works for the other browsers. And it's
also considered proper CSS, if you bring
the standard property below the
properties with the prefixes. So, that's
it with the first look. Let's move on to
the second one. Now, our second case is
this countdown timer and we're gonna
apply a different style to it. Now, as
you remember, we gotta go and find out
what the class of each of these cards is.
So, let's jump back to the preview. Now,
let's inspect this element and what I
will do is copy it here, up to this
part which seems to be the exact class of the objects that I
need and I'll make sure this widget is
selected and go to Custom CSS and
paste it here. What we've got to do here -
border IDs.
Bring it up to 15 and change
the background color so it matches the
color for our background. As for the
border, what we could do is to try an
experiment and leave one or two pixel
white border here and see what difference
it makes and how different the effect
will look. Now in custom CSS I'll simply
paste the same styles that I had for the
cards above for the normal state. It's
not going to be different at all, it's
going to be the same setings, the same
look, but for the hover state it's gonna
be actually a little different. Now, let's
copy the class, state 'hover' and write the
following. 'Inset' means that our shadow
is now going to be inside of its
container and I'm also going to bring
the opacity down to 5%.
There we have it! I don't know about you
but this border is not really working
for me. Maybe something like this, but
okay let's get rid of it entirely. This
is how you can create this sort of look
with Elementor page builder and a tiny
bit of custom CSS. Just make sure you
target the right class of the right
objects on your page and you shouldn't
have any problem. Now, in the mobile and
tablet view, it's also performing quite
well and there also shouldn't be any
device-specific issues. Well, this is
pretty much it for this video and now
you know how to bring a little bit of
Neomorphism to your design and I hope
this video is helpful for you and you
learn something new
or at least had fun along the way!
Anyways, if you liked the video and you
want to see more tutorials like this one -
let me know in the comments and we'll
make it happen! By the way, talking about
trends, on templatemonster.com we have a
lot of new entries with cool trendy
design you don't want to miss it!
Go and check this out! Thank you so much for watching! Have a great day!
See you around!
