I was playing with this design, and I came up with a technique so cool, I just had to post it and see if anyone could help give it a final touch.   

This is a site I’ve been working on. CollegeRecruiter.com

Notice the Featured Employers box?

A shadow around the entire box (even with rounded corners in Firefox) without the use of a single image. NO IMAGES!!!!

By using border-right and border-bottom instead, I could even make it a standard drop shadow.

Check out the simplified code here:

<div style=”BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px solid; BORDER-LEFT: #ebebeb 1px solid; WIDTH: 195px; BORDER-BOTTOM: #ebebeb 1px solid; HEIGHT: 270px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

<div style=”BORDER-RIGHT: #d7d7d7 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #d7d7d7 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #d7d7d7 1px solid; WIDTH: 193px; PADDING-TOP: 0px; BORDER-BOTTOM: #d7d7d7 1px solid; HEIGHT: 268px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

<div style=”BORDER-RIGHT: #bdbdbd 1px solid; BORDER-TOP: #bdbdbd 1px solid; BORDER-LEFT: #bdbdbd 1px solid; WIDTH: 191px; BORDER-BOTTOM: #bdbdbd 1px solid; HEIGHT: 266px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

<div style=”MARGIN: 10px; WIDTH: 195px; WHITE-SPACE: nowrap; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

Some content

</div></div></div></div>

Amazing or no? Please post your comments! There is a problem with getting Firefox to display the padding or margins correctly on the inner most box. If anyone can come up with a solution, I’d be glad to rework and post a tutorial or something.

This is a call for questions. I would simply like to hear from anyone out there who has a question relating to graphic design or web programming. My team and I will answer it and email you letting you know your question has been answered, but also give everyone else looking for an answer to that question a place to get the answer. Simely comment on this message or email me with your inquiry.

Now that Adobe owns Macromedia, I’ve got to wonder where this argument will go in the future. Will the two programs be combined in any way, or will one go away all together? 

Could Fireworks Photochop this woman? that good? Never!

Could Photoshop Develop these ads as fast as Fireworks? Never!

So, the argument of course comes down to what are you trying to accomplish. If you’re building graphics for the web, in my opinion, there isn’t a better program out there than Macromedia Fireworks? If you want to retouch some photos though, don’t go looking for Fireworks to do a great job. Photoshop is so powerful, that it is sometimes daunting for the amateur graphics hack. If you know what you’re doing you can make virtually any thing happen. Check out this Photchop Montage (if you’re not easily offended), and see how I’ve added friends people in various places. Can you do this with Fireworks… yes! Is it easier, and come out better in Photoshop… yes!

There is one thing that separates Fireworks from Photoshop, and in my opinion makes it a much better program for the average graphics job, though. A little thing called “VECTOR” Graphics. If you don’t know what vector graphics are, you’re missing out. In the hands of the right person vector graphics are an extremely powerful and efficient tool. Photoshop has some support for it, probably more after the aforementioned merger, but the speed at which you can create and control layers, and vectors in Fireworks makes many a job less difficult. I think Photoshop just wasn’t made for speed.

Disagree? Comment on it or contact me.