 Let's talk about box shadows. Let's talk about how to design them that way your sights look clean modern and just you know Really dope and also let's look at how to design them with elements or because well box shadows Those are one those design elements that often gets overlooked now a box shadow when it's done, right? It could really make a design just come to life But when it's done wrong and it's done badly it could be a force of evil making any design Just look old outdated or just like something is off. What's up everyone? I'm Jeffrey at live box and in this video I'm going to show you two styles of box shadows and how to use them with Elements or and design them with elements or and these two styles They're gonna be easy to use but what's most important is that they are fell safe like you can't go wrong with them They're also future-proof. They are new they're modern and they're gonna be good to go for a while So these two styles I'm going to show they're gonna make your designs look a whole lot cleaner also in this video I'm going to show really quickly how and why to use box shadows And then we're going to end it with some resources are going to help you to continue developing your skills as a designer All right cool. So style number one material design Material design it aims to make realistic interfaces basically it wants to make things look as realistic as possible and it's going to be done with like Lighting shadows and also actions things like when you press a button on a website The whole goal behind material design is to make it look realistic as possible And when you want to think about realism think about the actual light shining down on something Let's start by taking a look at a couple examples So that way we got an idea of what to look for when using box shadows with material design now right here This is a great example as you can see we have all these different elements here They're all using these box shadows But you can see has that realistic effect like they are layering on top of The base on top of the web page So like this would be the web page and then each of these elements are like hovering on top of it Given it that realistic feel and here's another good example as well. You can see here We got buttons they have the box shadow on it it separates them And then you have this graphic here on the right it layers on top of the background Graphic and you can see with the box shadow right here So it gives a bit of that hierarchy a bit of that 3d effect on top of it making it from just being Flat into something that pops out and then when you look at this card section right here You can see this one has a box out of which indicates that When hovered on top of these cards that it would kind of pop up it would give it that sort of effect And so on throughout the whole design. We'll see this being used in many areas You can see it here used inside this UI element right here which shows some action We can see it here in the buttons and this section is really cool with it You can see it in this whole graphic right here and all this right here This is super easy to replicate inside Elementor and that's what I'm going to show you right now Now it's time to jump into Elementor and let's have some fun designing some of them I'm going to show you my process and how I implement material design into my web page designs Now here's a landing page I put together and I did this really quickly just using Elementor templates And as you can see as we scroll through it now everything here is pretty much flat There's no box shadows and this is how a design will look like when it's just flat when it's just two dimensional Now if we take a look at this one now we added some box shadows So the first one we added was up here on the top on the menu This puts the menu up on top of the web page It gives hierarchy and it also separates the menu from like the banner and the rest of the page You'll see here a bit of action is needed here So we got some box shadows here on the button right here We got a box shadow and then you can see too when I hover over the button the box shadow Kind of goes down. So the idea behind this is to make the button look like it's being pressed We got a box shadow very slight one added over here on the image given some depth Same thing here with this button and then we have some cards over here as well All right, so let's go over to our blank page right here and you could follow along and you could do this yourself as well So we're gonna add some box shadows to this page right here. That is just flat Now the first one I want to add to I already have it on the menu So we're not going to do the menu instead. We're going to look at these other elements So the first one would be this booking right here that has some action So I would add this one inside the column because you can see when I hover over the column It wraps up this whole section. You can see in the dotted line. So to find this I'll go over here to style now We're always going to find the box shadow inside this border tab right here now keep this in mind It depends on which element that you're trying to add a box shadow to Wet widget some of them are in here in the style most of them are in the style But sometimes the border option isn't in the style and you can still find that over here in the advance So it could be in either one of these if you don't see it in style Go check the advance tab for it. We'll probably see that come up as well So let's go over here to border open that up and then we're going to see our box shadow right here And this is where we start to add it. So first off, let's choose our color now. I like to keep it Just right at black. I mean you can even make it a little bit more gray right here, but making it at black is safe Now if you see right here, it says our GBA 000 0.1 what this 0.1 is that is 10% of the opacity So if we take it all the way over here to one, that's 100% of the opacity So usually what I like to do is take it down and leave it anywhere between 25 for dark And all the way to one for light Let's go ahead and put it somewhere in the middle right now. I'm going to leave it at 15 and let's see how that looks Next up is horizontal. I'm going to leave horizontal at zero. That's going to change it from either the right or the left But what I'm really looking to do is I want to create with material design Like the light is coming from the top and the shining down so that way the shadow is more down here So I'm going to add a vertical and I'm going to give it 10 and now you can see the shadow down here on the bottom Now next up. Let's add a blur I like to give a healthy blur whenever I'm using this kind of style right here It makes it more realistic anywhere from about 30 to 40 and I always round things off evenly So I'm going to use 40 on this one I want a healthy blur here and you can see now already You see it's dark over here on the bottom is dark on the sides And we just got a little bit of darkness right over here But most of the dark the shadow is down here on the bottom So it's giving that look that I'm going for with the light shining from the top Next one though is the spread when you spread it out. That's just spreading out the shadow We definitely do not want to do that because Spreading it out does not look real. What we want to do is instead spread it in just a little bit So you're taking the shadow and you're making a smaller underneath it So it makes it even more realistic and later when we look at the hover effects The spread really helps out with the hover effects as well So I'm actually going to leave it at five and this is this is my go-to right here This is my exact go-to point 15 opacity on the black Vertical at 10 blur at 40 and then spread at a minus five I want the spread to go underneath it. This is my go-to and if we go ahead and update it Take a look at it in the front Well, we can see now it has more of a clean modern look and feel to it. It's not too heavy It's not too dark one of the mistakes. I see made a lot is Making it too dark. So this is how it looks like when it's too dark Let's take it down to like 50 which I think might be the default and usually I see a bit of horizontal added a little bit of vertical added and Not that much blur added a lot of times It's just a little bit of blur and then of course there's no spread or sometimes spread is added to it Let's take a look at that real quick. This is a common Mistake that I see a lot and you can see it's dark, you know, it just has this darkness around the edge There's no real death. It doesn't look realistic and that's why making it look light Giving it that range Makes it look nice and clean now. Let's go do the same thing to the button right here So let's click on the button and I'm going to give it the same box shadow actually right here So let me open this up. I'm going to turn this to I'm going to turn it to point 15 right there and Then I'm going to move this up to 10 I'm going to give the blur to 40 and then the spread. I'm going to give just a little bit You know what? That's a little bit too light for me. In fact, let me make this one darker I'm going to make this one go to 20 And I'm going to take this down to 30 now all right good and just And just to give you some insight to my design system I usually only use two to three box shadow styles per website and the styles would be something like this Just like this right here In fact, let me go back and fix this I don't like things looking messy right there and the box shadow was still too dark So let's take that down to point one five. Okay. Now so really quick with the button I want to add a hover effect and unfortunately Elementor doesn't have this built-in like if you click hover right here, you see it doesn't change it stays right here It does, you know, the options stay the same So we're going to do this with CSS now I got a snippet of code that I wrote it's right here just these little snippets right here These are going to allow us to give an effect a hover effect to our buttons The code is inside the description So go ahead and copy and paste it from inside there and you could throw it inside your CSS So for this one, we're going to use this class right here button shadow press and I'm going to put this Over here in advance. I'm going to put on my CSS classes Now if we hover over it and let's update it and take a look in the front You can see when we hover over it that the box shadow goes down So it looks like the button is being pressed down Now let's add some box shadow to these cards right here And this could be for any features section. These are icon box widgets. So let's go ahead and click on them Over here navigates a style and you'll see it does not have the border tab inside there So that means it's got to be in the advanced and here it is. So go to your border Go to your box shadow right here. So let's give it the same style that we gave the other So let's make sure it's at point one five And we're going to leave this at zero. Let's go ahead and give the vertical a 10 The blur, let's give it a healthy 40 and then the spread. Let's go ahead and give it a negative five And we'll go ahead and copy that and paste this to the other ones And now let's really quickly add a hover effect something that makes us stand out a bit That way when somebody's moving the mouse over it or they're scrolling down the page It can maybe capture their attention and then you could also use the same Style right here to other elements as well. So let's go ahead and go back over to our border And go over to hover now most box shadows have the hover It's only the buttons that I found that really don't But hopefully those will be added soon in the future So click on hover and let's go give it a style now this time Let's make it light. I want to take this down to point one I'm going to make it super light for vertical. Let's make it five for blur Let's give it 30 and then for spread. Let's give it a minus 10 Now what this is going to do is going to make it look like it's being pressed down and it's very faint But you can see it makes a gives out press feeling. Let's copy and paste it now to the others And then take a look at it in the front end and you can see it's a very subtle Press on it now you could play around with this You could maybe make it a little bit darker a little bit lighter Try out some of the hover effects The main thing is when you find that one that looks good Keep it consistent throughout the rest of the webpage and then your design is going to look so much better It's going to look really nice Style number two solid shadows now solid shadows. They have a completely different objective than material design Where solid shadows are all about highlighting things making them more fun And they have kind of this retro look and feel but the thing is they are right now one of the top trends They are something that we're going to be seeing a lot more in 2022 So if you start using them now, you're good to go You're going to be into the current trend of web design and it's fun to use and a great example of it is well Check out elementor.com Elementor's own site. They use the solid shadows So let's take a look over here at elementors website And we could see an example of the solid shadow right here inside their menus You see there's a solid line and then you got your shadow here on the outside And then here's a design over here. I found inside dribble that really uses a lot of it You know, you can see they have all kinds of fun with it You know the image right over here the image cards And then right here you can see down on the bottom How it has a hover effect right there where you hover over it and the shadow goes down Now this is really fun to use and this is a new trending style and it's easy It's really easy to implement. So let's go ahead and have some fun Let's go back to our page and we're just going to adjust these box shadows to give that solid Retro style look to it. So let's click on the column Navigate over here to our border And right over here, let's take this all the way down to one. We're going to make it 100% Now you could change the color of these here So the color on the solid they can change just keep it consistent. That's the only thing that matters But let's keep this dark though right here All right, so the blur we got to take the blur all the way down to zero and that's when we get the sharp Shadow right here. Let's go ahead and remove this spread Keep the spread as zero, but then the horizontal we want to give some horizontal to it So choose which way do you want your designs to go? Do you want to go to the right or do you want it to go to the left? Now I would not have them go up. It just doesn't look right going up Definitely make it go down, but to the right or left either of those could work I'm actually going to take it to the left. I want to see the left All right, and then we want to give a border on this because you see it's just really white here on the top It doesn't really make that look like its own element. So let's create a solid color right here I'm going to get the border uh to width and let's go ahead and add the color to it And let's do the same now with the buttons All right So first thing we want to do is we want to take this all the way down to one make it solid and then let's remove this blur Take that down to zero. Let's go ahead and give the horizontal also a minus 10 Do you know what? I don't want this at 10. Let's keep it at six same thing with the vertical Keep this at six. We don't need it As big because a button smaller and then the spread We want to keep that at the even zero And now for the hover effect, I have another Snip it right here. So you can just copy and paste this one into your css. Now, let's go over to advance Let's change the class right here. Now. This is for the solid button And if we hover on it now, you can see it has that press Like effect to it and again if you want to change these and this goes for both If you want to adjust the hover effect on the buttons right here The main thing is Is just to change the pixels and you see this pixel right here. That is going to be the same Let me open this up so we can see that's going to be the same for the horizontal If you see this one right here, it's going to be for the vertical This is going to be for the blur. If it's a zero, you could leave it out of zero without a px Or you could add the px And then this is going to be for the spread And now this one right here. This is going to be for the color But if you see here on the shadow On the shadow that has the blur, there's something different We don't have the color code like we have here instead We have an rgba and you see when we look at the color picker and we move it down You can see the rgba right here And the last one is the opacity Now these three right here, these are another way of getting the color codes So you would just adjust this take this right here. You could copy and paste that And then you would put that right here for your color I hope that made sense and the reason why I wanted to show this is I think it is really important To start to get an understanding of css. They're going to help out so much when creating websites Even with elementary that has all these tricks All right, let's go over here to let's go ahead and add something to this image right here Forgot to do it with the shadow, but we could go ahead and Add something in here for the solid design. So I'm going to take this all the way down to one Let's go ahead and give the horizontal a minus 10th The vertical a 10th and then leave the blur and spread as it is But what's also at a border that'll make it look a whole lot better too So let's give it two pixels. Let's go ahead and make it a dark color Now we got that retro look to it I'll go ahead and copy and paste the style on the button And let's change up these cards. So let's go to the cards. It's over in advance to the border And then we're going to do the same as we did above. We're just going to take this all the way down to 100 Let's go ahead and do minus six and plus six It's because they're really close together. We don't want a big like this one just slightly smaller And remove this blur and then also remove the spread There we go. That's a going, you know, what we could go ahead and take it to 10 Let's be a little while take it to 10. All right And let's go ahead and give it a hover as well because right now we got the blur hover So same thing take it all the way up to one And this time let's just give it two To make it look like it's going down remove the blur Keep the spread at zero Now we got that cool look to it and let's go ahead and also give a border Make sure it's back on normal when you're adding the border Give it two pixels same color. Now let's copy and paste the style across And there we go. We got that cool retro look that dark shadow on it Very similar to the elementor style that they're using and by using this Look, are you going to be ahead of the trend right here? So where and why to use box shadows? Well box shadows, they should be carefully thought out They shouldn't be just random You shouldn't just apply them to elements without putting thought into them Just because the option is there now with elementor it makes things really easy But on the flip side of that by making something easy It also allows us to make mistakes easily as well So by carefully planning it thinking it out and asking yourself What is the purpose of adding box shadows to my elements? And what elements do I want to highlight and use them on and start with that? Another useful tip too is to create a design system and put the style of your box shadows Inside the design system before you even begin your design or building your website Now i'm a huge believer in design systems because they give consistency and consistency Creates clean designs. All right. If you want to know more about design systems, too I created a video on it. There's a link somewhere on the screen right about now Check that out. That's going to help you out as well All right, so I really hope this video helped out and if you want to continue Developing your design skills. I suggest checking out and learning about material design I left a link inside the description so you could go through it and study it and learn more about it It'll give you even a more overview of material design, which Box shadows are a really big part of also check out dribble behance Look at those kind of websites. Look at the new designs and ones that are trending on there Look at the newer styles because a lot of box shadows that I see Are old styles that were used like five six seven years ago And when those styles are being used it just makes the design look old But if you want to stay new and ahead of the trend and also learn from the top designers Study them check out dribble behance and other similar websites awards.com Well, that's it. I really hope this helped and if it did help and if you want to learn more about You know making better designs use an element or make sure to hit subscribe and do all that good youtube stuff I'll be back again soon with another video like this. All right. Thank you