• Like
ID01 Week 3
Upcoming SlideShare
Loading in...5
×
Uploaded on

Images and Typography

Images and Typography

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,061
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Week 03Images and Typography
  • 2. Images in HTML<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
  • 3. Images in HTMLStart Tag Alternate text if End Tag image doesnt Search Path to Image Alternate appear Title Image Title Attribute Attribute Attribute <img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
  • 4. IMAGE TYPES: GIFs, JPGs, PNGsGIF Low quality, use for simple graphics only.JPG Photographic Imagery, Complex patters or gradients. Images with Alpha TransperencyPNG
  • 5. Background Images in CSS HTML CSS Browser<body> body { background-color: grey; <div id="box"> } This sentence is the intro to this <p>This sentence is the intro to this p { paragraph. paragraphs. </p> font-size: 14px; </div> color: white; text-align: center;</body> margin-top: 30px; } #box { height: 300px; width: 400px; border: 2px solid green; background-image: url(../images/factory2.jpg); }
  • 6. Background Images in CSS HTML CSS Browser<body> body { background-color: grey; <div id="box"> } This sentence is the intro to this <p>This sentence is the intro to this p { paragraph. paragraphs. </p> font-size: 14px; </div> color: white; text-align: center;</body> margin-top: 28px; } #box { height: 300px; width: 400px; border: 2px solid green; background-image: url(../images/factory2.jpg); }
  • 7. Font-Family Font Family Property Desired Font Next Best Most Generalh1 { font-family: "Trebuchet MS", Helvetica, sans-serif; } Font Stack
  • 8. Embedding Fonts CSS@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;}
  • 9. Embedding Fonts CSS give the font a@font-face { simple name font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;}
  • 10. Embedding Fonts .OTF and .TTF fonts work with all browsers CSS but Internet Explorer@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;} .EOT format required for Internet Explorer Use.
  • 11. Embedding Fonts paths to the font files, in CSS a font folder.@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;}
  • 12. Embedding Fonts CSS - without IE code...@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf);}p { font-family: coolfont, arial, sans-serif;}
  • 13. Resetting Default CSS Styles CSS* { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; }
  • 14. Styling Links w/ Pseudo-classes CSSa:link { color: blue; text-decoration: none; }a:visited { color: lightBlue; text-decoration: none; }a:hover { color: white; background-color: yellow; text-decoration: none; }a:active { color: blue; text-decoration: none; }
  • 15. Styling Links w/ Pseudo-classes CSSa:link { color: blue; text-decoration: none; }a:visited { PSEUDO-CLASSES color: lightBlue; text-decoration: none; }a:hover { color: white; background-color: yellow; text-decoration: none; }a:active { color: blue; text-decoration: none; }
  • 16. Styling Links w/ Pseudo-classes CSSa:link { Unvisited Link color: blue; text-decoration: none; }a:visited { Visited Link color: lightBlue; text-decoration: none; }a:hover { Mouse Over Link color: white; background-color: yellow; text-decoration: none; }a:active { Selected Link color: blue; text-decoration: none; }