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

After Applying it

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!

 

Fixing the WAMP Issue when the tray icon is red

Many of us might have faced this problem, that once we start the WAMP server the tray icon fails to turn green and stays at red. This might be frustrating at times if we were planning to work on some particular project. Following are the steps which would resolve this issue-

1. Left Click on the Icon and goto Apache->Service->Test Port 80 . If you find Microsoft- HTTPAPI/2.0 then the Apache Service is not working.  From your Windows Desktop, Goto Control Panel->System & Security->Admin Tools->Services. At this stage you might find a list of processes currently running in your computer. Search for all the SQL Server processes and stop them. Restart all services,by now the tray should have turned orange.
2. Once it’s Orange, it means either Apache or MYSQL is not working. In order to check, left click on the Icon and goto Apache and then Service. Check whether Start/Resume Service is green or not. If it’s not green it means that the Apache Service is running.
3. If MYSQL is not running goto the Task Manager and click on Services. Disable the MYSQL 56  process.
4.  Restart the WAMP Server and voila the WAMP Server is Green and you are good to go!