1 00:00:01,340 --> 00:00:03,990 Hello everyone and welcome back. 2 00:00:04,010 --> 00:00:07,620 In today's video we will learn how to add shadows. 3 00:00:07,640 --> 00:00:15,900 CSX provides us with two options to add shadows one for text and second for all other extremist elements. 4 00:00:15,920 --> 00:00:19,590 First let's talk about how the large shadows to taste. 5 00:00:19,790 --> 00:00:22,260 For this we can use the dates up or booty. 6 00:00:22,880 --> 00:00:25,320 Let's try an example to understand it better. 7 00:00:26,180 --> 00:00:27,470 Let's bring about good editor 8 00:00:31,070 --> 00:00:33,860 let's say this is the next you've got X Diamond five. 9 00:00:34,290 --> 00:00:42,770 Let's add some stylings so let's add the dig shadow have a deal so dark shadow on it two choirs two 10 00:00:42,780 --> 00:00:46,760 armies one for horizontal shadow and another for vertical shadow. 11 00:00:47,510 --> 00:00:50,770 So let's say four weeks old by four pixels. 12 00:00:50,960 --> 00:00:57,220 That's either as you can see the text and the shadow have the same color like we get changed the color 13 00:00:57,220 --> 00:00:57,930 of the shadow. 14 00:00:58,000 --> 00:00:59,410 So let's try that. 15 00:00:59,440 --> 00:01:04,530 So do I believe we can simply add in the value here to say great. 16 00:01:04,950 --> 00:01:11,060 Let's save it now as you can see we've got a great salute shadow. 17 00:01:11,540 --> 00:01:16,100 But it doesn't looks very much like the shadow it looks more like a reflection of our text. 18 00:01:16,130 --> 00:01:16,990 It looks really sharp. 19 00:01:17,030 --> 00:01:24,720 So let's add some bloke to our blood we can add another value here say two pixels. 20 00:01:25,370 --> 00:01:32,570 And as you can see that shadow looks a bit blurry now let's increase this value of say four pixels. 21 00:01:32,960 --> 00:01:34,960 And now as you can see it looks more blurry. 22 00:01:35,590 --> 00:01:38,120 That's increased to say 10 pixels. 23 00:01:38,170 --> 00:01:43,910 Now as you can see it's so blurry that we can't even tell what's written in that shadow. 24 00:01:44,020 --> 00:01:47,020 So the higher this value the more blurry the shadow. 25 00:01:47,020 --> 00:01:48,690 We can add multiple shadows as well. 26 00:01:48,730 --> 00:01:49,310 So that's right. 27 00:01:49,310 --> 00:01:53,140 OK lets us commanders. 28 00:01:53,140 --> 00:01:54,450 All right so let's give it up. 29 00:01:54,580 --> 00:01:56,130 Take shadow property. 30 00:01:56,410 --> 00:02:02,620 Let's say two pixels horizontal two pixels vertical looping since blurry and let's say the color is 31 00:02:02,720 --> 00:02:03,130 red. 32 00:02:04,760 --> 00:02:05,360 Let's say that. 33 00:02:05,690 --> 00:02:08,510 And now as you can see you've got this red shadow. 34 00:02:08,570 --> 00:02:14,240 Now to add another shadow we can simply use a comma and give values for the next shadow as well. 35 00:02:14,720 --> 00:02:19,430 So let's say two pixels two pixels two mixes blurred. 36 00:02:19,430 --> 00:02:21,590 Let's see the color is green. 37 00:02:21,590 --> 00:02:22,250 Let's see there. 38 00:02:22,940 --> 00:02:25,410 And as you can see the green color isn't very much invisible. 39 00:02:25,420 --> 00:02:27,210 So let's bring it down. 40 00:02:27,230 --> 00:02:31,240 So for that you can just increase this one let's save it. 41 00:02:32,080 --> 00:02:37,770 So not very much visible but increase it a bit more and now as you can see all these three pillars are 42 00:02:37,770 --> 00:02:38,250 visible. 43 00:02:39,000 --> 00:02:41,050 That's all for take shadow that. 44 00:02:41,070 --> 00:02:45,400 Now let's talk about how to add shadows to extremist elements. 45 00:02:45,400 --> 00:02:48,810 For that we have another problem decoder box shadow. 46 00:02:48,810 --> 00:02:52,660 This property adds a shadow to the extreme elements box. 47 00:02:52,800 --> 00:02:58,120 Let's try unexamined will do in the standard better let's just commanders. 48 00:02:58,450 --> 00:03:05,980 Let's add some more states say red three hundred pixels high four hundred pixels. 49 00:03:06,030 --> 00:03:10,250 Let's give a damn what a radius for pixels on let's give it a background color. 50 00:03:10,260 --> 00:03:12,150 See white you see that. 51 00:03:12,690 --> 00:03:17,060 And as you can see we've got this guy sort of a structure here. 52 00:03:17,100 --> 00:03:21,570 Now let's try using this box shadow property box shadow. 53 00:03:22,110 --> 00:03:29,580 So just like Dick's shadow even this box shadow nobody except the horizontal shadow landing on the vertical 54 00:03:29,580 --> 00:03:30,030 shadow. 55 00:03:30,020 --> 00:03:32,100 I mean let's save it. 56 00:03:32,340 --> 00:03:37,350 As you can see we've got this new shadow around our box or guard. 57 00:03:37,680 --> 00:03:40,380 That's right changing the color see Gray. 58 00:03:40,650 --> 00:03:47,180 And as you can see now the shadows during degree similarly do add a blurred delay. 59 00:03:47,210 --> 00:03:52,940 We can give it a value say four pixels and as you can see now the shadow looks a little blurry. 60 00:03:52,940 --> 00:03:55,550 If you want to shadow more to come down. 61 00:03:55,730 --> 00:04:01,280 So we could see probably four pixels another shadows more on the bottom. 62 00:04:01,280 --> 00:04:02,810 And let's say we don't want him on the right. 63 00:04:02,810 --> 00:04:04,850 So we could simply do this zero. 64 00:04:05,390 --> 00:04:12,140 And as you can see with the shadow around our guards and the shadow nets our guard looks a bit elevated. 65 00:04:12,440 --> 00:04:15,230 Similarly let's try adding a shadow to our top bar. 66 00:04:15,360 --> 00:04:16,640 So coming up here 67 00:04:19,660 --> 00:04:25,100 let's give it a block shadow properties so block shadow and let's give it some values. 68 00:04:25,150 --> 00:04:32,440 0 pixels to pixels say 10 pixels and let's give it a color see triple eight and save it. 69 00:04:33,220 --> 00:04:37,750 And as you can see with the shadow coming down from my dog bar it's a bit much. 70 00:04:37,750 --> 00:04:39,200 So let's use the. 71 00:04:40,270 --> 00:04:45,710 Let's say five pixels and looks much better now that's all for today guys. 72 00:04:45,740 --> 00:04:51,200 If there's something that you do not understand feel free to drop a comment and we will discuss it. 73 00:04:51,320 --> 00:04:53,780 See you in the next video by anti-gay.