HTML and CSS Reference
In-Depth Information
Tu Tori a l
8
Enhancing a
Web Site with
Advanced CSS
Designing for Special Effects, Print Media,
and the Mobile Web
O b j e c t i v e s
Session 8.1
• Create text and box shadows
• Work with IE filters
• Rotate an object using CSS3
• Create linear gradients
Session 8.2
• Apply a border image
• Set the opacity of a page object
• Apply a style to a media device
• Create and apply print styles
Case|
Tree and Book
Session 8.3
• Define the visual viewport
• Create a media query
• Create styles for mobile
devices in portrait and
landscape mode
Kevin Whitmore is the founder of Tree and Book, a social network-
ing Web site for people interested in documenting their family
histories, creating online photo albums, and posting stories and
information about members of their extended families. He has
come to you for help in upgrading the site's design. Kevin wants to
take advantage of some of the CSS styles that can be used to add
interesting visual effects to his Web pages and to create styles for
printed and mobile output.
STarTing DaTa FileS
tutorial.08
tutorial
review
case1
case2
effectstxt.css
mobiletxt.css
printtxt.css
treebooktxt.htm
+ 2 CSS files
+ 10 graphic files
+ 2 text files
+ 1 JavaScript file
dfeffectstxt.css
dfmobiletxt.css
dfprinttxt.css
dubcektxt.htm
+ 2 CSS files
+ 12 graphic files
+ 1 JavaScript file
dweffectstxt.css
dwprinttxt.css
recipetxt.htm
+ 2 CSS files
+ 4 graphic files
+ 1 JavaScript file
wceffectstxt.css
wcmobiletxt.css
willettxt.htm
+ 3 CSS files
+ 23 graphic files
+ 18 HTML files
+ 1 JavaScript file
case3
case4
demo
sweffectstxt.css
swprinttxt.css
messtxt.htm
+ 2 CSS files
+ 8 graphic files
+ 1 JavaScript file
listing.txt
+ 10 graphic files
+ 1 JavaScript file
demo_box_shadows.htm
demo_ie_filters.htm
demo_linear_gradients.htm
demo_radial_gradients.htm
demo_repeat_linear_gradients.htm
demo_repeat_radial_gradients.htm
demo_text_shadows.htm
demo_transformations.htm
demo_transformations3d.htm
+ 4 graphic files
HTML 547
