Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
HTML UND CSS
FÜR DESIGNER
Pubkon 2014, Michaela Lehr @fischaelameer
1. INHALTE
2. TYPOGRAFIE
3. LAYOUT
4. GRAFISCHE ELEMENTE
Thanks Maciej Cegłowski!
1. INHALTE
HYPERTEXT MARKUP LANGUAGE
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<p>Paragraph</p>
<footer>
<p>Footer paragraph</p>
</footer>
<ol>
<li>List item</li...
<h1>The Internet <span>has a human face</span></h1>
<h1>The Internet<br>
<span>has a human face</span>
</h1>
<h1>The Inter...
<Start-Tag eigenschaft="wert">Auszuzeichnender Inhalt</End-Tag>
<a href="https://twitter.com/anildash" target="_blank">Anil Dash</a>
<img src="images/bt14.064.jpg" alt="White mouse holding a teddy bear.">
2. TYPOGRAFIE
CASCADING STYLE SHEETS
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
...
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Internet with a human face</title>
</head>
<body>
...
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Internet with a human face</title>
<link rel="stylesheet" href="styles/...
<link rel="stylesheet" href="styles/main.css">
selektor {
eigenschaft: wert;
}
element {
eigenschaft: wert;
}
.klasse {
eigenschaft: wert;
}
#id {
eigenschaft: wert;
}
body {
color: #333333;
}
h1,
h2 {
font-family: 'Exo2', Sans-Serif;
}
@font-face {
font-family: 'Exo2';
}
@font-face {
font-family: 'Exo2';
src: url('fonts/Exo-2/Exo2-Black.woff') format('woff'),
url('fonts/Exo-2/Exo2-Black.ttf'...
@font-face {
font-family: 'Exo2';
src: url('fonts/Exo-2/Exo2-Black.woff') format('woff'),
url('fonts/Exo-2/Exo2-Black.ttf'...
@font-face {
font-family: 'Exo2';
src: url('fonts/Exo-2/Exo2-LightItalic.woff') format('woff'),
url('fonts/Exo-2/Exo2-Ligh...
PIXEL (px)
PROZENT (%)
EM (em)
h2 {
font-size: 20px;
line-height: 1.5em;
}
PIXEL (px)
PROZENT (%)
EM (em)
ROOT EM (rem)
h2 {
font-size: 20px;
line-height: 1.5rem;
}
3. LAYOUT
* {
box-sizing: border-box;
}
.l-copytext img {
width: 100%;
}
.l-copytext ol {
margin-left: -2em;
}
.l-copytext ol img {
margin: 1em 0;
}
4. GRAFISCHE ELEMENTE
html,
body {
height: 100%;
margin: 0;
}
<section class="title-container">
<h1 id="title">The Internet
<br><span class="t-headline-decent">with a human face</span>...
.title-container {
background-image: url('../images/bt14.001.jpg');
background-position: 50% 50%;
background-size: cover;
...
.title-container h1 {
position: static | relative | absolute | fixed;
}
<section class="title-container">
<h1 id="title">The Internet
<br><span class="t-headline-decent">with a human face</span>...
<a href="https://twitter.com/anildash" target="_blank">Anil Dash</a>
a {
color: #00a0a0;
font-weight: 700;
text-decoration...
JAVASCRIPT
JQUERY
HTML – INHALT
CSS – AUSSEHEN
JAVASCRIPT – VERHALTEN
$(document).on('ready', function () {
});
$(document).on('ready', function () {
var animateElement = function (selektor) {
$(selektor).hide().slideDown(1000);
};
});
$(document).on('ready', function () {
var animateElement = function (selektor) {
$(selektor).hide().slideDown(1000);
};
an...
MEDIA QUERIES
Display-Breite/-Höhe,
Browser-Breite/-Höhe,
Geräte- und Browser-Ratio ...
body {
color: #333333;
font-family: 'Gentium', Serif;
font-size: 125%;
font-weight: 400;
line-height: 1.5em;
}
body {
color: #333333;
font-family: 'Gentium', Serif;
font-size: 100%;
font-weight: 400;
line-height: 1.5em;
}
@media scre...
a {
color: #00a0a0;
font-weight: 700;
text-decoration: none;
transition: border 0.1s ease-in;
}
a:hover,
a:active {
border...
GITHUB.COM
Beispiel: github.com/Fischaela/Pubkon-2014
CODECADEMY
codecademy.com
TREEHOUSE
teamtreehouse.com
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)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
Nächste SlideShare
Wird geladen in …5
×

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

52.015 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet, Technologie, Kunst & Fotos
  • Als Erste(r) kommentieren

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

×