Simple CSS Cross-Browser Drop Shadow

After seeing what Google did with Google Images, I thought, “OK… time to find a cross-browser way of doing drop shadows.” I was expecting to find something that combined CSS, HTML, and possibly some JQuery (which has some plugins for doing drop shadows, but none that really struck me as adequate for my project’s needs).

So then I found a reference to this blog post by Robert Nyman:

Drop shadow with CSS for all web browsers – Robert’s talk

…which includes a very simple CSS rule that seems to work in the following browsers:

  • Firefox 3.5+
  • Safari 3+
  • Google Chrome
  • Opera 10.50
  • Internet Explorer 5.5+

…and here’s a quick look at the final product (with some extra commentary from yours truly…):

.shadow {
	/* firefox, mozilla, et al. */
	-moz-box-shadow: 3px 3px 4px #000;

	/* webkit: safari, chrome */
	-webkit-box-shadow: 3px 3px 4px #000;

	/* css3 */
	box-shadow: 3px 3px 4px #000;

	/* For IE 8 (concatenate on one line) */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(
		Strength=4, Direction=135, Color='#000000')";

	/* For IE 5.5 - 7 (concatenate on one line) */
	filter: progid:DXImageTransform.Microsoft.Shadow(
		Strength=4, Direction=135, Color='#000000');
}

I’m thinking that with some tweaking of the colors I can get what I’m really after, and this should integrate nicely with some relatively simple JQuery scripting as well.

We shall see… if it doesn’t work out I’ll post a follow-up.

Occam’s Razor: A Great Principle for Designers [Webdesigner Depot]

Occam’s Razor: A Great Principle for Designers | Webdesigner Depot:

Lex parsimoniae is the Latin expression of what is known in English as Occam’s Razor, a philosophical rule of thumb that has guided some of the world’s best and brightest minds (including Isaac Newton). It is named after the 14th-century logician and theologian William of Ockham. But what the heck does Occam’s Razor have to do with web design? I’m glad you asked. To put it plainly, Occam’s Razor states that the simplest explanation is usually true. For our purposes, to use Occam’s Razor is to do something in the simplest manner possible because simpler is usually better. In this article, we’ll show you how to use Occam’s Razor to create better websites and to enhance the user experience, both for yourself and your clients.

Overcoming Design Creative Block

While specifically written for Logo Design, I thought the suggestions contained in this article were applicable to most other design disciplines like web or user interface design…

Tips for Overcoming Logo Design Creative Block:

This phase can be very frustrating for any creative person. If you don’t recover within a few days, a creative block can destroy your self-confidence. The fear that you will never again be able to produce good work drives you to desperation. You try harder and harder and end up exhausting your mental faculties. This makes the situation worse. Therefore, it is very important to deal with this delicate phase of creative block with a lot of patience and care. Only you can get yourself out of it. Designers all over the world face this problem and don’t know what to do. There is actually no reason to panic. Let’s look at a few ways by which you can get rid of your creative block.

Setting Session Variables in ASP.NET from JavaScript

Someone on the ASP.NET forums asked how to set session variables in JavaScript. The answers given ranged from “totally wrong” to “rather misleading” or “marginally helpful”.

So in a nutshell, yes, you can totally do it. Not only will you be able to do it, you will love doing it after you get used to the process of getting it set up.

Here’s the recipe for success:

  • Add an ASP.NET AJAX ScriptManager to your page.
  • Create a simple ASMX Web service using Visual Studio.
  • Uncomment the Attribute directly above the class definition that reads [System.Web.Script.Services.ScriptService] to enable ASP.NET AJAX to see your web methods.
  • Create a method to get or update data in your session, and make sure the Attribute above the web method reads [WebMethod(EnableSession = true)] so you can have access to the session via your web service method.
  • Add a <Services> section to your ScriptManager.
  • In the <Services> section add a <ServiceReference> element with the Path attribute set to the path of your .asmx page.

OK, so that enables the ability to access your session from the client side.

But here’s the really awesome part:  if you include a reference to the web service in your .js file like so:

///<reference path=”~/MyServices/MyService.asmx” />

…you will get IntelliSense in the JavaScript for your web service methods! it’s very cool.

So then you just call your web service methods like you would any other JavaScript function. It’s totally easy and almost magical. It’s one of my favorite features of ASP.NET AJAX.

Designing with Paper Prototyping [UX Booth]

Designing with Paper Prototyping | UX Booth:

Prototyping is key to any successful design. Paper prototyping is usually the first step, but does it fit into a world where mobile devices are king? Yes, but not using the conventional method. Combine the physicality of the device and the power of paper prototyping and you have a solution that’s fit for the new era of computing.

NSOperation Xcode File Template

From Jeff LaMarche’s iPhone Development site:

iPhone Development: NSOperation Xcode File Template:

NSOperation Xcode File Template Although I’m generally averse to using a lot of template or boilerplate code, there are times when it’s handy to have file template beyond those that Apple provides. Something I’ve done a fair amount of lately is to create NSOperation subclasses, and there’s enough work involved with setting up an operation that I made an Xcode file template that contains all that setup work.

This template includes a delegate and a protocol and some private methods for communicating with the delegate. Now, when I have lots of NSOperation subclasses in a single project, I’ll actually move much of this stuff to an abstract parent class or a category on NSOperation, but templates don’t have any way of setting up dependencies, so I’ve made this self-contained and you can do your own refactoring.

Making User Interface Elements Difficult to Use By Intent [Six Revisions]

Making User Interface Elements Difficult to Use By Intent:

In modern web interface design, no other principle has been heralded and pushed onto us as much as the concept of user-centered design. User-centered design tells us that we should do everything we can to make our user interfaces as easy to use and as intuitive as possible.

However, a big part of designing user interfaces that are easy to use also involves figuring out what things should be a bit more difficult to to use. It’s a counter-intuitive notion that’s central to effective user interface design.

Finally we can manage our tabs with Tab Candy for Firefox.

This has been making its rounds on the Twitterverse and thought I’d just capture it here for posterity.

Finally, it appears that we will be able to manage our tabs more intuitively and easily with Firefox 4, using a feature called Tab Candy which is a very similar concept to Exposé on Mac OS X but brought to the browser.

As I was just having some issues this morning with tab organization in Firefox, this comes as a welcome change for the future. Can’t wait to try it out…

Tab Candy: Making Firefox Tabs Sweet « Aza on Design:

Tab Candy: Making Firefox Tabs Sweet Sponsored by Say goodbye to pre-fab email templates. Meet Emma, the Web’s most stylish email marketing service. Say goodbye to pre-fab email templates. Meet Emma, the Web’s most stylish email marketing service. The power of the browser has grown substantially in the last ten years. We now use the Web to multi-task the activities we juggle every day, like vacation plans, purchases, sharing pictures, listening to music, reading email, and writing a blog post. It’s hard to keep everything straight with dozens of tabs all crammed into a little strip along the top of your browser. Your tab with a search to find a pizza parlor gets mixed up with your tabs on your favorite band. Often, it’s easier to open a new tab than to try to find the open tab you already have. Worse, how many of us keep tabs open as reminders of something we want to do or read later? We’re all suffering from infoguilt. We need a way to organize browsing, to see all of our tabs at once, and focus on the task at hand. In short, we need a way to get back control of our online lives. Enter: Tab Candy.

30+ Handy Blank Templates for Designers

30+ Handy Blank Templates for Designers | Creative Repository:

Sometimes you have a nice concept for a design in your mind, but you don’t know where to start; or sometimes you are just not aware of the right size for the design to implement. That’s where templates come handy. I have collected some very useful templates with proper guidelines, sizes and resolutions for design projects like business cards, letterheads, vinyl designs, brochures etc. I believe that these will prove to be a great time-saver for many of you guys. Most of these are in PSD or AI format, and are easily editable. Hope you find them useful.