Replacing Photoshop With CSS3 - Creating Styles

One trendy technique that I often use in Photoshop (for buttons, nav bars, etc…) is a gradient that slightly variates from its base color with a hint of inner shadow (for highlight).
This used to be a pain in the royal ass to implement with html/css2, but now is amazingly simple with CSS3. Not only is it simple, but you can also create a sort of “gradient template“ to be reused. Kind of like a “style” which can be applied to any element in Photoshop.

First off, this is how I would normally do it in Photoshop:

  1. Create the element – a button in this case:

  2. Create your gradient. Gradients that are hardly gradients seem to give a nice appearance and body to the design. Meaning you start with a base color like #6c291f and move up the scale to #e42a00.

  3. Next you add an inner shadow to give it a glow like effect. Again this too is based on your gradient color.

  4. Here is the end result (from Photoshop):

Now, let's do the exact same thing in CSS3 with 1 step.

This tested fine across all the latest browsers (Firefox 3.6+, Latest Safari, Latest Chrome, and who cares about IE ;)

  1. Simply use the brightest part of the gradient color from above (#e42a00) and substitute it as the background color below:
     1 {
    2 background: #e42a00 mozlinear-gradient(90deg, rgba(0, 0, 0, .3) 33%, rgba(255, 255, 255, .1) 123%);
    3 background: #e42a00 webkitgradient(linear, left top, left bottom, from(rgba(255, 255, 255, .1)), to(rgba(0, 0, 0, .3)));
    4 border-radius: 7px;
    5 mozborder-radius: 7px;
    6 webkitborder-radius: 7px;
    7 border: none;
    8 box-shadow: 0 0 6px rgba(255,102,102,1) inset;
    9 mozbox-shadow: 0 0 6px rgba(255,102,102,1) inset;
    10 webkitbox-shadow: 0 0 6px rgba(255,102,102,1) inset;

  2. Here is the end result (from Firefox):

Notice from the css code that we are only using one color? This is so we can easily create a super class that allows us to override its functionality. In the end all you would need is one line of code for background color to create a button for every color that exists with the same style from above applied to it.

Now to create a button using the same “style”, you would only have to create a class that defines the background color and inner shadow highlight. i.e….

1 button.lightblue {
2 background-color: #41b6ff;
3 mozbox-shadow: 0 0 6px rgba(55,243,255,1) inset;
4 }

This would give you a button like this:

The only part that isn't really flexible is the inner shadow feathering. It is currently set to blur the shadow by a fixed pixel. It would be awesome if you could blur by percent as this would allow the gradient filled element to be resized dynamically and maintain the aspect of inner glow.