Design for the Web 2

---

49540 SPRING 2010

---

Week 4

ZEN CSS EXAMPLES:

011 nice 3-column example;

013 very minimal design, nice use of trompe-l'oeil at top and bottom of page

014 uses % sizing

123 example of rounded corners technique [uses CSS2—NOT— CSS3]

201 uses absolute positioning to reorder document sections

index of all csszen designs: http://www.mezzoblue.com/zengarden/ alldesigns/

ROUNDED CORNERS BOXES

CSS3 Rounded Corners box

http://www.the-art-of-web.com/css/border-radius/ Border-radius complete reference

http://www.css3.info/preview/rounded-border/ CSS3 Rounded Corners Box techniques with border-radius

http://24ways.org/2006/rounded-corner-boxes-the-css3-way CSS3 Rounded Corners Box techniques

http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-corners-ie/ CSS3 Rounded Corners Box techniques for IE

CSS3 Rounded Corners box and drop shadow

http://www.css3.info/preview/box-shadow/ Add a CSS3 drop shadow

http://www.westciv.com/tools/boxshadows/index.html Nice interactive tool for testing drop shadow

http://www.westciv.com/tools/ See the MRI tool which helps with selectors

http://css.flepstudio.org/en/css3/box-shadow.html Add a CSS3 drop shadow

CSS2.1 Rounded Corners box

See my example in the class folder

http://www.lesliesommer.com/wdw07/html/ More Rounded Corners: with some decorative touches

OVERFLOW

http://www.quirksmode.org/css/overflow.html Overflow, hidden

http://www.d.umn.edu/itss/support/Training/Online/csstips/overflow.html Overflow, hidden

FLOATS

http://css.maxdesign.com.au/floatutorial/ Float Tutorial

http://www.smashingmagazine.com/2007/05/01 /css-float- theory-things-you-should-know/ Comprehensive list of floats articles

http: //www.complexspiral.com/publications/containing-floats Containing floats

http://www.quirksmode .org/css/clearing.html Floats and clearing

http://css-discuss.incutio.com/?page=FloatLayouts Floats and clearing

http://www.alistapart.com/articles/ negativemargins/ Float using negative margins

http://www.positioniseverything.net/articles/onetruelayout/anyorder Using float and negative margins to reorder columns

http://www.brunildo.org/test/Float_negt.html Negative margin and floats

MORE on SELECTORS

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

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

http://www.brainjar.com/css/using/ Overview of CSS Style Sheets; including review of selectors, pages 1 & 2

http://gallery.theopalgroup.com/selectoracle/ Selectoracle: site will deconstruct and explain selectors on a site

FROM WEEKS 2 & 3, REVIEW

Articles on POSITIONING

CSS Positioning in Ten Steps

http://www.barelyfitz.com/screencast/html-training/css/positioning/ Tutorial 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]

Fixed, Fluid, Elastic Layouts

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

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/ Layout Gala

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

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

XRAY Tool

Xray tool for CSS analysis: http://www.westciv.com/xray/xray_more.html

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