CSS-Shapes

Shapes can be of different sizes and designs. It can be a circle,  rectangle, square,  pentagon or any other shapes. CSS helps you easily create and design any kind of shapes you need. The reason I meant that it can be created “easily” is because  before CSS came into existence web developers had to create images using Photoshop and then import them to their web pages. And designing and creating them in HTML was a pain to say the least. So, CSS in a sense has become a savior to them . It not only makes the process of creating shapes simpler but also faster and hence saves a lot of time.

 

Let’s start by creating a simple shape, say a Circle. By Geometry you would know that the main and only parameter to create a circle is the radius. Thus, for creating a circle in a web page the only input we need is the radius. I am creating a circle of radius 60px;

 

Capture

Do  you remember, the  property I talked about which rhymed with radius??

Any guesses??

Yup, It’s Border Radius. I have used border-radius here and in addition to that I have also used the height and width attribute. Since all shapes have a height and a width. In order to draw a circle, the height should be equal to the width and the radius (border-radius over here) should be half of the height or the width.

First I created a container/division named circle and then I set the height and width equal to 120 px and the border-radius half of that value which is 60 px.

 

This is what I wrote-

#circle{

height:120px;
width:120px;
border-radius:60px;
background-color:yellow;

}

Division/Container is a space which we allocate for an element in a web page. We will go into detail later.

The Rule of the Thumb for creating a circle is-

height=width;

border-radius=1/2*height or 1/2*width;

The next shape which I am going to focus on is the Square. Everyone knows what a square is right? It is a four sided geometrical figure with all the sides being equal.

Let’s draw a square of length 100px.

Capture

I have drawn a square with height equal to width which is 100px. This is what I wrote-

#square{
height:100px;
width:100px;
background-color:red;

}

Note that the “square” which I mentioned on top has got no significance in generating the shape. It is just a name of a container. I could have given it any other name but just for the sake of relevance named it as square.

In order to draw a square, the key point to remember is-

height=width;

Before wrapping up, let’s touch on one more shape-the rectangle. In a rectangle the length is twice the width. Let’s Draw a Rectangle of length 150px;

Capture

I have drawn a rectangle of width equal to 150 px and height being the half which is 75 px.

What I have written is-

#rectangle{
width:150px;
height:75px;
background-color:blue;

}

We should remember that in order to draw a rectangle,

height=1/2*width;

Another point which can be noted is that whenever you are drawing a shape you should only think about the height and the width. The height is the vertical length and the width is the horizontal length.

images

 

Just take this picture as an example. The X co-ordinate is named as “W”, which is basically the width of the element/horizontal length. And the Y co-ordinate is named as “H” , which is the height of the element/vertical length.

Hope you enjoyed today’s lesson. There are still a lot more shapes to discuss. And in order to draw those shapes you need to be familiar with  some other properties. I will be discussing those properties in my forthcoming blogs and then I will introduce the 2nd edition of shapes.

See you next time!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s