Designing With CSS
140
-
Upload
dan-reedy -
Category
Technology
-
view
1.278 -
download
0
Transcript of Designing With CSS
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
RESET STYLE SHEET
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}/* remember to define focus styles! */:focus { outline: 0;}body {
line-height: 1; color: black; background: white;}ol, ul { list-style: none;}/* tables still need 'cellspacing="0"' in the markup */table { border-collapse: separate; border-spacing: 0;}caption, th, td { text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after { content: "";}blockquote, q { quotes: "" "";}
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
@FONT-FACE
/* In your CSS file (e.g. typography.css) */
@font-face { font-family: "MinyaNouvelle"; src: url('http://localhost/fonts/minya-nouvelle-bd.otf') format("opentype");}
h1, h2, h3, h4, h5 { font-family: "MinyaNouvelle", sans-serif }
Daniel [email protected]
Daniel [email protected]
Daniel [email protected] Available Plugin: http://code.google.com/p/jquery-
Daniel [email protected]
CÚFON & @FONT-
<!-- // In the <HEAD> tags of your document --><script type="text/javascript"> $(document).ready(function() { if(!$.fontAvailable('MinyaNouvelle')) { Cufon.replace('h1', { fontFamily: “MinyaNouvelle” }); }});</script>
<!-- // Directly prior to the </BODY> tag. This is need for IE --><script type="text/javascript"> Cufon.now(); </script>
Font Available Plugin: http://code.google.com/p/jquery-
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
P A D D I N GB O R D E R
M A R G I N
C O N T E N T
T O P
R I G H T
B O T T O M
L E F T
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
ESTABLISH A
/* In your type CSS file (e.g. typography.css) */
body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */}
Daniel [email protected]
ESTABLISH A
/* In your type CSS file (e.g. typography.css) */
body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */}
h1 { font-size: 2.4em; } /* 24px */h2 { font-size: 1.8em; } /* 18px */h3 { font-size: 1.4em; } /* 14px */
Daniel [email protected]
ESTABLISH A
/* In your type CSS file (e.g. typography.css) */
body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */}
h1 { font-size: 2.4em; } /* 24px */h2 { font-size: 1.8em; } /* 18px */h3 { font-size: 1.4em; } /* 14px */
/* In your layout CSS File (e.g. screen.css) */#header { height: 3em; } /* 30px */
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
box 1 box 2<!-- // In your .html file --><div id=”box1”> <p>box 1</p></div><div id=”box2”> <p>box 2</p></div>
/* In your layout CSS File (e.g. screen.css) */
#box1 { float: left; margin-right: 1em; width: 3em; }
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> </head> <body> <div class="container_12"> <div class="grid_12"> <!-- // SIU Header --> </div> <div class="clear"> </div> </div> <div id="housing_header" class="container_12"> <div class="grid_12 alpha omega"> <!-- // Navigation --> </div> <div class="prefix_8 grid_4 omega"> <!-- // Mission Statement --> </div> <div class="clear"> </div> </div> <div id="page_content" class="container_12"> <div class="grid_4"> <!-- // Left Column --> </div> <div class="prefix_1 grid_4"> <!-- // Middle Column --> </div> <div class="grid_3 omega"> <!-- // Right Column --> </div> <div class="clear"> </div> </div>
Daniel [email protected]
Daniel [email protected]
THE STYLE SHEETS
reset 960 typography layout colour
screen print
If Internet Explorer
ie7 ie6
Daniel [email protected]
THE STYLE SHEETS
reset 960 typography layout colour
screen print
If Internet Explorer
ie7 ie6
/* colour.css */html { background: rgb(87,0,36); }a { color: rgb(14,117,138); }a:visted { color: rgb(110,5,101); }#siu_header, #siu_header a { color: rgb(132,128,111); }#mission { color: rgb(216,214,184); }#main_navigation, #main_navigation a, #footer_navigation, #footer_navigation a { color: rgb(255,255,255);}#columns, #columns a { color: rgb(87,0,36); }#copyright { color: rgb(255,255,255); }
/* typography.css */body { font-size:62.5%; } /* 1em = 10px */h1 { font-size:2.4em; } /* displayed at 24px */h2 { font-size:2.0em; } /* displayed at 20px */h3 { font-size:1.8em; } /* displayed at 18px */h4 { font-size:1.4em; } /* displayed at 14px */#page_content p { font-size:1.4em; line-height: 1.8em; margin-bottom: 1.8em;} /* displayed at 14px */#siu_header { font-size: 2.0em; text-align: center; letter-spacing: .5em; text-transform: uppercase; }#siu_header a { text-decoration: none; }#mission { font-size: 2.3em; letter-spacing: .04em; }#main_navigation, #footer_navigation { font-size: 1.5em; text-align: center; text-transform: uppercase;}#columns h2 { font-size: 1.8em; text-transform: uppercase; }#columns ul li { font-size: 1.4em; line-height: 1.8em;}#copyright { font-family: Helvetica, Verdana, Arial, sans-serif; font-size: .8em; letter-spacing: .1em; line-height: 1.6em;}.angelina { font-size: 1.8em; }
<!-- // index.html --><div class="flyer"> <p> <a href="/contract/residence-halls/"> <img src="/images/housing_rocks.png" alt="Housing Rocks" /> </a> </p></div>
/* screen.css */.flyer { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg);}
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
Daniel [email protected]
ERIC MEYER RESET CSS: HTTP://MEYERWEB.COM/ERIC/THOUGHTS/2007/05/01/RESET-RELOADED/SCALABLE INMAN FLASH REPLACEMENT: HTTP://WWW.MIKEINDUSTRIES.COM/BLOG/SIFR/EMBEDDED OPEN TYPE (EOT) FONT TOOL: HTTP://WWW.MICROSOFT.COM/TYPOGRAPHY/WEFT.MSPXOVERVIEW OF @FONT-FACE: HTTPS://DEVELOPER.MOZILLA.ORG/INDEX.PHP?TITLE=EN/CSS/%40FONT-FACECÚFON: HTTP://WIKI.GITHUB.COM/SORCCU/CUFON/ABOUT.WEBFONT PROPOSAL HTTP://LISTS.W3.ORG/ARCHIVES/PUBLIC/WWW-FONT/2009JULSEP/0440.HTMLTYPE FOUNDRIES SUPPORTING .WEBFONT: HTTP://WWW.TYPOGRAPHER.ORG/2009/07/WEBFONT-PROPOSAL-GAINS-
