Design for the Web 2

49540 FALL 2009

Week 3

ZEN CSS EXAMPLES: 008/ 060/ 094/ 139/ 157/ 154/

HTML named colors

http://www.psyclops.com/tools/rgb/ RGB to Hex converter

http://webdesign.about.com/od/colorcharts/l/bl_rgb2hex.htm RGB to Hex converter

BACKGROUND PROPERTY: ADDING and POSITIONING IMAGES

http://htmlhelp.com/reference/css/color-background/ CSS background property

http://www.1keydata.com/css-tutorial/background.php CSS background property

IMAGE REPLACEMENT

http://css-tricks.com/nine-techniques-for-css-image-replacement/ List of Image Replacement techniques

http://css-discuss.incutio.com/?page=ImageReplacement See IMAGE REPLACEMENT; also a good general reference for positioning

http://www.mezzoblue.com/tests/revised-image-replacement/ List of Image Replacement techniques

http://www.sitepoint.com/article/image-replacement-state-scope/ Image Replacement technique using a little JS

http://particletree.com/features/css-rules-for-image-replacement/ Image Replacement technique also using a little JS

THE BORDER PROPERTY

http://www.1keydata.com/css-tutorial/border.php Basics of using the border element

SELECTORS

http://css.maxdesign.com.au/selectutorial/Select Tutorial

http://www.brainjar.com/css/using/ Overview of CSS Style Sheets; including review of selectors

http://www.eskimo.com/~bloo/indexdot/css/syntax/selectors/selectors.htm Complete list of Selectors

DESIGN REFERENCES

http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/ CSS Smashing Magazine article on Retro design; also in PDF in class handouts. Reference for the Retro project

http://www.smashingmagazine.com/2008/10/14/30-beautiful-vintageretro-photoshop-tutorials/ How to create retro looks in Photoshop

http://www.smashingmagazine.com/2008/10/26/retro-and-vintage-typography-showcase/ How to create retro looks using Typography

http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/ How to create grunge design looks, part I

http://www.smashingmagazine.com/2008/03/11/the-secrets-of-grunge-design/ How to create grunge design looks

http://www.smashingmagazine.com/2008/10/23/50-beautiful-blog-designs/ Blog design

http://www.smashingmagazine.com/2008/07/09/textures-and-patterns-design-showcase/ Textures and pattern repeats

http://psdtuts.com/category/tutorials/ Tutorials, including for Grunge and 80's retro; also see 'Freebees' section for textured patterns

Also see 'tutorials' on Smashing Magazine for special tutorials on grunge, retro, textures and pattern effects

Positioning and Layouts Basics

Fixed, Fluid, Elastic Layouts

http://green-beast.com/blog/?p=199 Units of calculation in pixels, % and EMs

CSS Positioning in Ten Steps

http://www.barelyfitz.com/screencast/html-training/css/positioning/ Tutorial on positioning

Articles on POSITIONING

http://www.brainjar.com/css/positioning/ CSS positioning summary

http://www.dynamicdrive.com/style/layouts/category/C13/ Liquid layouts [note: these pages mix 'liquid/fluid' layouts which are %-based and 'elastic' layouts which are em-based]

WORKFLOW

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/ Workflow and good practices

CSS Page Layout Examples

http://www.glish.com/css/3.asp 3-column layouts

http://blog.html.it/layoutgala/LayoutGala07.html 3-column layouts

http://blog.html.it/layoutgala/LayoutGala33.html 2-column layouts

class site: http://www.annetteweintraub.com/courses/49540/49540.html