Your SlideShare is downloading. ×
  • Like
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 2,346 views
Published

Slides zum Talk "HTML und CSS für Designer" für PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr). …

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
  • 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
2,346
On SlideShare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
27
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

Transcript

  • 1. HTML UND CSS FÜR DESIGNER Pubkon 2014, Michaela Lehr @fischaelameer
  • 2. 1. INHALTE 2. TYPOGRAFIE 3. LAYOUT 4. GRAFISCHE ELEMENTE
  • 3. Thanks Maciej Cegłowski!
  • 4. 1. INHALTE
  • 5. HYPERTEXT MARKUP LANGUAGE
  • 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. <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. <Start-Tag eigenschaft="wert">Auszuzeichnender Inhalt</End-Tag>
  • 9. <a href="https://twitter.com/anildash" target="_blank">Anil Dash</a>
  • 10. <img src="images/bt14.064.jpg" alt="White mouse holding a teddy bear.">
  • 11. 2. TYPOGRAFIE
  • 12. CASCADING STYLE SHEETS
  • 13. <!DOCTYPE html> <html lang="en"> <head> </head> <body> ... </body> </html>
  • 14. <!DOCTYPE html> <html lang="en"> <head> <title>The Internet with a human face</title> </head> <body> ... </body> </html>
  • 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. <link rel="stylesheet" href="styles/main.css">
  • 17. selektor { eigenschaft: wert; }
  • 18. element { eigenschaft: wert; } .klasse { eigenschaft: wert; } #id { eigenschaft: wert; }
  • 19. body { color: #333333; }
  • 20. h1, h2 { font-family: 'Exo2', Sans-Serif; }
  • 21. @font-face { font-family: 'Exo2'; }
  • 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. @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. @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. PIXEL (px) PROZENT (%) EM (em)
  • 26. h2 { font-size: 20px; line-height: 1.5em; }
  • 27. PIXEL (px) PROZENT (%) EM (em) ROOT EM (rem)
  • 28. h2 { font-size: 20px; line-height: 1.5rem; }
  • 29. 3. LAYOUT
  • 30. * { box-sizing: border-box; }
  • 31. .l-copytext img { width: 100%; } .l-copytext ol { margin-left: -2em; } .l-copytext ol img { margin: 1em 0; }
  • 32. 4. GRAFISCHE ELEMENTE
  • 33. html, body { height: 100%; margin: 0; }
  • 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. .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. .title-container h1 { position: static | relative | absolute | fixed; }
  • 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. <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. JAVASCRIPT JQUERY
  • 40. HTML – INHALT CSS – AUSSEHEN JAVASCRIPT – VERHALTEN
  • 41. $(document).on('ready', function () { });
  • 42. $(document).on('ready', function () { var animateElement = function (selektor) { $(selektor).hide().slideDown(1000); }; });
  • 43. $(document).on('ready', function () { var animateElement = function (selektor) { $(selektor).hide().slideDown(1000); }; animateElement('#title'); });
  • 44. MEDIA QUERIES Display-Breite/-Höhe, Browser-Breite/-Höhe, Geräte- und Browser-Ratio ...
  • 45. body { color: #333333; font-family: 'Gentium', Serif; font-size: 125%; font-weight: 400; line-height: 1.5em; }
  • 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. 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. GITHUB.COM Beispiel: github.com/Fischaela/Pubkon-2014
  • 49. CODECADEMY codecademy.com TREEHOUSE teamtreehouse.com
  • 50. DANKE! <3