CSS3 Drop and Box Shadows

With the addition of shadows to CSS, in CSS3, the need for photoshop is getting slowly eliminated. Now if we want to do a drop shadow on text, or a div, all we need is CSS. Remember though, these shadows are only supported in firefox, and webkit browsers, so be careful in using them!

Text Shadows

With text shadows, you can take any text that you have, be it a header, a paragraph, a span, and add a shadow to it. Let's take this example html code

<span> Hello World! </span>

This would give us the following:

Hello World

Now let's apply some basic CSS to it

span {color: blue; font-size: 20px;}

This would give us the following:

Hello World

Now let's get our hands dirty with a little CSS3 text shadowing.

text-shadow: 2px 2px 2px #000;

This would get us the result of:
Hello World

You can further adjust the colors, etc. in order to great a truly cool looking text-shadow effect.

Box Shadows

With Box Shadows, you can take any box element, a div, or an image for example, and put a drop shadow on it.

Let's start with some basic html code.

<div><span>Hello World! I am Content</span></div>

Let's add some basic CSS code.

div { width: 200px; height: 200px; background: green; }

Let's add a drop shadow.

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

And we get a result like this:

Hello world! I am content

You can further change this to get a truly cool box/ drop shadow.

Two Heads Are Better Than One, Are They Not?

Today I realized that I work much better in groups. Now, that sounds kinda funny when I think about it, because it's stating the obvious.

When I work on coding projects by myself, sometimes everything seems overwhelming. By this i mean I need to worry about making the back end, server side that is, work functionally and speedily, while not forgetting about making the front side look great.

I am primarily a front-end developer, meaning that I have a natural taste of colour choices, fonts, etc. and I know how to apply them into a webpage to make it look great. Heck, I can write you up a social network site that looks like twitter in about half an hour, it's the part that makes it work like twitter, that is the part that hurts me.

For the most part, back-end development comes first. How I normally start a project, is in Photoshop. I draw out what i want the final copy to look like, and then I head into my local server, and start figuring out how I want it to work.

Normally this is the time that I give up.

See, my web skills only extend so far, I do front end development. I can make good money off of this, because of businesses wanting to get onto the internet. However, the actual money that comes out of web design, is in combined efforts.

I'll put it like this:

If twitter looked like it does, but didn't post anything, how often would you use it? Probably never. But if twitter functioned like it does, but you need to go through four pages filled with text that hasn't been cleaned up, and you can't tell which posts are which, how often would you use it? Again, probably never.

My point is, that as a front-end developer I have to seek out back-end developers, because otherwise websites won't work as planned. And back end developers need to seek out front end developers, because truth be told, although their websites work, they look crappy for the most part.

It's an interesting concept, knowing both, but sadly very few people do. It's just like two seperate languages, you have some that speak a little of both, some that speak fluent one language, and some that are fluent in both.

That's all for now folks, have a nice day :)