HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)

51,419 views
55,903 views

Published on

Slides zum Talk "HTML und CSS für Designer" für PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Beispiel-Projekt auf Codepen.io: http://codepen.io/Fischaela/details/seKiH/
Beispiel-Projekt auf Github: https://github.com/Fischaela/Pubkon-2014
--
Slides to my talk "HTML & CSS for designers" for PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Example project on codepen.io: http://codepen.io/Fischaela/details/seKiH/
Example project on Github: https://github.com/Fischaela/Pubkon-2014

Published in: Internet, Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
51,419
On SlideShare
0
From Embeds
0
Number of Embeds
26,387
Actions
Shares
0
Downloads
94
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)

  1. 1. HTML UND CSS FÜR DESIGNER Pubkon 2014, Michaela Lehr @fischaelameer
  2. 2. 1. INHALTE 2. TYPOGRAFIE 3. LAYOUT 4. GRAFISCHE ELEMENTE
  3. 3. Thanks Maciej Cegłowski!
  4. 4. 1. INHALTE
  5. 5. HYPERTEXT MARKUP LANGUAGE
  6. 6. <h1>Headline 1</h1> <h2>Headline 2</h2> <p>Paragraph</p> <footer> <p>Footer paragraph</p> </footer> <ol> <li>List item</li> <li>List item</li> </ol> <ul> <li>List item</li> <li>List item</li> </ul>
  7. 7. <h1>The Internet <span>has a human face</span></h1> <h1>The Internet<br> <span>has a human face</span> </h1> <h1>The Internet<br> <span class="t-headline-decent">has a human face</span> </h1>
  8. 8. <Start-Tag eigenschaft="wert">Auszuzeichnender Inhalt</End-Tag>
  9. 9. <a href="https://twitter.com/anildash" target="_blank">Anil Dash</a>
  10. 10. <img src="images/bt14.064.jpg" alt="White mouse holding a teddy bear.">
  11. 11. 2. TYPOGRAFIE
  12. 12. CASCADING STYLE SHEETS
  13. 13. <!DOCTYPE html> <html lang="en"> <head> </head> <body> ... </body> </html>
  14. 14. <!DOCTYPE html> <html lang="en"> <head> <title>The Internet with a human face</title> </head> <body> ... </body> </html>
  15. 15. <!DOCTYPE html> <html lang="en"> <head> <title>The Internet with a human face</title> <link rel="stylesheet" href="styles/main.css"> </head> <body> ... </body> </html>
  16. 16. <link rel="stylesheet" href="styles/main.css">
  17. 17. selektor { eigenschaft: wert; }
  18. 18. element { eigenschaft: wert; } .klasse { eigenschaft: wert; } #id { eigenschaft: wert; }
  19. 19. body { color: #333333; }
  20. 20. h1, h2 { font-family: 'Exo2', Sans-Serif; }
  21. 21. @font-face { font-family: 'Exo2'; }
  22. 22. @font-face { font-family: 'Exo2'; src: url('fonts/Exo-2/Exo2-Black.woff') format('woff'), url('fonts/Exo-2/Exo2-Black.ttf') format('truetype'); }
  23. 23. @font-face { font-family: 'Exo2'; src: url('fonts/Exo-2/Exo2-Black.woff') format('woff'), url('fonts/Exo-2/Exo2-Black.ttf') format('truetype'); font-style: normal; font-weight: 900; }
  24. 24. @font-face { font-family: 'Exo2'; src: url('fonts/Exo-2/Exo2-LightItalic.woff') format('woff'), url('fonts/Exo-2/Exo2-LightItalic.ttf') format('truetype'); font-style: italic; font-weight: 300; } h2 { font-family: 'Exo2', Sans-Serif; font-style: italic; font-weight: 300; }
  25. 25. PIXEL (px) PROZENT (%) EM (em)
  26. 26. h2 { font-size: 20px; line-height: 1.5em; }
  27. 27. PIXEL (px) PROZENT (%) EM (em) ROOT EM (rem)
  28. 28. h2 { font-size: 20px; line-height: 1.5rem; }
  29. 29. 3. LAYOUT
  30. 30. * { box-sizing: border-box; }
  31. 31. .l-copytext img { width: 100%; } .l-copytext ol { margin-left: -2em; } .l-copytext ol img { margin: 1em 0; }
  32. 32. 4. GRAFISCHE ELEMENTE
  33. 33. html, body { height: 100%; margin: 0; }
  34. 34. <section class="title-container"> <h1 id="title">The Internet <br><span class="t-headline-decent">with a human face</span></h1> </section> .title-container { margin: 0 0 4rem 0; width: 100%; height: 100%; }
  35. 35. .title-container { background-image: url('../images/bt14.001.jpg'); background-position: 50% 50%; background-size: cover; margin: 0 0 4rem 0; width: 100%; height: 100%; }
  36. 36. .title-container h1 { position: static | relative | absolute | fixed; }
  37. 37. <section class="title-container"> <h1 id="title">The Internet <br><span class="t-headline-decent">with a human face</span></h1> </section> .title-container h1 { position: absolute; left: 10%; bottom: 10%; } .title-container { background-image: url('../images/bt14.001.jpg'); background-position: 50% 50%; background-size: cover; margin: 0 0 4rem 0; position: relative; width: 100%; height: 100%; }
  38. 38. <a href="https://twitter.com/anildash" target="_blank">Anil Dash</a> a { color: #00a0a0; font-weight: 700; text-decoration: none; } a:hover, a:active { border-bottom: 4px solid #00a0a0; }
  39. 39. JAVASCRIPT JQUERY
  40. 40. HTML – INHALT CSS – AUSSEHEN JAVASCRIPT – VERHALTEN
  41. 41. $(document).on('ready', function () { });
  42. 42. $(document).on('ready', function () { var animateElement = function (selektor) { $(selektor).hide().slideDown(1000); }; });
  43. 43. $(document).on('ready', function () { var animateElement = function (selektor) { $(selektor).hide().slideDown(1000); }; animateElement('#title'); });
  44. 44. MEDIA QUERIES Display-Breite/-Höhe, Browser-Breite/-Höhe, Geräte- und Browser-Ratio ...
  45. 45. body { color: #333333; font-family: 'Gentium', Serif; font-size: 125%; font-weight: 400; line-height: 1.5em; }
  46. 46. body { color: #333333; font-family: 'Gentium', Serif; font-size: 100%; font-weight: 400; line-height: 1.5em; } @media screen and (min-width: 900px) { body { font-size: 125%; } }
  47. 47. a { color: #00a0a0; font-weight: 700; text-decoration: none; transition: border 0.1s ease-in; } a:hover, a:active { border-bottom: 4px solid #00a0a0; } $color-primary: #00a0a0; a { color: $color-primary; font-weight: 700; text-decoration: none; transition: border 0.1s ease-in; &:hover, &:active { border-bottom: 4px solid $color-primary; } }
  48. 48. GITHUB.COM Beispiel: github.com/Fischaela/Pubkon-2014
  49. 49. CODECADEMY codecademy.com TREEHOUSE teamtreehouse.com
  50. 50. DANKE! <3

×