Web Development : Presentation Layer Design - Part 3

Go back to Web Development : Presentation Layer Design - Part 2

Advanced CSS Graphic Effects

It used to be that, in order to achieve a design look like the button example in above, you had to rely entirely on bitmap graphics such as jpegs and gifs (file formats are covered further in next post). Not only do bitmap graphics increase the load time of a website, they must also be hand-crafted by a designer familiar with tools
such as Photoshop, and then hand-changed any time you wish to alter the look of the site. CSS is offering increasing levels of stylistic control over the appearance of elements. It’s now possible, for example, to add gradations, rounded corners, reflections, and soft drop shadows to text and elements simply through code.

The code that creates the above button example is as follows:

a {
     background-color: #FFFFFF;
     background-image: -moz-linear-gradient(center top , #FFFFFF, #F3F3F3);
     border-radius: 3px 3px 3px 3px;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.05)
     inset, 0 0 3px rgba(0, 0, 0, 0.25);
     color: #A6A6A6;
     display: block;
     font-family: Georgia, Times, Times New Roman;
     font-size: 1.9rem;
     letter-spacing: 0.1em;
     padding: 0.5em 0.2em;
     text-align: center;
     text-shadow: 0 1px 1px #FFFFFF;

     text-transform: uppercase;
}

For those of us new to CSS code, let’s take a closer look at the highlighted piece of the code. The button background features a smooth gradient from white to a light gray color. Here the code is saying: for the background image, let’s use the “-moz-linear-gradient” property. Let’s have the gradient go from white (#ffffff – the hexadecimal code for white) to a light gray (#f3f3f3 – the hexadecimal code for the gray).

As above shows, upon rollover the button inverts its background gradient to go from gray to white instead, gets a bigger drop shadow, and darkens the text. The CSS code for the button rollover (a:hover) accounts for just these changes; all the other effects are “inherited” automatically. This inheritance feature is the backbone of CSS (Cascading Style Sheets), and is the mainstay behind the name. Here is the CSS code for the rollover effect. Notice how the gray color #f3f3f3 is now listed first in the background-image settings.

a:hover {
             background-color: #F3F3F3;
             background-image: -moz-linear-gradient(center top, #F3F3F3, #FFFFFF);
             box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset, 0 1px 6px rgba(0, 0, 0, 0.5);
             color: #808080;
}

There are several useful CSS graphical style controls that we can deploy to avoid the use of bitmap graphics in building user interface. The advantages of using CSS for our user interface include:

• Faster download times.
CSS code is much leaner than the file sizes of bitmap graphics. Additionally, the CSS code is written just once, and can be applied as a style to any graphic or text element as many times over as we need. With graphics, each appearance of a style is yet another download.

• Scalable design.
CSS code allows you to apply scalable attributes to fonts and elements. For example, we can apply a relative text size instead of a fixed point text size. This way, the font scales up and down as required by the screen environment or user settings. Buttons can also shrink and expand to suit their environments. A bitmap button, on the other hand, is a single fixed height and width regardless of the screen environment.

• Easy maintenance.
In order to change the size, color, and visual effects of a button, text, or design element, we simply change values in the CSS code. Any button or element that is assigned to the style will automatically update across an entire website. In contrast, a website using graphics would require the designer to manually update not only each individual graphic in the site, but also potentially the HTML code as well (if the element size changes).

• Accessibility.
By using CSS, we are using actual text for our buttons and interface elements, and these are tagged and identified in a way that screen readers can digest and translate for users who rely on such devices. On the other hand bitmap graphics can become invisible; unless we tag each graphic element with a descriptive “alt” attribute, a screen reader has no idea what the element is or how it contributes to the page user interface.

The w3schools.com web site is a great online resource to get started with CSS effects. They have many code examples that you can copy and paste into a tool such as Dreamweaver where you can experiment and see the results.

Here are some handy links to their sections:
• CSS borders: adding outlines, rounded corners, and shadows to elements
• CSS text effects: such as drop shadows
• CSS font handling: using custom fonts
• CSS transformations: such as skew, scale, rotate, and location change (all useful for animation)
• CSS animation controls: such as timing and easing in and out of transitions

Read Next - Web Development : Presentation Layer Design - Part 4