1
00:00:00,760 --> 00:00:01,360
‫Hey, there.

2
00:00:01,540 --> 00:00:02,290
‫Welcome back.

3
00:00:02,690 --> 00:00:03,340
‫On the side.

4
00:00:03,800 --> 00:00:06,400
‫Now let's move on to some Erdogan's concept.

5
00:00:06,820 --> 00:00:14,800
‫We will be discussing about border in-depth now so in-depth that there are chances that you might understand

6
00:00:14,800 --> 00:00:15,610
‫some concept.

7
00:00:15,940 --> 00:00:18,160
‫There are chances that you might skip them.

8
00:00:18,760 --> 00:00:24,400
‫So what do you have to do is just we watched this lecture and try to replicate everything that we are

9
00:00:24,400 --> 00:00:24,760
‫doing.

10
00:00:25,180 --> 00:00:32,140
‫Also, make sure to read about the resources that I am providing currently because this is some serious

11
00:00:32,140 --> 00:00:33,060
‫advanced topic.

12
00:00:33,070 --> 00:00:36,490
‫You don't utilize this on a regular day-to-day basis.

13
00:00:36,880 --> 00:00:43,630
‫This is something that you try to make things creative or try when you are implementing something at

14
00:00:43,630 --> 00:00:44,620
‫the advanced level.

15
00:00:44,950 --> 00:00:47,170
‫So make sure you can skip this if you want.

16
00:00:47,920 --> 00:00:53,620
‫OK, what we are doing is we are discussing about borders, borders as well as border areas.

17
00:00:55,400 --> 00:01:00,800
‫Same thing I did just created our Dave, and I'm working with my style success.

18
00:01:01,370 --> 00:01:07,280
‫Remember, I took red and white for this, Dave added some margin, so we have some space.

19
00:01:08,610 --> 00:01:16,110
‫And I read this default color by chance, if they use any text and then we have this border five pixel

20
00:01:16,110 --> 00:01:17,670
‫solid blue.

21
00:01:18,540 --> 00:01:21,130
‫Now here you can see this border is looking fine.

22
00:01:21,480 --> 00:01:21,960
‫Great.

23
00:01:22,290 --> 00:01:24,840
‫Let me try to increase to 50 percent.

24
00:01:25,230 --> 00:01:26,190
‫Save this one.

25
00:01:26,340 --> 00:01:29,010
‫OK, so our border is looking fine.

26
00:01:29,580 --> 00:01:37,650
‫Mark, how do utilize this border to change the shape of our current do or any type of other element?

27
00:01:38,560 --> 00:01:43,630
‫When you are working that 16 hour chances that you want, the designs are to ensure there are chances

28
00:01:43,630 --> 00:01:46,300
‫that you want to customize this particular do.

29
00:01:46,750 --> 00:01:52,870
‫And that's where this whole border thing comes into picture and help us define the shape of different

30
00:01:52,870 --> 00:01:55,210
‫elements or just design a new shape.

31
00:01:55,810 --> 00:01:59,860
‫For example, at this point of time, we are utilizing this border.

32
00:02:00,460 --> 00:02:09,250
‫Now this 50 pixel means 50 percent of our top right bottom as well as left, but we can utilize individual

33
00:02:09,250 --> 00:02:10,330
‫values also.

34
00:02:10,870 --> 00:02:17,650
‫Bill now we have been utilizing single value for all our borders, and in most of the cases, you are

35
00:02:17,650 --> 00:02:19,780
‫going to utilize this single value only.

36
00:02:20,110 --> 00:02:22,990
‫But if you want, you can customize all this border.

37
00:02:23,260 --> 00:02:25,240
‫So for now, I am commenting this one.

38
00:02:25,630 --> 00:02:30,700
‫And here we are going to play with custom top or bottom left as well as right.

39
00:02:31,090 --> 00:02:36,280
‫So all you have to do is use border and then you have option for top head.

40
00:02:36,280 --> 00:02:39,550
‫I'm going to take 50 picks and right now for all of them.

41
00:02:41,770 --> 00:02:43,540
‫Going to utilize this one.

42
00:02:43,690 --> 00:02:45,940
‫But I'm going to try a different color.

43
00:02:46,390 --> 00:02:51,330
‫Let's say I'm going to take blue hair or I should say I can change things.

44
00:02:51,400 --> 00:02:52,300
‫Or maybe.

45
00:02:52,660 --> 00:02:59,860
‫Let me go red light blue hair and see now how you can see we only have this stop.

46
00:03:00,220 --> 00:03:00,730
‫OK.

47
00:03:01,120 --> 00:03:07,030
‫This looks great, but I can utilize different other, but maybe if I need border bottom.

48
00:03:09,530 --> 00:03:16,370
‫Now, had I can do something similar, I can utilize the 50 work and I can change the colors, so here

49
00:03:16,370 --> 00:03:21,440
‫I just need to go with maybe this green type and save this one.

50
00:03:21,890 --> 00:03:23,930
‫Hey, you can see I have to bottom.

51
00:03:24,530 --> 00:03:28,340
‫This looks fine than now, but let us try to utilize the other part.

52
00:03:28,850 --> 00:03:29,330
‫Maybe.

53
00:03:31,410 --> 00:03:35,190
‫Left and then we can utilize the same value.

54
00:03:36,250 --> 00:03:39,190
‫But make sure to change the alert to understand the difference.

55
00:03:43,330 --> 00:03:51,340
‫Save and how you see the change here, you see how they are distributing content between these two border.

56
00:03:51,730 --> 00:03:54,070
‫Let me try to add the border right as well.

57
00:03:54,340 --> 00:03:57,430
‫So let me copy this one and simply add the right part.

58
00:04:00,760 --> 00:04:07,330
‫Let me try to take a different color, maybe some around Reddish being something like this.

59
00:04:09,250 --> 00:04:13,210
‫And save this one now here you can see we have four different borders.

60
00:04:13,480 --> 00:04:20,530
‫Top, bottom left and right now, remember how they are distributing when we are utilizing the border

61
00:04:20,710 --> 00:04:24,070
‫together, they are distributing them from the middle.

62
00:04:24,520 --> 00:04:29,740
‫Now, at this point of time, I took our word of 200 by 200 and I'm utilizing border walks.

63
00:04:30,040 --> 00:04:33,640
‫That means if I increase my border, my content will shrink.

64
00:04:34,000 --> 00:04:37,390
‫So if I say my content as 100 bricks in itself.

65
00:04:42,080 --> 00:04:45,500
‫And since I don't have any content, you can see how they are going to walk.

66
00:04:45,860 --> 00:04:50,150
‫Now I can utilize this custom border and can draw any type of shape.

67
00:04:50,420 --> 00:04:56,480
‫Maybe if I say transparent to all of them and just keyboard allow for live, I will get some type of

68
00:04:56,480 --> 00:04:57,080
‫triangle.

69
00:04:57,500 --> 00:05:02,550
‫Or maybe if I just keep the border color off bottom and remove all of them.

70
00:05:02,660 --> 00:05:05,060
‫That means if I say this is transparent.

71
00:05:09,240 --> 00:05:12,960
‫Maybe that's one as well as this one, as well as this one.

72
00:05:13,500 --> 00:05:18,930
‫And if I save this one, you can see I got the shape of a triangle and I can do something similar.

73
00:05:18,940 --> 00:05:21,960
‫Maybe I keep this left to one and remove the bottom.

74
00:05:21,990 --> 00:05:22,770
‫Save this one.

75
00:05:23,130 --> 00:05:26,100
‫You can see I get a new type of shape.

76
00:05:27,030 --> 00:05:31,590
‫Now, this is tricky because we can control a lot of things with this border.

77
00:05:31,860 --> 00:05:36,120
‫For example, if I said maybe at a Howard effect, whether there.

78
00:05:37,660 --> 00:05:41,890
‫And as soon as we hover over this border, let me try to.

79
00:05:45,890 --> 00:05:53,870
‫Change it, maybe let me try to move this to right and Jane, this to trans bank changes to transfer

80
00:05:53,870 --> 00:05:54,780
‫and save this one.

81
00:05:54,810 --> 00:05:59,780
‫Now, if I try to hover over this, you can see there are defined in a particular shape.

82
00:06:01,420 --> 00:06:07,390
‫Now we can utilize this border as well as border radius to do a lot of other custom things.

83
00:06:07,900 --> 00:06:09,790
‫I hope you got the idea about border.

84
00:06:10,420 --> 00:06:14,590
‫Now if I just remove this and also change the color of border, right?

85
00:06:14,710 --> 00:06:15,520
‫Save this one.

86
00:06:15,820 --> 00:06:17,500
‫You can see we got to differentiate.

87
00:06:17,770 --> 00:06:21,490
‫Maybe if I just go at top and bottom, I can get different shapes.

88
00:06:21,980 --> 00:06:27,400
‫Now this is important and we can create multiple shape according to multiple requirements.

89
00:06:27,820 --> 00:06:34,000
‫And this works brilliant once you start implementing and start understanding these creative things.

90
00:06:34,390 --> 00:06:40,960
‫Now remember on day-to-day level on your random freelancing project or maybe a company project, chances

91
00:06:40,960 --> 00:06:43,120
‫are you are not going to utilize all of them.

92
00:06:43,390 --> 00:06:44,470
‫Baidu databases.

93
00:06:44,710 --> 00:06:47,090
‫They have their own specific use cases.

94
00:06:48,010 --> 00:06:52,480
‫So I hope you got the basic idea about this storm bottom left and right now.

95
00:06:52,480 --> 00:06:58,930
‫Let me comment all of this and understand about how to work with border areas.

96
00:06:59,140 --> 00:07:05,950
‫So let me activate this border, not save this one and discuss about border radius because this is going

97
00:07:05,950 --> 00:07:08,740
‫to be important and interesting to MailChimp.

98
00:07:09,250 --> 00:07:16,180
‫So if I just say border radius and our toolbox is, or I should say five boxes, save this one.

99
00:07:17,170 --> 00:07:19,120
‫You can see we have this border areas.

100
00:07:19,570 --> 00:07:27,610
‫Again, remember whenever we take this single value, that means we are providing one value to all the

101
00:07:27,610 --> 00:07:31,540
‫corners, and that's where things get tricky with borders.

102
00:07:31,600 --> 00:07:37,570
‫Remember, with border, we are taking this single value for all of them, but we can pick individual

103
00:07:37,570 --> 00:07:38,650
‫values also.

104
00:07:39,100 --> 00:07:44,230
‫So when border radius we have top left, then we have to operate.

105
00:07:44,350 --> 00:07:51,010
‫Then we have a bottom right and then we have bottom left how we are going to utilize this if we want

106
00:07:51,010 --> 00:07:51,910
‫to create ships.

107
00:07:52,360 --> 00:07:56,920
‫So first thing I'm going to do is I'm going to fill this content space with this same color.

108
00:07:57,340 --> 00:08:00,820
‫So let me add background color and fill this empty space.

109
00:08:04,340 --> 00:08:11,190
‫Now we have this border radius, 15 pixel applied to all the four corners, but we can customize it.

110
00:08:11,210 --> 00:08:14,270
‫We can either pass for individual values.

111
00:08:14,880 --> 00:08:15,320
‫Greens.

112
00:08:15,560 --> 00:08:16,610
‫Let me direct or indirect.

113
00:08:16,610 --> 00:08:16,970
‫So.

114
00:08:18,260 --> 00:08:24,710
‫Let me take four of the Pixel and then Pixel, and if I save this one, you can see it's different.

115
00:08:24,830 --> 00:08:25,340
‫Why?

116
00:08:25,640 --> 00:08:29,210
‫Because we are passing individual values to all four.

117
00:08:29,600 --> 00:08:39,710
‫Let me take AP instead of 20, you can see this is the first one which is top left or right autumn right,

118
00:08:39,860 --> 00:08:41,360
‫as well as bottom left.

119
00:08:41,930 --> 00:08:44,630
‫Now with this, you can control a lot of things.

120
00:08:44,660 --> 00:08:46,850
‫You can create different type of shape.

121
00:08:47,060 --> 00:08:52,460
‫You can also create background lives for different images, and there are several examples that you'll

122
00:08:52,460 --> 00:08:57,020
‫see floating on different type of website, as well as on apps itself.

123
00:08:57,650 --> 00:09:01,820
‫So I hope you got the basic idea how we are going to utilize border areas.

124
00:09:02,390 --> 00:09:06,800
‫Now this is one way to control border radius, bypassing all four values.

125
00:09:07,040 --> 00:09:08,460
‫You can also do one thing.

126
00:09:08,480 --> 00:09:10,400
‫You can take individual values.

127
00:09:10,650 --> 00:09:19,370
‫So if I say border and if I want to just control the border radius of this stop left so I can use border

128
00:09:19,610 --> 00:09:27,440
‫that I can stop left radius and had I can pass maybe 50 pixels, save this one.

129
00:09:27,920 --> 00:09:32,680
‫So you can see all three of them are untouched, but this one is it.

130
00:09:34,810 --> 00:09:37,480
‫Similarly, we can control the other three as well.

131
00:09:37,750 --> 00:09:45,040
‫So let me add it here in the comment Excel, so I hope you got the idea how you can control these multiple

132
00:09:45,040 --> 00:09:45,550
‫values.

133
00:09:46,120 --> 00:09:48,040
‫But, but but there is a surprise.

134
00:09:48,400 --> 00:09:51,640
‫What if I say I can design something like?

135
00:09:53,980 --> 00:09:56,200
‫This without a border radius.

136
00:09:57,130 --> 00:09:58,430
‫I hope you like this.

137
00:09:58,450 --> 00:09:59,410
‫This design.

138
00:10:02,270 --> 00:10:06,170
‫So how to do that and what are these values?

139
00:10:06,470 --> 00:10:08,660
‫We are going to understand this in the next one.

140
00:10:08,780 --> 00:10:10,520
‫OK, I'm not leaving any suspense.

141
00:10:10,520 --> 00:10:11,900
‫I really wanted to show this.

142
00:10:12,230 --> 00:10:14,720
‫So you have some interest in the next election itself.

143
00:10:15,260 --> 00:10:20,390
‫So in the next lecture, let us understand how to design different type of shape that we can utilize

144
00:10:20,600 --> 00:10:21,790
‫with backgrounds.

145
00:10:22,640 --> 00:10:24,110
‫I hope this lecture was helpful.

146
00:10:24,140 --> 00:10:26,570
‫Don't worry, we are going to cover this in the next one.

147
00:10:27,050 --> 00:10:30,080
‫Thank you for following, and I see you guys in the next one.