Five Features in Photoshop You Can Do with CSS3

Adobe Photoshop is one of the most useful programs for graphic design and web development, not to mention one of the most expensive! As web browsers evolve to support HTML5 and CSS3 we can finally take advantage of some useful features in CSS3. Before we could only do things in Photoshop utilizing images and a combination of CSS and/or Javascript coding. Now modern browsers allow us to achieve the same effects with just pure CSS! Modern browsers include Internet Explorer 10 (IE 9 for some things) and most versions of Chrome, Firefox and Safari. You can double-check on http://caniuse.com/ to see if your browser supports a particular CSS3 property. Here is my list of five common graphic design tasks completed using CSS3:

1. Change Opacity

Setting opacity on graphic elements is one of the simplest and most common things to do. It can also be achieved in older versions of Internet Explorer using visual filters.

img {
	opacity: 0.75;
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	/* IE 5-7 */
	filter: alpha(opacity=75);
}

2. Rounded Corners

With border radius you can create rounded corners on square elements. You can also create a full circle mask by setting the border radius to 50%.

img {
	border-radius: 25px;
	/* Safari and Chrome */
	-webkit-border-radius: 25px;
	/* Firefox */
	-moz-border-radius 25px;
}

3. Gradients

Gradients using CSS help to decrease load time on a website. Instead of having to load another image asset gradients are only a few lines of code.

div.gradient {
	height: 100px;
	background: linear-gradient(black, gray);
	/* Safari and Chrome */
	background: -webkit-linear-gradient(black, gray);
	/* Opera */
	background: -o-linear-gradient(black, gray);
	/* Firefox */
	background: -moz-linear-gradient(black, gray);
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#808080');
}

4. Drop Shadow

Shadows in CSS are not as detailed as shadows created using Photoshop, but it works great for simple drop shadows and inner shadows.

div.shadow {
	height: 100px;
	box-shadow: 0px 5px 10px 0px #ddd;
	/* Safari and Chrome */
	-webkit-box-shadow: 0px 5px 10px 0px #ddd;
	/* Firefox */
	-moz-box-shadow: 0px 5px 10px 0px #ddd;
}

5. Rotate and Flip Images

Rotate and flipping images come in handy when you have one image that you want to display in different directions such as arrows. You don’t have to create a separate image for each arrow direction. It just takes one image asset and with CSS code you can have it facing as many directions as you’d like.

/* Flip Horizontal */
img {
	transform: scaleX(-1);
	/* Firefox */
	-moz-transform: scaleX(-1);
	/* Opera */
	-o-transform: scaleX(-1);
	/* Safari and Chrome */
	-webkit-transform: scaleX(-1);
	/* IE 5-7 */
	filter: FlipH;
	/* IE 8 */
	-ms-filter: "FlipH";
}

/* Rotate */
img {
	transform: rotate(45deg);
	/* IE 9 */
	-ms-transform: rotate(45deg);
	/* Safari, Chrome, Opera */
	-webkit-transform: rotate(45deg);
}

There are many capabilities in CSS3 and many more to come as it progresses to the next iteration. It is very helpful to have the ability to do simple things with pure CSS.