|CSS Made Easy - CSS-I|
Part 1 - Create striking image effects that conserve network bandwidth
An Article by your Guide Bradley Mitchell
Tastefully incorporating graphics to a Web page dramatically improves its visual appeal. Too much imagery can drown an audience, but too little imagery (or none at all) renders a page dull, flat, and visually uninteresting.
Imagery and Networks
Large or detailed graphics considerably increase the load time of Web pages in many cases. Home networks with dial-up Internet connections are especially sensitive to the use of images.
Business networks, on the other hand, tend to offer high-speed connections and relatively few hops between segments. Compared to home networks, intranets offer great opportunities to make use of graphics. Many employees sport high-resolution monitors on their desktops or laptops. Many organizations also standardize on a single, current-generation browser that provide uniform HTML and scripting capabilities to content authors. Yet, in spite of these luxuries, intranet sites also tend to lack truly compelling visuals.
The CSS Approach
Those skilled in computer-aided graphic design traditionally have used powerful (and sometimes expensive) professional image production tools as part of Web content creation. This process can lead to visually interesting sites, but it requires a serious investment of time and talent that some are unwilling or unable to justify.
Alternatively, intranet and other Web developers may try using CSS to improve their visual content. The term CSS stands for Cascading Style Sheets, a Web technology that can prove extremely useful in better organizing and optimizing Web pages. CSS has received some criticism in the general press because historically not all browsers support it in a complete or standard way. However, CSS incorporates several very useful features including the one described below.
CSS Image Filters
CSS image filters are applied to an image after it is retrieved from the Web server. The browser internally performs the given image transformation before rendering. This technique conserves network bandwidth by not requiring that image effects be built into the images files on the server side.
Recall that CSS styles may be placed directly in the HTML file using the STYLE tag, or they may be placed in a separate file using the LINK tag; e.g.,
<link rel="stylesheet" type="text/css" href="...>
Some of the more useful examples of filters appear on the next page using the following sample image.
To apply these example filters, simply include the code in a separate style file and embed the class name within the IMG tag of the containing HTML page; e.g.,
<img class=... src=...>