‫Hey, there.
‫Welcome back.
‫Now in this lecture, again, we are going to work with shapes.
‫So basically, we are going to understand how analyze different properties to better differentiate.
‫Now again, I'm reminding you these are optional lecture.
‫You can skip them, since these type of topics are not utilized by everyone on day to day basis.
‫So you can just watch them do a good practice session and then move forward.
‫And even if you are not able to remember them, don't worry, you can always refer to different guides
‫that are available online.
‫So in this one, we are going to draw our shape in the form of art, or maybe something else.
‫So at this point of time, I hope how you can design Asoka, how you can walk with after before.
‫I hope you have this basic idea.
‫Now let me try to define a simple ship in the form of square width and height of 200 pixels.
‫Then we have some margin.
‫We don't need color.
‫Actually save this one, and we have a border and background.
‫So border is basically that meeting this color to make you understand again.
‫So our current border is this one, and this is the space for content which is remaining.
‫So I'm using background color to fill this one.
‫So that's it.
‫If I want to create this in the form of circle, what I can do is I can utilize border radius.
‫And if I say 50 percent, save this one.
‫That means it will cover 50 percent from here, here, here, here and all the other sites.
‫So not quite this value is important.
‫Now, if you remember, we can pass on multiple values, total different values to control all the individual
‫sites.
‫OK, that's quick revision.
‫And now we understand about how to dos OK.
‫Now let me also decrease the size here a bit so we can have more space to draw things.
‫And I'm going to remove this so we can have a square.
‫OK, this looks great.
‫So how we can control more parts if we remember we can add content after as well as before with the
‫help of different properties.
‫Now here, if I utilize this Deb, and if I utilize this after, I can create or differentiate in Tyler,
‫David, Sir, for example, let me add content first.
‫Remember, this is important.
‫And here I can define another shape.
‫Maybe if I say width and height, same, maybe a bit smaller 70 pixels.
‫Looks good and let me try to use margin as shifted percent.
‫And something similar for Border Canada has well as background.
‫And if I save this one, you can see we have our shape yet.
‫Now we can control a lot of things, so if I say increase due care itself, save.
‫See, it's not visible properly, so what I can do is I can see position.
‫And I can say absolute and from what I can say, one that if I save this one, OK, this is working
‫well, let me remove this marginal save this one, OK, now it's position one pixel.
‫I can also see from left it is going to be one pixel saved.
‫OK.
‫This is great.
‫So this is one pixel from left as it is from the top.
‫Now let me change the color of on a line.
‫So let me go with some more green.
‫OK, great.
‫Let me try to copy this one as well as for you to save this one.
‫So this is the whole box.
‫And what I need to do is I need to change the size.
‫I need to change it to maybe 50 bucks in.
‫Now here you can see how this is working.
‫Now the basic problem with this content is.
‫About the condensates we just drove, deep excel as well as the border is also very typical.
‫So this is why you can observe even renovated, highly disruptive excel.
‫This is bigger.
‫OK, so what we can do is we can also add a property which is known as bulk sizing here and say it bought
‫a box.
‫In this way, we are combining content plus padding in this box.
‫Now here, let me try to add some border radius or let's say, 50 percent.
‫This looks great.
‫And let me copy something similar here.
‫Again, this is going to be ordered before save this one.
‫Not here.
‫Currently, we have two circles.
‫And let me move it.
‫So what I'm going to do is what I'm going to rotate.
‫This will be organized transform.
‫And then I'm going to you rotated maybe four, 45 degrees, save this one.
‫OK.
‫Things changed.
‫But what I need now is to shift one of them here.
‫And one of them here.
‫So if I say this as maybe minus 50 percent.
‫OK, this is moving.
‫Let me try to take this one at the top and let me try to take this one at here.
‫So let me move this or minus 50 and then minus 100.
‫Let me move on this direction.
‫This looks great.
‫And let me move here on this direction.
‫So I go with minus 100.
‫Now remember, we are rotated by 45 degrees, so if you go over top, it will move had it been moved
‫or left and right will move here.
‫Remember this point?
‫So if I say left handed, this will move here.
‫See if you can see this is moving out.
‫If I need to move this side, I need two degrees.
‫That's maybe go at 50.
‫Save this one.
‫I hope you got the idea.
‫So now I can change the color, maybe same color for all the angles.
‫So if I copied this one?
‫And simply a better.
‫Here you can see we got our heart.
‫Now remember, you don't need to complicated all of this because all of these kind of content can be
‫applied through images and then image can be utilized at the background.
‫The only organized deceased, whenever we want to draw a specific structure by any chance, I hope you
‫got the idea what we recently did.
‫Now you can utilize one other method and start off using this transform at the beginning.
‫You can just create a square, add a circle and another circle, and then rotated, so you are going
‫to get this same result.
‫But it will be much easier.
‫I really wanted to discuss the part of how to move on top and left when you are rotated.
‫So that said, that's all about how we are going to utilize the after and before while drawing any specific
‫shape.
‫Thank you for following this lecture and I see you guys in the next one.