CSS- Learn one Property a day

I am not a graphic designer but that does not mean that I cannot learn CSS. There has been a common misconception that CSS is only for people with an aesthetic sense for design and it is meant only for them. This is not true, CSS should be learnt by anybody who wants to learn and develop new skills. CSS is a language which is responsible for the color, fonts, positioning of content in a web page. There are millions of tutorials out there where you can gain a grasp of the subject.  What I am going to show you are some properties which are easy to learn and which can make a significant change in your website. It’s a series where you can learn one property every day.  So, the 1st one is called box-shadow.

Any guesses to what it does?? Well, if you notice it has two words separated by a hyphen.The first one is called box and the second word is shadow. It literally means “shadow of a box” and this is exactly what it does. So, any  box kind of element like a square or a rectangle can be made to have a shadow.

Now you might be thinking that why do we need it?  Using this property actually adds a certain depth to that particular object, like a 3 Dimensional effect. It enhances the attractive quotient.

Here is an example which shows the effect box-shadow does on an object.

 

Before applying that property

Before

After Applying it

Capture

See any difference??

 

It eventually boils down this single line of code

box-shadow: h-shadow,v-shadow, blur, color;

All the values are in pixels.

h-shadow-Represents horizontal shadow, It can either contain positive or negative values. The positive values generate a shadow towards the right of the object whereas the negative values generate a shadow towards the left of the object.

v-shadow-It also can either be positive or negative. It means vertical shadow. So positive values generate a shadow below the object and negative values generate a shadow above the object.

blur- It is actually the literal definition of it. Higher the value greater will be the blurring effect.

color- The color of the shadow.

eg- box-shadow: 10px,5px, 10px, black;

It means it will generate a shadow 10 pixels to the right of the object, 5 pixels below the object, with a 10 pixels blur intensity and the color of the shadow being black.

Hope this was not too intimidating. It might seem hard at first, but I assure you, it will only become easier from there on.

That’s it for today, 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