49540 Class Links, Week 10

ZEN CSS EXAMPLES

Review these examples of Horizontal Pages
http://www.csszengarden.com/?cssfile=037/037.css" Pret-à-Porter

http://www.csszengarden.com/174/What Lies Beneath

http://www.csszengarden.com/?cssfile=088/088.cssTulipe page

http://www.csszengarden.com/?cssfile=058/058.css Radio Zen

http://www.csszengarden.com/?cssfile=111/111.css Gruener Entwurf

http://www.csszengarden.com/?cssfile=053/053.css Self-Growth

http://www.csszengarden.com/?cssfile=048/048.css Orchid

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

The Horizontal Way

http://www.thehorizontalway.com/ CSS and Flash site featuring horizontal designs, including some portfolio sites

http://www.kottke.org/portfolio/portfolio.html nice portfolio site

Web 2 Portfolios of past EDM students:

Web inspector: Web analysis tool for Safari

http://webkit.org/blog/41/ Web Inspector allows you to view page source; just right click on an element, or hold Shift + Control.

First, do a download of the latest build, like WebKit-SVN-r38297.dmg
Then type this into the Mac Terminalapp : defaults write com.apple.Safari \WebKitDeveloperExtras -bool true
Finally, restart Safari. Youwill see 'Inspect Element' when youright click or click with Shift + Control

Remove sIFR headlines: this JS removes the siFR

siFR, v2 [local]

http://www.mikeindustries.com/sifr/ Introducing siFR

http://www.mikeindustries.com/blog/archive/2004/08/sifr The background article

http://wiki.novemberborn.net/sifr/

http://www.adobe.com/devnet/dreamweaver/articles/sifr_demo.html# if you need a video

http://www.alvit.de/sifrbeauty/sifr-resources.php more on siFR

http://www.maratz.com/blog/archives/2006/01/16/multi-color-sifr-201/ Multi-color siFR

http://novemberborn.net/sifr/2.0.7 IMPORTANT: fix for FLASH 10 PLAYER

IMPORTANT: for local version of siFR [v2], you must use 2.0.7 to be compatible with FLASH10 PLAYER

http://designintellection.com/2008/this-is-how-you-get-sifr-to-work/ siFR v3 TUTORIAL, which ONLY works from a SERVER

http://discuss.joyent.com/viewforum.php?id=20 Forum for siFR questions

Examples

This is Display Type

This is Display Type
with a subhead

This is Display Type

These two examples have colored links and rollovers

Multi-Colored Display Type Head with link

More Display Type Examples

Javascript values for siFR

sIFR.replaceElement(named({sSelector: ".sifr_two", calls the selector
sFlashSrc: "siFRexample/rockwellextrabold.swf", calls the swf file, using directory path
sColor: "#0c8515", sLinkColor:"##0c8515", calls the text and link colors
sBgColor:"#b4d5b1", calls the background color
sHoverColor:"#ffffff", calls the rollover color
nPaddingTop:0, sets top padding by pixel
nPaddingBottom:0, sets bottom padding by pixel
sFlashVars:"textalign=left&offsetTop=0" sets text align [left, right, center] and offset [top bottom] by pixels
sWmode: "transparent", add for transparent background
sEmColor:"#FF8C00", sStrongColor:"#FF0000", presently not working