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.226 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
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×