Ben's blog and portfolio » color

CSS button recipe

Ben — Tue, 08 Nov 2011 21:22:06 +0000

Tap me

Here’s a quick style I wrote for creating buttons that look tappable.

.action-button {
	display: block;
	width: 120px;
	padding: 7px;
	text-align: center;
	color: #fff;
	font-size: 15px;
	font-family: 'hevetica neue',helvetica,arial,sans-serif;
	cursor: pointer;
	text-shadow: #145ec2 0 -1px 0;
	background: -webkit-gradient(
		linear, left bottom, left top,
		from(#347ee2), to(#86aceb),
		color-stop(0.5, #347ee2), /* Dark value */
		color-stop(0.5, #548fe5) /* Medium value */
	);
	-webkit-border-radius: 4px; /*  */
	-moz-border-radius: 4px; /*  */
	border-radius: 4px; /*  */

}
.action-button:active {
	background: -webkit-gradient(
		linear, left bottom, left top,
		from(#86aceb), to(#347ee2) /* Gradient colors, inverted. */
	);
	position: relative;
	top: 3px; /* Give it that "depressed button" look. */
}

How it works

Set the width to whatever fits your requirements.
For testing in a desktop browser.
Shadow color should be a shade darker than your darkest gradient.
Lightest color, in this case, pale blue.
Medium value creates the illusion of a chrome-like reflection.
For Webkit browsers like Chrome and Safari.
For Gecko browsers like FireFox.
For future browsers.

Thoughts on applying duotones to data

Ben — Mon, 19 Jul 2010 13:55:04 +0000

The ability to tint black-and-white photographs with color has been a staple of photography for decades, and modern image editors make warming and cooling grayscale images a snap. This concept of a steady progression of shades can be used to present information as well.

This technique of tinting digital photos works well for presenting information and can improve usability. Just as a gradient shows a range of colors, a monotone or duotone can be used to show a range of data.

Read the full article I wrote at Webdesigner Depot.

Photoshop Curves does more than change highlights and shadows

bbb — Tue, 22 Jun 2010 08:56:22 +0000

Photoshop’s Curves has long been associated with making images brighter or darker. But few people know that it can also change color with greater degrees of control than the Hue/Saturation or Color Balance controls.

From slight selection changes to creating great duotones, Curves is a powerful tool to master… if you’re willing to practice.

Read the full article I wrote at Webdesigner Depot.

Above: Using Curves to create a precise duotone from a grayscale photo.

Above: Curves is a grid of before & after. The horizontal axis represents an image’s current values; the vertical represents change.

Using opacity and Photoshop blend modes pattern magic

bbb — Tue, 08 Jun 2010 06:33:59 +0000

When it comes to creating patterns, the ability to duplicate, resize and turn a layer is one of Photoshop’s greatest features. Translucent shape layers can be very useful when creating repeated geometric “textures” of color and form. They’re easy to create, fun to play with and best of all, they can be uniquely yours.

In searching for interesting patterns, designers sometimes pass over basic shapes in favor of more complex geometrics. But simpler is often better. The trick is to pay attention more to how shapes interact than to how a shape looks on its own. The concepts are simple:

As translucent shapes overlap, they create new shapes.
Complex patterns emerge from apparently simple origins.

The question’s been asked: Other than looking pretty, what good is it? Like any tool, the strength of a pattern lies in its application. The examples here show how a pattern emerges from simple shapes and how patterns may be applied to text.

Read my article about about creative Photoshop patterns at Webdesigner Depot.