CSS, Accessibility, and Images · 04/03/2009 · CSS "Reset" Sometimes it is useful to use a CSS...

Table of Contents | All Slides | Link List | Examples | CSCI E-12

CSS, Accessibility, and ImagesMarch 4, 2009

Harvard UniversityDivision of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2009 David P. Heitmeyer

Instructor email: [email protected] staff email: [email protected]

CSS, Accessibility, and Images http://localhost:8080/cocoon/projects/cscie12/slides/20090304/handout.html

1 of 86 3/4/2009 1:55 PM

CSS "Reset"

Sometimes it is useful to use a CSS stylesheet to "reset" styling for all elements. This attempts to startyour styling with a "blank slate" instead of the browser defaults.

Eric Meyer's CSS Reset Reloaded

YUI Reset CSS

Basic Markup

Basic Markup with Eric Meyer CSS Reset

Basic Markup with YUI CSS Reset

Basic Markup: With CSS Reset:


2 of 86 3/4/2009 1:55 PM


3 of 86 3/4/2009 1:55 PM

CSS from Eric Meyer for "Reset"

view plain print ?

html, body, div, span, applet, object, iframe, 1.h1, h2, h3, h4, h5, h6, p, blockquote, pre, 2.a, abbr, acronym, address, big, cite, code, 3.del, dfn, em, font, img, ins, kbd, q, s, samp, 4.small, strike, strong, sub, sup, tt, var, 5.dl, dt, dd, ol, ul, li, 6.fieldset, form, label, legend, 7.table, caption, tbody, tfoot, thead, tr, th, td { 8. margin: 0; 9. padding: 0; 10. border: 0; 11. outline: 0; 12. font-weight: inherit; 13. font-style: inherit; 14. font-size: 100%; 15. font-family: inherit; 16. vertical-align: baselinebaseline; 17.} 18./* remember to define focus styles! */ 19.:focus { 20. outline: 0; 21.} 22.body { 23. line-height: 1; 24. color: black; 25. background: white; 26.} 27.ol, ul { 28. list-style: none; 29.} 30./* tables still need 'cellspacing="0"' in the markup */ 31.table { 32. border-collapse: separate; 33. border-spacing: 0; 34.} 35.caption, th, td { 36. text-align: left; 37. font-weight: normal; 38.} 39.blockquote:before, blockquote:after, 40.q:before, q:after { 41. content: ""; 42.} 43.blockquote, q { 44. quotes: "" ""; 45.} 46.


4 of 86 3/4/2009 1:55 PM

CSS for Page Layout: Fixed Width

Define region widths based upon fixed sizes (pixels).

Use "div" elements to define areas and CSS to arrange them on the page.

view plain print ?

<div id="wrapper"> 1.<div id="header"> ... </div> 2.<div id="maincontent"> 3. ... 4.</div> 5.<div id="navigation"> 6. ... 7.</div> 8.<div id="footer"> ... </div> 9.</div> 10.

Example 5.1


5 of 86 3/4/2009 1:55 PM

Example 5.1 Source:

view plain print ?

<div id="wrapper" > 1.<div id="header" > 2. <h1>Lorem ipsum dolor sit</h1> 3.</div> 4.<div id="maincontent" > 5. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. 6. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec 7. dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris 8. turpis eu purus. </p> 9. <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla 10. semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, 11. nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. 12. Vestibulum nibh.</p> 13. <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet massa 14. posuere cursus. Sed vitae justo quis tortor facilisis ultrices. Integer id erat. Donec 15. at felis ut erat interdum vestibulum. Quisque et eros. Donec fringilla, est in 16. condimentum venenatis, tortor velit vehicula sem, in elementum quam sapien eu lectus. 17. In dolor urna, ullamcorper vel, tempor sit amet, semper ut, felis. Praesent nisi. </p> 18.</div> 19.<div id="navigation" > 20. <ul> 21. <li>Mauris</li> 22. <li>Cras</li> 23. <li>Proin</li> 24. <li>Integer</li> 25. <li>Curabitur</li> 26. <li>Integer</li> 27. <li>Suspendisse</li> 28. <li>Quisque</li> 29. </ul> 30. 31.</div> 32.<div id="footer" > Proin quis orci eu erat molestie varius. Praesent condimentum orci in 33. lectus. Ut ipsum. In hac habitasse platea dictumst. </div> 34.</div> 35.

In style element (<style type="text/css">) within head element:

view plain print ?

#wrapper { 1. width: 750px; 2. margin: 0 auto; 3. } 4.#header { 5. width: 100%; 6. background-color: #ccc; 7. } 8.#footer { 9. clear: both; 10. background-color: #ccf; 11. } 12.#navigation { 13. width: 160px; 14. float: left; 15. background-color: #fcc; 16. } 17.#maincontent { 18. width: 540px; 19. float: right; 20. background-color: #cfc; 21.} 22.

Example 5.1 Rendered:

With Styles

Without Styles


6 of 86 3/4/2009 1:55 PM


7 of 86 3/4/2009 1:55 PM

Liquid Layouts

Define region width based on percentages (relative to browser window width).

view plain print ?


Example 5.2

Example 5.2 Source:


8 of 86 3/4/2009 1:55 PM

view plain print ?



view plain print ?

#wrapper { 1. width: 80%; 2. margin: 0 auto; 3. } 4.#header { 5. width: 100%; 6. background-color: #ccc; 7. } 8.#footer { 9. clear: both; 10. background-color: #ccf; 11. } 12.#navigation { 13. width: 30%; 14. float: left; 15. background-color: #fcc; 16. } 17.#maincontent { 18. width: 70%; 19. float: right; 20. background-color: #cfc; 21.} 22.


With Styles

Without Styles


9 of 86 3/4/2009 1:55 PM

Elastic Layouts

Define region widths relative to the base font size.

view plain print ?


Example 5.3

Example 5.3 Source:


10 of 86 3/4/2009 1:55 PM

view plain print ?



view plain print ?

body { 1. font-size: 62.5%; 2. /* now 1em is about 10px */ 3. } 4.#wrapper { 5. width: 72em; 6. margin: 0 auto; 7. } 8.#header { 9. width: 72em; 10. background-color: #ccc; 11. } 12.#footer { 13. width: 72em; 14. clear: both; 15. background-color: #ccf; 16. } 17.#navigation { 18. width: 18em; 19. float: left; 20. background-color: #fcc; 21. } 22.#maincontent { 23. width: 54em; 24. float: right; 25. background-color: #cfc; 26.} 27.



11 of 86 3/4/2009 1:55 PM

With Styles

Without Styles


12 of 86 3/4/2009 1:55 PM

Layout, Take 2

header, footer, navigation, primary content, secondary content

Example 5.4

Example 5.4 Source:


13 of 86 3/4/2009 1:55 PM

view plain print ?

<div id="wrapper" > 1. <div id="header" > 2. <h1>Lorem ipsum dolor sit</h1> 3. </div> 4. <div id="maincontent" > 5. <div id="primary" > 6. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi 7. at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis 8. sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet 9. neque, non pellentesque mauris turpis eu purus. </p> 10. <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla 11. fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus 12. pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis 13. adipiscing diam at enim. Vestibulum nibh.</p> 14. <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet 15. massa posuere cursus. Sed vitae justo quis tortor facilisis ultrices. 16. Integer id erat. Donec at felis ut erat interdum vestibulum. Quisque et eros. 17. Donec fringilla, est in condimentum venenatis, tortor velit vehicula sem, in 18. elementum quam sapien eu lectus. In dolor urna, ullamcorper vel, tempor sit 19. amet, semper ut, felis. Praesent nisi. </p> 20. </div> 21. <div id="secondary" > 22. <p>Fusce scelerisque viverra quam. Nam urna. Nullam urna libero, euismod at, 23. euismod sit amet, porttitor ac, mauris.</p> 24. <p>Vestibulum interdum aliquet lacus. Vestibulum egestas. Fusce adipiscing 25. quam sed metus.</p> 26. <p>Nullam dignissim aliquam dui. Proin laoreet, elit sed pulvinar 27. sollicitudin, urna arcu fermentum felis, in rhoncus nunc neque vitae 28. libero.</p> 29. </div> 30. </div> 31. <div id="navigation" > 32. <ul> 33. <li>Mauris</li> 34. <li>Cras</li> 35. <li>Proin</li> 36. <li>Integer</li> 37. 38. <li>Curabitur</li> 39. <li>Integer</li> 40. <li>Suspendisse</li> 41. <li>Quisque</li> 42. </ul> 43. </div> 44. <div id="footer" > Proin quis orci eu erat molestie varius. Praesent condimentum 45. orci in lectus. Ut ipsum. In hac habitasse platea dictumst. </div> 46. 47.</div> 48.



14 of 86 3/4/2009 1:55 PM

view plain print ?

#wrapper { 1. width: 750px; 2. margin: 0 auto; 3. } 4.#header { 5. width: 100%; 6. background-color: #fcf; 7. } 8.#footer { 9. clear: both; 10. background-color: #ffc; 11. } 12.#navigation { 13. width: 160px; 14. float: left; 15. background-color: #fcc; 16. } 17.#maincontent { 18. width: 590px; 19. float: right; 20. } 21.#primary { 22. width: 400px; 23. float: left; 24. background-color: #cfc; 25.} 26.#secondary { 27. width: 190px; 28. float: right; 29. background-color: #cff; 30.} 31.


With Styles

Without Styles


15 of 86 3/4/2009 1:55 PM

CSS Frameworks

YUI CSS Grids and the YUI Grid Builder

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the abilityto stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000page layout combinations.

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonlyused dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, whichcan be used separately or in tandem.

Blueprint

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you asolid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography,and even a stylesheet for printing.


16 of 86 3/4/2009 1:55 PM

YUI CSS Grid

YUI CSS Grids and the YUI Grid Builder

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the abilityto stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000page layout combinations.

YUI CSS Grids and YUI Grid Builder


17 of 86 3/4/2009 1:55 PM

YUI CSS Grid

Layout with YUI CSS Grid

view plain print ?

<html> 1.<head> 2.<title>Lorem ipsum dolor sit</title> 3.<meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 4.<link rel="stylesheet" 5. href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" 6. type="text/css" /> 7.</head> 8.<body> 9.<div id="doc" class="yui-t1"> 10. <div id="hd"> 11.  12. </div> 13. <div id="bd"> 14. <div id="yui-main"> 15. <div class="yui-b"> 16. <div class="yui-gc"> 17. <div class="yui-u first"> 18.  19. </div> 20. <div class="yui-u" id="secondary"> 21.  22. </div> 23. </div> 24. </div> 25. </div> 26. <div class="yui-b"> 27.  28. </div> 29. </div> 30. <div id="ft"> 31.  32. </div> 33.</div> 34.</body> 35.</html> 36.


18 of 86 3/4/2009 1:55 PM

960 Grid System

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonlyused dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, whichcan be used separately or in tandem.

960 Grid System


19 of 86 3/4/2009 1:55 PM

960 Grid System

Layout with 960 Grid System

view plain print ?

<html xmlns="http://www.w3.org/1999/xhtml"> 1.<head> 2. <title>Lorem ipsum dolor sit</title> 3. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 4. <link rel="stylesheet" type="text/css" media="all" 5. href="http://morpheus.dce.harvard.edu/960gs/code/css/reset.css"/> 6. <link rel="stylesheet" type="text/css" media="all" 7. href="http://morpheus.dce.harvard.edu/960gs/code/css/text.css"/> 8. <link rel="stylesheet" type="text/css" media="all" 9. href="http://morpheus.dce.harvard.edu/960gs/code/css/960.css"/> 10.</head> 11.<body> 12. <div class="container_12"> 13. <div class="grid_9"> 14.  15. </div> 16. <div class="clear"> </div> 17. <div class="grid_2"> 18.  19. </div> 20. <div class="grid_7"> 21. <div id="primary" class="grid_5 alpha"> 22.  23. </div> 24. <div id="secondary" class="grid_2 omega"> 25.  26. </div> 27. </div> 28. <div class="clear"> </div> 29. <div class="grid_9" > 30.  31. </div> 32. </div> 33.</body> 34.</html> 35.


20 of 86 3/4/2009 1:55 PM

Blueprint CSS

Blueprint

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you asolid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography,and even a stylesheet for printing.

Blueprint CSS


21 of 86 3/4/2009 1:55 PM

Blueprint CSS

Layout with Blueprint CSS

view plain print ?

<html xmlns="http://www.w3.org/1999/xhtml"> 1. <head> 2. <title>Lorem ipsum dolor sit</title> 3. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 4. <link rel="stylesheet" href="http://morpheus.dce.harvard.edu/blueprintcss/blueprint/screen.css" type="text/css" media="screen, projection" />

5.

<link rel="stylesheet" href="http://morpheus.dce.harvard.edu/blueprintcss/blueprint/print.css" type="text/css" media="print" />

6.



7.

</head> 8. <body> 9. <div class="container"> 10. <div id="header" class="span-24"> 11.  12. </div> 13. <div class="span-4"> 14.  15. </div> 16. <div class="span-15"> 17.  18. </div> 19. <div class="span-5 last"> 20.  21. </div> 22. <div class="span-24"> 23.  24. </div> 25. </div> 26. </body> 27.</html> 28.


22 of 86 3/4/2009 1:55 PM

Harvard College Funding Database

<link rel="stylesheet" type="text/css" media="all" href="screen.css" /> 1.k rel="stylesheet" type="text/css" media="print" href="print.css" /> 2.

Screen display (screen.css):

Print display (print.css):


23 of 86 3/4/2009 1:55 PM

media selector

CSS2 defines a media selector for different media types.

link

Incorporate as part of the "link" element:

<link rel="stylesheet" type="text/css" media="all" href="screen.css" /> 1.<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 2.

@media selector

Or, use "@media" selector in style rule:

@media print { 1. body { font-size: 10pt; } 2.} 3.@media screen { 4. body { font-size: 12pt; } 5.} 6.@media print { 7. div.navigation { 8. display: none; 9. } 10. hr { 11. page-break-after: always; 12. } 13.} 14.

media types

allSuitable for all devices.

brailleIntended for braille tactile feedback devices.

embossedIntended for paged braille printers.

handheldIntended for handheld devices (typically small screen, limited bandwidth).

printIntended for paged material and for documents viewed on screen in print preview mode.

projectionIntended for projected presentations, for example projectors.

screenIntended primarily for color computer screens.

speechIntended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for thispurpose.

ttyIntended for media using a fixed-pitch character grid (such as teletypes, terminals, or portabledevices with limited display capabilities).

tvIntended for television-type devices (low resolution, color, limited-scrollability screens, soundavailable).


24 of 86 3/4/2009 1:55 PM

Print CSS

CSS Print Profile deals with paged media.

The book Cascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert Boswas printed using CSS.

See A List Apart: Articles: Printing a Book with CSS: Boom!


25 of 86 3/4/2009 1:55 PM

Recommendation and Implementations

Lists of CSS and Browser Compatability:

CSS Browser Support from westciv.com

CSS Contents and Browser Compatibility from quirksmode.org

Web Browser CSS Support from webdevout.net


26 of 86 3/4/2009 1:55 PM

CSS "Hacks"

"Monkey Wrenches"

Unsupported Selectors

Resources

Tantek Çelik's CSS Examples

CSS mastery: advanced web stnadards solutions by Andy Budd"CSS Mastery" is available online from Harvard University Libraries.

Examples are used from Tantek Çelik's CSS Examples by permission under a Creative Commons License

CSS only for "modern" browsers:

@import "null.css?\"\{"; @import "for_current_browsers.css";

Modern browsers will import two CSS files: null.css?"{ and for_current_browsers.css

Older browsers (Windows IE <= 5.5; Mac IE <5; NS < 6) will interpret this statement as an importstatement (null.css) followed by a style declaration with no selector.

CSS only for old browsers:

See the various "filter" mechanisms described in Tantek Çelik's CSS Examples


27 of 86 3/4/2009 1:55 PM

Accessibility

“The power of the Web is in its universality. Access by everyone regardlessof disability is an essential aspect.”Tim Berners-Lee , W3C Director and 'inventor' of the World Wide Web

W3C Web Accessibility Initiative (WAI)

WAI Resources on Introducing Web Accessibility

Web Content Accessibility Guidelines (WCAG)

WCAG 2.0 at a Glance

How to Meet WCAG 2.0

United States Access Board: A Federal Agency Committeed to Accessible Design

United States Government Section 508

Web-based Intranet and Internet Information and Applications (1194.22)


28 of 86 3/4/2009 1:55 PM

Web Content Accessibility Guidelines 2.0

Four Principles

12 Guidelines

Three levels of conformance

Summary of WCAG 2.0 from W3C WAI Web Accessibility Quicktips:

Perceivable

Provide text alternatives for non-text content.

Provide captions and alternatives for audio and video content.

Make content adaptable; and make it available to assistive technologies.

Use sufficient contrast to make things easy to see and hear.

Operable

Make all functionality keyboard accessible.

Give users enough time to read and use content.

Do not use content that causes seizures.

Help users navigate and find content.

Understandable

Make text readable and understandable.

Make content appear and operate in predictable ways.

Help users avoid and correct mistakes.

Robust

Maximize compatibility with current and future technologies.

© 2008 W3C (MIT, ERCIM, Keio) 2008Oct17 EN


29 of 86 3/4/2009 1:55 PM

Accessibility Implementation

Organizations

W3C WAI

Web Accessibility in Mind (WebAIM)

Tools and Resources

Resource List: WAI Resources

Opera Browser: Using Opera to Check for Accessibility

Tool: WAVE from WebAIM

Tools: Turn Firefox into a screen reader

Fire Vox

Fangs


30 of 86 3/4/2009 1:55 PM

ready.gov

Operable: Help users navigate and find content.

Ready.gov

Text View

Opera "Emulate text browser" view:

Two techniques:

Use links that have a negative margin

view plain print ?

<body> 1. <a href="#nav" class="skipnav" title="Skip to navigation">Skip to navigation</a> 2. <a href="#content" class="skipnav" title="Skip to content">Skip to content</a> 3. 4.


31 of 86 3/4/2009 1:55 PM

view plain print ?

a.skipnav { 1. color:#005825; 2. height:1px; 3. left:-100px; 4. overflow:hidden; 5. position:absolute; 6. top:-100px; 7. width:1px; 8.} 9. 10.

Use a 1×1px transparent GIF image:

view plain print ?

<body> 1. <a href="#mainnav"><img src="_images/s.gif" alt="Skip to main navigation"></a> 2. <a href="#content"><img src="_images/s.gif" alt="Skip to main content"></a> 3. 4. 5.


32 of 86 3/4/2009 1:55 PM

Image Replacement Techniques

See "Web Design in a Nutshell" → Chapter 24, "CSS Techniquest" → 24.5 "Image Replacement"

Revised Image Replacement from mezzoblue shows 10 different techniques.

Use an image for the header of the page, but have a text equivalent.

Image is 50×900 px.


33 of 86 3/4/2009 1:55 PM

Leahy/Langridge Image Replacement (LIR)

Set height to 0, overflow to hidden

Set padding and have background image show through padding

Example 5.5

Example 5.5 Source:

view plain print ?

<h1 id="header1" >Harvard University Extension School</h1> 1.


view plain print ?

#header1 { 1. padding-top: 50px; 2. overflow: hidden; 3. background-image: url(images/dce_masthead.png); 4. background-repeat: no-repeat; 5. height: 0px; 6.} 7.


With Styles

Without Styles


34 of 86 3/4/2009 1:55 PM


35 of 86 3/4/2009 1:55 PM


36 of 86 3/4/2009 1:55 PM

The Rundle/Phark Technique

Use a negative indent for text

Example 5.6

Example 5.6 Source:

view plain print ?

<h1 id="header2" >Harvard University Extension School</h1> 1.


view plain print ?

#header2 { 1. height: 50px; 2. background-image: url(images/dce_masthead.png); 3. background-repeat: no-repeat; 4. text-indent: -5000px; 5.} 6.


With Styles

Without Styles


37 of 86 3/4/2009 1:55 PM


38 of 86 3/4/2009 1:55 PM

Search Engine and Results Accessibility

Make your site ready for search engines

well-formed (and hopefully valid) HTML/XHTML.

use mark-up language for headings and lists

titles that stand on their own

"meta" keywords and description


39 of 86 3/4/2009 1:55 PM

Importance of a Good Title

Title is often seen outside of the context of the site.

Browser

Bookmarks

History

Window Title

Search Engine results

Browser Bookmarks

Browser Window Title

Browser History


40 of 86 3/4/2009 1:55 PM

Search Engine Results


41 of 86 3/4/2009 1:55 PM

Search Engines

title

meta description

meta keywords

Harvard University Admissions

<head> 1. <title>Harvard College Admissions Office</title> 2. <meta name="keywords" content="harvard admissions, harvard college admissions, 3. harvard admissions office, harvard college admissions office, 4. harvard undergraduate admissions, harvard undergrad admissions, 5. harvard undergraduate admissions office, visiting harvard, 6. visiting harvard university, harvard university admissions, 7. harvard university undergraduate admissions, harvard college, 8. travel to harvard, 5 James Street" /> 9. <meta name="description" content="The main website for the Harvard College Admissions 10. Office which oversees undergraduate admissions for Harvard University." /> 11.</head> 12.

O'Reilly ONLamp


42 of 86 3/4/2009 1:55 PM

In "head" element of page:

view plain print ?

<meta name="keywords" 1. content="o'reilly network,o'reilly,onlamp.com,lamp, 2. lampp,linux,apache,mysql,perl,python,php, 3. linux,bsd,web development,server development reference, 4. technical information,open source, 5. O'Reilly Media,O'Reilly author, oreilly.com,oreilly,o'reilly"/> 6.<meta name="description" 7. content="Welcome to ONLamp.com, the high performance web development site 8. from the O'Reilly Network offering comprehensive Lamp developer 9. information and resources. O'Reilly Network's ONLamp site features 10. original articles, news and commentary."/> 11.


43 of 86 3/4/2009 1:55 PM

Images


44 of 86 3/4/2009 1:55 PM

Images

Two ways of including images:

Markup: img element

alt attribute

height and width attributes

view plain print ?

<img src="images/shield.png" 1. alt="Harvard Shield, 'Veritas'" height="328" width="281"/> 2.

CSS: background-image property

view plain print ?

#header { 1. background-image: url(images/shield.png); 2. background-repeat: no-repeat; 3.} 4.


45 of 86 3/4/2009 1:55 PM

Graphics Tools

Adobe

Adobe Photoshop

Adobe Fireworks

Corel

CorelDRAW

Painter

Paint Shop Pro

Gimp

Graphics: Reminders about FTP and Unix

Use binary mode when transferring graphic files via FTP.

Remember that URL names (and Linux) is case-sensitive.

image.GIF

image.gif


46 of 86 3/4/2009 1:55 PM

Color Units

256 colors in each channel (Red, Green, Blue). Values can be

decimal numbers (0 to 255)background-color: rgb(153,0,153);

hexadecimal numbers (00 to ff)backgroundcolor: #990099;background-color: #909;

percentages (0 to 100%)background-color: rbg(60%,0%,60%);

Red-Green-Blue (RGB) Color

RGB color is a 24-bit system (16 million colors)

8 bits (256 colors) for each channel (red, green, blue).

28x28x28 = 2(8 + 8 + 8) = 224x = 16,777,216

Based on the properties of light not dyes

Each channel can be expressed as a number from 0 to 255.

Specifying values:

Hexadecimal: #RRGGBB

RR is the hexadecimal value of the red channel

GG is the hexadecimal value of the green channel

BB is the hexadecimal value of the blue channel

Percentage (0% - 100%)

Number (0 - 255)


47 of 86 3/4/2009 1:55 PM

Color Depth

Bits Colors

1 21 = 2

2 22 = 4

3 23 = 8

4 24 = 16

5 25 = 32

6 26 = 64

7 27 = 128

8 28 = 256

16 216 = 65,536

24 224 = 1.7 x 106

(millions)

32 232 = 4.3 x 109


48 of 86 3/4/2009 1:55 PM

Image and File Size

Get an acceptable image in the least number of bytes possible.

Overall Image Dimensions

Format (GIF, JPEG, PNG)

Compression

Download Times

Download Time Calculator

How long to download 226 kb on a 56,000 bps ("56k") modem?

226 kb = 226 kb × 1024 bytes/kb × 8 bits/byte = 1,851,392 bits 1,851,392 bits / 56,000 bits/s = 33 s

Download Times for 83kb Page


49 of 86 3/4/2009 1:55 PM


50 of 86 3/4/2009 1:55 PM

Vector Graphics and Bitmap Graphics

Bitmap Graphic

Bitmap Graphic Formats on the Web

JPEG

GIF

PNG

Graphic type in which each pixel that comprisesthe image is described.

A 100 x 100 pixel bitmap image must encodeinformation about 10,000 pixels.A 200 x 200 pixel bitmap image must encodeinformation about 40,000 pixels.

Vector Graphic

Vector Graphic Formats on the Web

SWF (Flash)

SVG

Graphic type in which the image is described by amathematical description.

Amount of information encoded is independent ofthe scale of image. For example, a circle isdescribed by the equation

x2 + y2 = r2

whether or not the radius is 5 pixels or 1000pixels


51 of 86 3/4/2009 1:55 PM

Vector and Bitmap Graphics

Bitmap (PNG) Vector (SVG)

Original image: Original image:

Magnified (16x) Magnified (16x)


52 of 86 3/4/2009 1:55 PM

Graphics Formats for the Web

GIFGraphics Interchange Format

JPEGJoint Photographic Experts Group

PNGPortable Network Graphic


53 of 86 3/4/2009 1:55 PM

GIF

Property GIFGraphics Interchange Format

Color System 8 bit indexed (256 colors)

Compression Lossless Compression (LZW; horizontal repeating units)

Other Features.gif file extension

Transparency

Animation

Typical UsesIllustrations (logos, icons)

Animated banners and icons

Images with small dimension


Photograph250 × 188 px

29.3 kb

Illustration148 × 179 px

1.47 kb


54 of 86 3/4/2009 1:55 PM

JPEG

Property JPEGJoint Photographic Experts Group

Color System RGB (24 bit; millions of colors)

Compression "Lossy" Compression(compression optimized for gradual color changes)

Other Features.jpg and .jpeg file extensions

No Transparency

No Animation

Typical UsesPhotographs

Property JPEGJoint Photographic Experts Group


16.8 kb


6.12 kb


55 of 86 3/4/2009 1:55 PM

PNG

Property PNGPortable Network Graphic

Color System8 bit indexed (256 colors)

RGB (24 bit; millions of colors)

Compression Lossless Compression

Other Features.png file extension

Transparency

Animation through MNG extension

Typical UsesAny

Property PNGPortable Network Graphic


25.8 kb (indexed, 8-bit) 81.9 kb (RGB, 24-bit)


1.02 kb (indexed, 8-bit) 1.89 kb (RGB, 24-bit)


56 of 86 3/4/2009 1:55 PM

Graphics Formats for the Web


JPEGJoint Photographic Experts

Group

ColorSystem

8 bit indexed (256 colors) RGB (24 bit; millions of colors)8 bit indexed (2

RGB (24 bit; m

Compression Lossless Compression (LZW;horizontal repeating units)

"Lossy" Compression(compression optimized forgradual color changes)

Lossless Compressio

OtherFeatures .gif file extension

Transparency

Animation

.jpg and .jpeg fileextensions

No Transparency

No Animation

.png file extens

Transparency

Animation throu

Typical UsesIllustrations (logos, icons)

Animated banners and icons

Images with small dimension

Photographs Any


JPEGJoint Photographic Experts

Group


29.3 kb 16.8 kb 25.8 kb (indexed, 8-b


1.47 kb 6.12 kb 1.02 kb (indexed, 8-b

Hot Air Balloon image is in the Public Domain and was obtained from PD Photo.


57 of 86 3/4/2009 1:55 PM

Illustration image from the original works of David Heitmeyer


58 of 86 3/4/2009 1:55 PM

Palettes

Palettes

Exact (if 256 or fewer colors)

Adaptive (weighted based upon colors indocument)

Web Palette (216 Web Safe Colors)

System

Windows

Macintosh


59 of 86 3/4/2009 1:55 PM

Palettes: Exact, Adaptive, Web 216

Exact Palette

Image Palette

Adaptive Palette

Image Palette

Web 216 Palette

Image Palette


60 of 86 3/4/2009 1:55 PM


61 of 86 3/4/2009 1:55 PM

Adaptive Palette: Shift and Dither

Color Shift

Image (16 colors; Color Shift) Zoom

Dither

Image (16 colors; Dither) Zoom


62 of 86 3/4/2009 1:55 PM

GIF Images and Bit Depth: Color Shift

Properties Image Palette (adaptive)

8 bit

256colors

46.3kb

7 bit

128colors

36.2kb

6 bit

64colors

28.9kb


63 of 86 3/4/2009 1:55 PM

5 bit

32colors

21.9kb

4 bit

16colors

16.5kb

3 bit

8colors

10.9kb


64 of 86 3/4/2009 1:55 PM

2 bit

4colors

7.31kb

1 bit

2colors

2.84kb


65 of 86 3/4/2009 1:55 PM

GIF Images and Bit Depth: Dither

Properties Image Palette (adaptive)

8 bit

256colors

64.9kb

7 bit

128colors

52.3kb

6 bit

64colors

43.4kb


66 of 86 3/4/2009 1:55 PM

5 bit

32colors

34.7kb

4 bit

16colors

26.7kb

3 bit

8colors

18.6kb


67 of 86 3/4/2009 1:55 PM

2 bit

4colors

14.2kb

1 bit

2colors

5.86kb


68 of 86 3/4/2009 1:55 PM

Compression for Indexed GIF and PNG

GIF LZW compression operates on horizontal blocks of the same color. Here are two images that areidentical except for a 90 degree rotation. The vertical stripe GIF image is nearly twice as large as thehorizontal stripe GIF image. The PNG images are the same size.

Format HorizontalStripes

VerticalStripes

GIF

471 bytes 911 bytes

PNG

232 bytes 221 bytes


69 of 86 3/4/2009 1:55 PM

Compression and Dithering

A purple shade was created by alternating red and blue pixels.32× magnification:

200×200px Image, Dithered and Solid

Image Format Dithered Grid Solid

GIF

601 bytes 303 bytes

PNG

225 bytes 209 bytes


70 of 86 3/4/2009 1:55 PM

JPEG

The amount of compression (quality of image) for a JPEG image can be chosen (from a scale of 0 to 100).The image quality is inversely related to the amount of compression since the compression algorithm is"lossy".

Properties Image

Quality: 80

34.1 kb

Quality: 70

26.0 kb

Quality: 60

22.4 kb


71 of 86 3/4/2009 1:55 PM

Quality: 50

17.0 kb

Quality: 40

14.3 kb

Quality: 30

6.97 kb


72 of 86 3/4/2009 1:55 PM

Quality: 20

4.80 kb

Quality: 10

3.75 kb

Quality: 1

3.21 kb


73 of 86 3/4/2009 1:55 PM

JPEG Compression Artifacts

Typically first appears at boundaries in images. Portions of image can also become "blocky".

Schlering at boundaries:

Blockyness


74 of 86 3/4/2009 1:55 PM

Aliased and Anti-aliased Text

Aliased Anti-aliased

Format Aliased Anti-aliased

GIF 0.79 kb 1.9 kb

PNG(indexed)

0.62 kb 1.7 kb

PNG(24-bit)

1.12 kb 2.6 kb

JPEG 5.5 kb 4.9 kb

JPEG JPEG Compression artifacts:


75 of 86 3/4/2009 1:55 PM


76 of 86 3/4/2009 1:55 PM

Animation: GIF

Loading...

Aside: Banner Advertisements

The Interactive Advertising Bureau (IAB) has established guidelines for sizes of banner ads (interactivemarketing units; IMUs)A common size is 728 x 90 pixels:


77 of 86 3/4/2009 1:55 PM

Interactive Advertising Bureau

Ad Unit Guidelines


78 of 86 3/4/2009 1:55 PM

Transparency

With GIF and PNG images, a color in the palette can be designated as "transparent". This lets anybackground colors or background images show through the transparent portions.

Star Image

Background Image(satin.png)

Format Background Color(gray)

Background Imagesatin.png

GIFNo transparency

GIFWhite is transparent

GIFBlue is transparent


79 of 86 3/4/2009 1:55 PM

PNGNo transparency

PNGWhite is transparent

PNGBlue is transparent


80 of 86 3/4/2009 1:55 PM

Cartoon Art

GIF PNG JPEG

GIF1,511 bytes

PNG; 8 bit1,031 bytes

JPEG (Quality 100)14,660 bytes

PNG; 24 bit1,944 bytes

JPEG (Quality 6)1,530 bytes

Original image from the works of David P. Heitmeyer


81 of 86 3/4/2009 1:55 PM

Linking with Images: Imagemaps

Image itself. usemap attribute for img

Definition of "hot spots" for image. map element

area element

attributes

shape="circle"

shape="rect"

shape="poly"

coords

Imagemap Example

Image

Mapdefines the coordinates of "hot spots" and URLs

Example 5.7

Example 5.7 Source:

view plain print ?

<img src="images/shapes.gif" width="192" height="39" usemap="#shapes" alt="Shapes" style="b1. 2.<map id="shapes" name="shapes" > 3. <area shape="circle" coords="106,18,17" href="http://en.wikipedia.org/wiki/Circle" alt="Circle" />

4.

<area shape="rect" coords="1,4,60,32" href="http://en.wikipedia.org/wiki/Rectangle" alt="Rectangle" />

5.

<area shape="poly" coords="150,34,190,34,170,0" href="http://en.wikipedia.org/wiki/Triangle" alt="Triangle" />

6.

</map> 7.


Units are in Pixels, (0,0) is the upper left corner of the image.

Circle: center (106, 18); radius = 17

Rectangle: vertices at (1,4), (60,4), (1,32), (60,32)

Triangle: vertices at (170,0), (150,32), (190,32)


82 of 86 3/4/2009 1:55 PM

Imagemap: Vermont Tourism

Exploring Vermont's Regions @VermontVacation.com


83 of 86 3/4/2009 1:55 PM

Site Icons

Bookmark list:

Location bar and browser tabs:


84 of 86 3/4/2009 1:55 PM

Site Icons: Favicon

favicon.ico at root of web site

"link" element in "head" element of XHTML/HTML document

The code in the head of the XHTML would look something like:

view plain print ?

 1.<link rel="icon" href="images/mozilla-16.png" type="image/png"/> 2. 3.<link rel="shortcut icon" href="images/mozilla.ico" type="image/vnd.microsoft.icon"/> 4.

Formats and Settings:

Microsoft's ICO format (image/vnd.microsoft.icon

PNG

GIF

Size and Colors: typically 16×16 (can be 32×32) with 8-bit color (256 colors)


85 of 86 3/4/2009 1:55 PM

Image Formats We Haven't Discussed

Vector formats that are relevant to web development.

Adobe Flash/SWF

Scalable Vector Graphics (SVG)

Other Bitmap formats typically not encountered in web development.

TIFF (Tagged Image File Format)

JPEG 2000

Table of Contents | All Slides | Link List | Examples | CSCI E-12


86 of 86 3/4/2009 1:55 PM

CSS, Accessibility, and Images · 04/03/2009 · CSS "Reset" Sometimes it is useful to use a CSS...

Documents

Transcript of CSS, Accessibility, and Images · 04/03/2009 · CSS "Reset" Sometimes it is useful to use a CSS...