I could write a short novel on how much I love new technologies. As a front-end developer, my palette is forever expanding with newer, cleaner, and more efficient coding techniques. CSS3, for example, takes so many of the workarounds I’ve been accustomed to using with CSS2 and makes them a thing of the past. Take a simple drop shadow, for instance. There were many tricks that we front-end developers used to rely on to accomplish a drop shadow with CSS.
Drop Shadows, the Old Method
Only a few short years ago, I thought I was pretty clever when I would slice up a background image in Photoshop that was one pixel tall and 800 pixels wide.

It would loop all the way down the <div> and I could give myself a nice pat on the back because a section of my web page had a shadow on it. It was all fine and dandy, but it would only create a shadow on two sides of the object. Any person in their right mind would look at it and think, “that doesn’t even look realistic.” Naturally, we need shadows on all four sides of an object to make it look real, so I put my CSS noggin to work and came up with a nifty little trick. The code was bulky, but it would work for even the most stubborn of browsers.

The CSS was also a bit unattractive. I’d need to use hard widths and heights, add padding to the content, and create three separate background images just to get a shadow to work.

All I needed to do was create these three separate background images – one for the shadow header, one for the shadow footer, and one to loop infinitely with the content. That sure was a great fix – until I decided that the sidebar should be 20 pixels wider on one of my pages. Then all I had to do was go back into Photoshop, make each one of my slices 20 pixels wider, re-adjust the images to fit, export them, create another CSS class, and re-adjust everything accordingly. Needless to say, the process got monotonous and the code got extremely bulky.
Drop Shadows, the New and Improved Method
With the box-shadow property in CSS3, I can take any HTML tag I want and give it a drop shadow that I can customize myself through parameters. Shadow offset, size, blur, and color can now all be controlled by changing one or two numbers inside a line of code. And best of all, it doesn’t affect the CSS box model at all! No more re-calculating my CSS widths to include a 5 pixel shadow on the right side. No more wasting time playing around with widths and padding that break my CSS floats when I alter them. I add one CSS class, type one line of code, and then I’m off to bigger and better things. Problem solved.

I then add some simple CSS to get the desired effect.

Now, box-shadow is still a bit experimental, so I still do need to include the -moz and -webkit prefixed properties to support Firefox and Safari. The big accomplishment here, though, is that I no longer need to add unwanted <div> tags to accomplish a simple styling effect.
I don’t need to waste my time remembering how to format my <div> structure, or worry that all of these extra empty <div> tags are pushing content lower on the page and further away from search engine crawlers. Plus, I’m a nit-picky ninny when it comes to code, and I don’t want all of this extra garbage cluttering up my HTML.
Other CSS3 Advantages
There are many reasons why CSS3 attributes such as box shadow are awesome. Here are the three that matter the most, in my humble opinion:
- The web is all about delivering content as efficiently as possible and things like drop shadows are purely cosmetic. Front-end developers should not be adding multiple HTML tags to “fake” a cosmetic effect. We should be using proper HTML tags to deliver web content in the best way possible.
- Doing things in a more simplified way isn’t so that developers can be lazy – it’s so we’re not wasting time with monotonous tasks. If I spend an hour creating a fake cosmetic effect with CSS, that’s hardly using my time efficiently. Multiply that wasted hour by eight tedious tasks, and I’ve wasted an entire work day doing just that – tedious tasks. Nothing is more disheartening than looking at an entire days worth of work and thinking, “Wow, I got absolutely nothing done. What was I doing all day?”
- By cutting out the unneeded HTML tags, CSS classes, and images used to create a fake cosmetic effect, you are cutting down on page load time. We all tend to overestimate our end user’s connection speed, but how many times do you find yourself complaining about how slow your internet is loading?
CSS3 is great because it’s one small progressive step towards a more streamlined web. By using CSS3, front-end developers are creating faster and more efficient websites without the hassle of old CSS ‘tricks.’ When combined with HTML5, the process of building a website is completely different than it was a few years ago.
The best part of being a front-end developer is that things are constantly changing, and we challenge ourselves everyday to accommodate these changes. I am forever learning a better way to accomplish the same effect, and this constant desire to learn is what fuels me to always try to better myself. CSS3 is just one more reason why I love being a front-end developer.