Oct 4, 2014

CSS Tricks: Automate Complex Tasks Like A Ninja

By Paul Schmitt   Posted at  9:00 AM  Oct 4, 2014   web design No comments

Traditional image editing vs global code-based image editing.
Learn how to make global level graphic edits without uploading a single JPG.

I. Create Code Based Global Drop Shadows
Coming from a Print Design background, there were several tricks that I learned to make graphics pop. Without these techniques the product pages that I worked on would have been dull, flat and frankly, overwhelming.

Like the stock prices listed in the daily newspaper these ads could have been pure info and rendered in a dull way. With a few tricks, information flows in rows and columns guiding the reader through the spots almost effortlessly. Before they know it they've caught the logo, tagline and product in a few seconds.

Why not use these common techniques from newspaper ads and circulars on web-based work in a broad, code-based way?

The most basic lay-out trick are drop shadows. Catalogs and national auto ads in particular use a lot of drop shadows on their products. It's pretty common for product images online to have these same drop shadows but: can they do it in a timely way when there are thousands of items?

One choice is to add shadows in Photoshop. One by one. This would require a great deal of time, setting up shadows on each layer and then uploading each processed image. There is no ninja-ing here. This task is dry and dull. It is work that no one will ever enjoy doing.

Instead of image processing in this way, we could define some CSS code to apply a shadow to a series of images that we can change globally. This way we can refer to it automatically by using the class tag. Any changes to this class code would effect every shadow that it was applied to w/out uploading a single image.

Floating in space or...
Sitting in place?

Figure A. One image displayed with two methods. The first is a flat JPG. The second is a PNG on a transparent background with a CSS3 based drop shadow.

Above, in Figure A, are two images. The first is a JPG on a white background. The second is a PNG with a transparent background. To add a shadow on the JPG we have to adjust several settings in Photoshop to get a drop shadow, save it and upload it. To add a drop shadow under the PNG all we need to do is create a couple <div> elements with settings that will emulate a drop shadow.

Let's start with adding a CSS3 drop shadow to one image and then move into a global solution based on those results.

First, we need to drop a PNG image into a <div>. Next, we set it's stacking order be on the top with a property called "z-index". The lower the z-index number, the lower it's stacking order. This image's stack position will be 2.

Figure B. The start of the code. The image is in a 200px wide <div>.

Now that our image is in a <div> (Figure B) we need to get it in place. We will add the "float" property in combination with the "position" property. This allows us the ability to move the image <div> where we need it. Float will be set to "left" (float:left;) and position will be set to "relative" (position:relative;) meaning that the <div> will position itself with regard to surrounding divs.

With the image <div> floated, it can be moved around by using top/left/right/bottom properties instead of margin or padding. In this case, we need to state "right:-200px;" to get it into place in the frame. Check that these properties are set by referring to Figure D. below.

Next, add a 200px wide 40px tall <div> directly below it with black as it's background-color. Then, we turn it into a simple shape with CSS3 by adding the following code:


Figure C. This code defines a shape inside of the shadow object. No image is needed.

This creates a black cylinder within the shadow <div>. For cross-browser fucntionality we use -moz for a Firefox specific property, -webkit for Safari and border-radius for Explorer.

The float and position properties for this one are important here. Set the position to "absolute". This setting means that the shadow placement is fixed in place. We will need to adjust it using margin-top and margin-left.


Figure D. Two divs lined up with the shadow underneath of the image.

This cylinder shape is "floating" directly underneath the image. Lastly, this shadow <div> has a z-index of 1. This setting will place the shadow object below the image that it appears to be falling from.

PNG with a solid shadow underneath of it.

Figure E. The two divs from Figure D are implemented on this page.

II. Refining The Shadow
Now we have an initial drop shadow in place. This black shape represents the total area where the shadow will fall. Time to refine this rough shape with a few tricks.

In Photoshop and Illustrator, we have access to gradients. CSS3 can emulate these gradients with both linear and radial options. Add the following code to the shadow <div> to create a gradient:

Figure F. This CSS changes the flat black oval into a gradient that spreads from the center.

This code, written for cross-browser functionality, will create a radial gradient.

The gradient starts in the center of the shadow <div> and moves from dark gray at 50% opacity (rgba(90,90,90,.5) to a light gray at 20% opacity (rgba(190,190,190,.2) and end at white at 10% opacity (rgba(255,255,255,.1).

Some Background:
This gradient works for images on a white background, like our example, but the white value (rgba(255,255,255,.1)) would have to be adjusted for this trick to work on images appearing on a different background color.

At this point, we have the the image and shadow in place. Now, these elements should be encased in a third outer "container" <div> to allow for centering of the product photo. After aligning them inside this "container" the entire three-part element should look like this:

The PNG has a gradient drop shadow beneath of it.

Figure G. Everything as it should look at this point. The image and gradient drop shadow are lined up.

And this is the code for the image above:

Figure H. The code for the HTML divs. One more step and we are automated.

That's all the heavy stuff. Now we move onto stream-lining the HTML and CSS. But before we do that we can also...

Flip The Script!
To use this method with JPG images on white backgrounds, you can reverse the stacking order. This will place the shadow layer on top of the JPG. However, with JPG images on a white background there are potential cross-browser/device alignment issues. Try this method after you've successfully completed this tutorial with this PNG.

OK, now that the script got momentarily flipped we can continue.

As mentioned in the beginning of this tutorial, we need to prep this code to be used on a wide array of images.

The image and shadow portions of the code need to be separated and packed into a CSS document with a class for each. In this way, the code can be referred to repeatedly on each object that needs this type of drop shadow.

Figure I. The HTML and CSS for the divs are separated. A new class now controls the drop shadow.

Now the solution for one product can be a solution for a group products, helmets in this example. Every <div> that uses the shadow class is edited along with this one piece of CSS. So, when you have it right in one place you have it right in dozens of places as well. The best part is that you never had to edit or upload a single image.

Note that in the CSS for this final example, all of the characteristics for the shadow <div> are defined. In the HTML tab less than 25 characters are used for the shadow. The image element is 25 characters plus the image URL and alt tag. This is handy for SEO guidelines when you have multiple images that need shadows on a page.

Try it out. See what you can come up with. Next time, controlling drop shadows on a <div> in a very different way using the mysterious shadow-box functions.

About the Author

Paul Schmitt started Gargantuan Media after he graduated from college at The Minneapolis College of Art and Design in 2003. Since then, he has worked for Fortune 500 publishers and retailers as a Graphic Artist, Web Designer and Designer across the county. He has directed documentary films, published comics and animated short films. He currently lives and works in the Indianapolis area.
View all posts by: Paul Schmitt

0 comments:

Back to top ↑
Connect With Us

    Popular Posts

©2014 Gargantuan Media |