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

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

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

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

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

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

<!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/main.css">
</head>
<body>
...
</body>
</html>

selektor {
eigenschaft: wert;
}

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

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

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

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

@font-face {
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;
}

@font-face {
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;
}

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

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

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></h1>
</section>
.title-container {
margin: 0 0 4rem 0;
width: 100%;
height: 100%;
}

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

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

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

HTML – INHALT
CSS – AUSSEHEN
JAVASCRIPT – VERHALTEN

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

var animateElement = function (selektor) {
$(selektor).hide().slideDown(1000);
};
});

var animateElement = function (selektor) {
$(selektor).hide().slideDown(1000);
};
animateElement('#title');
});

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 screen and (min-width: 900px) {
body {
font-size: 125%;
}
}

a {
color: #00a0a0;
font-weight: 700;
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;
transition: border 0.1s ease-in;
&:hover,
&:active {
border-bottom: 4px solid $color-primary;
}
}

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

CODECADEMY
codecademy.com
TREEHOUSE
teamtreehouse.com

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

Recommended

More Related Content

What's hot (20)

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

Recently uploaded (17)

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