• Welcome to ForumKorner!
    Join today and become a part of the community.

Drop Shadow or Glowing Text

OliverE

Power member.
Reputation
0

Glow / Drop Shadow

A lot of people don't realise but both are exactly the same, just the glow generally has 0 distance so it sites on top of the object you set it to. Drop Shadow has a distance so it looks like its floating off the page.

If you read the previous section, you will be familiar with the following code
Code:
-moz-box-shadow: 10px 20px 15px #5895c9;
-webkit-box-shadow: 10x 20x 15px #5895c9;

The Hex (6) Code is the Colour of the shadow we are creating. This code can be generated using Photoshop or my googling hex colour code generator.

The 10px and 20x is the distance from the object in the x and y direction. If you're after a glow change it to 0. If you're after a drop shadow customise it to what you want, which will be around 5-15px.

The 15px is the spread of the shadow. If you want the code for a glow keep it around 5-15px too but if you want a sharp drop shadow take out the 15px completely. The higher the px count the less spread your shadow will have.
Code:
-moz-box-shadow: 10px 10px #5895c9;
-webkit-box-shadow: 10px 10px #5895c9;

Here is a good website to demonstrate what happens with different properties and how to get negative drop shadows. http://www.css3.info/preview/box-shadow/

css4.png
css5.png
 
Top