Transcripts
1. Introduction: Now no one can dispute that
a good Drop Shadow can accentuate your design and
subtle unsatisfying ways. But using the standard settings in most page builders
will lead to both limited results and you drop shadows looking
a little bit Samy, in today's video, I'm gonna show you how you could very
quickly and easily start creating more unique and often more advanced
drop shadows. The normally look cool, but actually look a lot more
lifelike, interested, cool. Let's dig in and take a look at the results we working
towards today. So as we've established, drop shadows can be pretty cool, but they're also pretty limited. If you're using a tool
like elemental or anything where you using any
of the pre-defined settings. So it's nice to have a more flexible way of
doing these things, plus being able to do some
more advanced things. Let me just quickly show
you the three examples I'm going to show you
in today's video, but there are almost
unlimited options in which you could take this in any direction
you want it to stack different effects
on top of each other. It's all done through
CSS pretty much so you can get as
creative as you want to. Just kick it off by
taking a look at how we create this
first drop shadow. And this is really the
simplest of the lot. This is a more realistic look in shadow with a lightens
coming from the top. We've got a longer
shadow and you'll see it naturally falls
off quite nicely, but just bear with me because it does look a lot
more realistic. So how would we do this? What we're going to use a
little bit of custom CSS, and we're also going to
use a free online resource which allows you to
visually configured, tweak and get
everything the way you want and then simply
take that code. However, if you're comfortable
doing this manually, by all means, do that.
3. Brumm: So the first type we're
going to be using is AF link will be
in the description. So you can check this
out for yourself. Now this is a great
way of visually be able to set up
and create and tweak and get exactly the kind
of drop shadow effect that you want using
this free resource. Then we have this little
block of code and it's using the box shadow CSS selector. So you can see there's all the different settings
that are being used in this particular setup where we've got all these controls
over on the right-hand side, which allow us to really fine
tune and configure this. So we can choose the layer of shadows and this
kind of stacks up how many shadow layers there are to create a more
realistic look in effect. Generally, the more
layers you have, the more realistic than
effect is going to appear. As you can see, we can
drag these up as we do. Our box-shadow
definitions increase. So does the actual
layers of our shadow. We can also adjust the
final transparency so you can see if we want to
make a much stronger shadow, you can easily increase
this as we see fit. Now obviously you wouldn't
want to go crazy with this. But you could be using something that is on a darker
background and using lighter transparency
just doesn't show it up. So you can do that. You can also reverse that if you want to reverse the
Alpha and you can see that just flips the shading to the opposite direction. You can even tweak the curve of the actual
transparency is being used. You'll see as we adjust this, it gets stronger in locations. We can soften it down if we want to adjust all these,
adjust your transparency. Adjust your layers
of transparency until you get the
exact effect you want. Like I say, you do have a really good controls
inside these page builders. And I use Elementor
as an example, but there's plenty of
other page builders that gives you this
functionality. But they don't get as deep
as this allows us to. Once you've done that,
you then go George, vertical distance,
which you can adjust, you can see we can increase the vertical distance so we can make it look like
the light source is stronger at the top
and we can adjust our transparency to make
it even stronger again, increase or decrease the
number of layers of shadow. So we can get this to look
as realistic as we can. So let's just pull that
back a little bit. Then you have again, the curve that allows you to adjust that final
vertical distance. You can see as we
adjust that we change the actual look of
the shadow itself. And you can see we've
got this sort of visual representation
of these blocks in the background that's kinda show in the fall off that
we're going to create. It's a much stronger shadow at the beginning part where
they're much quicker, fall off towards the end. Same thing goes for the
final blow strength. You can adjust that and you can see if we take that too far, we start to get this
crazy box look effect. Let's just take that back so
it's still quite realistic. And again, you've got
your blue strength. This is your most
in-focus area on the right hand side and the falloff go into
the left-hand side. And again, we can adjust
this curve to create a much more realistic look in shadow until we're
really happy with that. Then you've got finally, you can reduce the
spread on there. So this is kind of tightening the shadow so it looks
like the light is more from the top shining
down and therefore the edges are not
quite so in shadow. But the middle part
is, again, like I say, you can control and adjust
the transparency of all these to get a really
cool looking effect. Once you're happy with that, we need to take
that over then into our page builder on
apply this through CSS. Now you can use this inside
your theme if you want to. You just need to make sure
that using a CSS class or ID. And then you associate that with the particular
element you want, whether it's an image,
whether it's a box, whatever you want
to set it apply to. So once we've got
that, let's just take this little block of
code as copy that. Let's hop back over
into elemental. And like I said, I'm just
using elementary this example. You don't need to come over
to the Custom CSS option. And you can see I've already
got the options inside this. Let's get rid of that
completely at the moment. Now with that removed,
I want to apply this to the image
that we have here, which is, as you can see,
this is what was selected. So what we need to
do when it comes to elemental is we're going to
start this off with selector. And this just says two
element or this is the specific item that I want
to target with this CSS. Now because we want to attach
this styling to the image, we're just going to
put the HTML tag for image, which is IMG. Open our curly brackets, close our curly brackets. And now we've sent
up the CSS selector to grab that image and do
what we need to do to it. So with that in place, less just paste that code inside there. You can see there's
our drop shadow. We've created that
more realistic look in shadow and apply it specifically to this image
directly inside elemental. But you can use whatever
tools you want. You could also come
in and you can select different items and you can
assign their own CSS classes. And you could probably
assign this through your actual customizer
for your theme. And then you can apply this
as and when you wanted to. I'm just showing you this
because I want to show you how the code interacts
with the item itself. So that's how we can create this more realistic
looking shadow using this free online
resource and dot f. Let's take a look now
at the next option. So we're gonna come back over. And the next one we want is this more flexible
drop shadow option. We've seen how to add
this to an image. How about if you
want to actually set it on the container itself? So you can see we've
got this section and we want to apply
a drop shadow to it. So inside here we've got a
title and we've got some text. We're going to select
this particular section. We're going to come
back over into advanced and back
into our custom CSS. So we do the same thing again, we're going to do selector. But instead of putting IMG or anything like that
for the HTML element, we're going to leave it blank. And we're simply going to
put it in the curly brace, close the curly brace. So now we've targeted this particular section and we can apply the CSS
styling to that. So I've created a
slight variation on what we created before. I'm going to copy
this and we're going to hop back over and simply paste that into
our select the area. And you can see
there's our to our drop shadow applied
to that section. So you have a huge
amount of flexibility. You're not limited to only
applying it to HTML elements. You can still apply
it inside the tool-like elemental to
the container itself. And let that wrap around
various different elements, like I say in this example, we've got the title, we've got some text
underneath it. We can add anything
else we want into this. We can say, let's just drop in. I don't know. Let's just say we'll
drop an image in there. And we'll just
choose an image and we'll just pop that
inside. There. There we go. So if we make a little bit
of space for this now, just so we've got
enough room to see, everything will just put a 100 pixels of
padding around there. You can see there's
our drop shadow being applied to tell
the entire container. So pretty cool. Now that
we've seen how to do that.
6. Use another way to creating shadow: How about something a
little bit more advanced? You can see we've
got this ACF logo. Now if I told you
this drop shadow was part of the PNG or SVG, you'd probably think that
sounds pretty reasonable. However, it's not. It's all done through CSS. So we're going to do, I'm going to show you
how you can use it. Another online resource
to do just that. And how we got the
difference between the box-shadow and
another CSS selector. So let's take a
look at that next. So this is how we're
going to set things up. You can see if I remove
this little bit of code, we're back to what we
should start off with, which is just basically
a transparent PNG. If we put a different
color background on here, you'll see exactly what I mean. So we'll just say, there we go. There's your transparent PNG. So I'll just put a little bit of color in there so you
can see what I'm doing. Now. We need to do is target that
image inside that area. So we're going to do
the same thing again. We will come to our Custom CSS. We can select this area.
We can select this. It doesn't really
matter which way you want to go about doing it. I'm going to come back
in and we're going to select a like we've done before. Img, like we did before. We want to select just the image and will open and close
those curly brackets. So we've got things set up. So now we're going to use a
slightly different variant. We've seen box-shadow. This time we're actually
gonna be using drop-shadow. Drop-shadow respects the
shape of PNG and SVG images. So this is where if
you've got a PNG with transparency or an
SVG logo for example, and you want to
apply a drop shadow. This could be a really
cool way of doing it. Now I'm going to show you
just a really simple example, but I would recommend
taking a look at this site. I'll drop a link in
the description, which goes into a lot more
detail about what you can do, how you can set
things up and all of those kinds of really
useful things. So what we're gonna
do is we're going to take this a little bit of code which says there's a filter
being applied, a CSS filter. And we're gonna be
using Drop Shadow and then we've got all the
options afterwards. So the offset, transparency, the colors being used, all
those kinds of things. So we'll just copy this
like we've done before. We'll hop back over. We've got our select a center. Let's say if you're
not using elemental, you can set this up to target that specific item very easily. So it's just dropped down
inside there and boom, there's our shadow applied. Respecting the actual
shape of the PNG image, the contents of it, and ignoring the transparency around it. So if you wanted to, you could
easily adjust the offset. So let's just say
we'll set that to one. And you can see that sets the offset will do the same
thing on the next value. Set that to two, and we now
have a much stronger effect. We can adjust other
values in stages. We'll set that to one
and you can see that now reduces the blue. Or we could set this
to something like, let's just say eight. We get a much softer blue, then you can adjust
the other values. So we can say we
want to set this to one and you can see that now really reduce it or
increases the transparency, makes it a lot less evident. You can adjust these,
you can configure them, get it exactly what you want. Play about until you've got the exact effect that
you're happy with. But you can see this is
a really good way of non-harming to edit images, but still apply things
like drop shadows to them. Really cool effect. And that's just some of the
things that you can do with CSS using these kinds of
techniques we've covered today. I'll put all the
links to all these different sites that
have demonstrated. So you can try this
out for yourself. Now I think you can agree those drop shadows look way more convincing than the
bog standard ones we've probably been
using for absolutely. Ages has always been
until next time. Take care.
Gabriel Gomes, Web Designer
