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

1. HTML UND CSS FÜR DESIGNER Pubkon 2014, Michaela Lehr @fischaelameer

5. 1. INHALTE 2. TYPOGRAFIE 3. LAYOUT 4. GRAFISCHE ELEMENTE

6. Thanks Maciej Cegłowski!

8. 1. INHALTE

11. HYPERTEXT MARKUP LANGUAGE

12. <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>

13. <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>

14. <Start-Tag eigenschaft="wert">Auszuzeichnender Inhalt</End-Tag>

15. <a href="https://twitter.com/anildash" target="_blank">Anil Dash</a>

16. <img src="images/bt14.064.jpg" alt="White mouse holding a teddy bear.">

18. 2. TYPOGRAFIE

19. CASCADING STYLE SHEETS

20. <!DOCTYPE html> <html lang="en"> <head> </head> <body> ... </body> </html>

21. <!DOCTYPE html> <html lang="en"> <head> <title>The Internet with a human face</title> </head> <body> ... </body> </html>

22. <!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>

23. <link rel="stylesheet" href="styles/main.css">

26. selektor { eigenschaft: wert; }

27. element { eigenschaft: wert; } .klasse { eigenschaft: wert; } #id { eigenschaft: wert; }

28. body { color: #333333; }

29. h1, h2 { font-family: 'Exo2', Sans-Serif; }

30. @font-face { font-family: 'Exo2'; }

31. @font-face { font-family: 'Exo2'; src: url('fonts/Exo-2/Exo2-Black.woff') format('woff'), url('fonts/Exo-2/Exo2-Black.ttf') format('truetype'); }

32. @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; }

33. @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; }

34. PIXEL (px) PROZENT (%) EM (em)

35. h2 { font-size: 20px; line-height: 1.5em; }

36. PIXEL (px) PROZENT (%) EM (em) ROOT EM (rem)

37. h2 { font-size: 20px; line-height: 1.5rem; }

39. 3. LAYOUT

43. * { box-sizing: border-box; }

45. .l-copytext img { width: 100%; } .l-copytext ol { margin-left: -2em; } .l-copytext ol img { margin: 1em 0; }

48. 4. GRAFISCHE ELEMENTE

49. html, body { height: 100%; margin: 0; }

51. <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%; }

52. .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%; }

55. .title-container h1 { position: static | relative | absolute | fixed; }

56. <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%; }

58. <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; }

60. JAVASCRIPT JQUERY

61. HTML – INHALT CSS – AUSSEHEN JAVASCRIPT – VERHALTEN

63. $(document).on('ready', function () { });

64. $(document).on('ready', function () { var animateElement = function (selektor) { $(selektor).hide().slideDown(1000); }; });

65. $(document).on('ready', function () { var animateElement = function (selektor) { $(selektor).hide().slideDown(1000); }; animateElement('#title'); });

67. MEDIA QUERIES Display-Breite/-Höhe, Browser-Breite/-Höhe, Geräte- und Browser-Ratio ...

68. body { color: #333333; font-family: 'Gentium', Serif; font-size: 125%; font-weight: 400; line-height: 1.5em; }

69. 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%; } }

72. 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; } }

75. GITHUB.COM Beispiel: github.com/Fischaela/Pubkon-2014

78. CODECADEMY codecademy.com TREEHOUSE teamtreehouse.com

79. DANKE! <3

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

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

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

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

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

Último

Último(15)

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