Weitere ähnliche Inhalte Ähnlich wie Schöneres Web mit HTML5 + CSS3 Ähnlich wie Schöneres Web mit HTML5 + CSS3 (20) Schöneres Web mit HTML5 + CSS33. GENC RASHITI
– UX Designer @ Ginetta™
– HTML + CSS Ninja
– Enthusiast
ICH LIEBE …
frischen Jazz / Terry Pratchett / 2D Fighting
Games / wohlgeformte Buchstaben / abgerundete
Ecken
@RAWDIGGIE
8. «Progressive Enhancement beschreibt eine Methode
im Webdesign, die Barrierefreiheit, semantische
Auszeichnung und Trennung von Information und
Präsentation beinhaltet, um eine Website auch für
Endgeräte benutzbar zu machen, die nur über
eingeschränkte Funktionen (JavaScript-/CSS-/
Flash-Unterstützung) verfügen.»
— http://www.wikipedia.de
13. META TAGS
XHTML 1.0
<meta
http-‐equiv="Content-‐Type"
content="text/html"
»
charset=UTF-‐8"
/>
HTML5
<meta
charset="UTF-‐8">
15. LINK TAG
XHTML 1.0
<link
rel="stylesheet"
type="text/css"
href="file.css"
/>
HTML5
<link
rel="stylesheet"
href="file.css">
16. SYNTAX
XHTML 1.0
<br
/>
– XML Syntax
– Tags lowercase
HTML5
<br> oder <BR> oder <br
/> …
– uppercase
– lowercase
– quoted
– unquoted
– …
17. BLOCK LINKS
XHTML 1.0
<h2><a
href="/product">Title</a></h2>
<p><a
href="/product">Check
it
out!</a></p>
HTML5
<a
href="/product">
<h2>Title</h2>
<p>Check
it
out!</p>
</a>
18. BITTE NICHT!
– obsolete (depricated) elements + attributes
frame, frameset, noframe
acronym
font, big, center, strike
bgcolor, cellspacing, cellpadding, valign
…
21. section
header
hgroup
footer
SEMANTIK
aside
nav
article
…
28. article macht glücklich!
Publiziert am 2. Oktober, 2010 von Genc Rashiti
Jemand musste Josef K. verleumdet haben, denn ohne dass er
etwas Böses getan hätte, wurde er eines Morgens verhaftet.
«Wie ein Hund!» sagte er, es war, als sollte die Scham ihn
überleben.
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich
in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen
wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer
Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. «Es ist ein
eigentümlicher Apparat», sagte der Offizier zu dem Forschungsreisenden und
überblickte mit einem gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der
Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und
hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das
Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich,
umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste
Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er
eines Morgens verhaftet.
29. <article>
<header>
<h1>article
macht
glücklich<h1>
</header>
<h2>Jemand
musste
Josef…</h2>
<p>Als
Gregor
Samsa
eines
Morgens…</p>
<footer>
<p>Publiziert
am
<time
datetime="2010-‐10-‐2T15:03"
pubdate>2.Oktober
2010</time>
von
Genc
Rashiti</p>
</footer>
</article>
ARTICLE
33. CSS3 MODULE
Advanced layout / Aural Style Sheets / Backgrounds and
Borders / Basic User Interfaces / Box Model / Cascading
and Inheritance / Color / Fonts / Generated Content for
Paged Media / Generated and Replaced Content /
Hyperlink Presentation / Line Layout / Lists / Maths /
Multi Column Layout / Namespaces / Object
Model / Paged Media / Positioning / Presentation Levels /
Reader Media Types / Ruby / Scoping / Speech / Syntax /
Tables / Text / Text Layout / Values and Units / Web Fonts
34. ::selection
{
background:
#d30820;
}
/*
selektierter
Text
erhält
roten
Hintergrund
*/
#menu
a:after
{
content:"»";
}
/*
fügt
ein
»
Symbol
ein
*/
li:last-‐child
{
border-‐bottom:
none;
}
/*
letztes
Listenelement
erhält
die
Farbe
#eee
*/
COOLE SELEKTOREN
36. .box_rgba
{
background-‐color:
#000;
background-‐color:
rgba(0,
0,
0,
.6);
/*
FF3+,
Saf3+,
Opera
10.10+,
Chrome,
IE9
*/
filter:
progid:DXImageTransform.Microsoft.gradient
»
(startColorStr='#99000000',EndColorStr='#99000000');
/*
IE6,
IE7
*/
-‐ms-‐filter:
"progid:DXImageTransform.Microsoft.gradient
»
(startColorStr='#99000000',EndColorStr='#99000000')";
/*
IE8
*/
}
TRANSPARENTER HINTERGRUND
37. .box_rgba
{
background-‐color:
#000;
background-‐color:
rgba(0,
0,
0,
.6);
/*
FF3+,
Saf3+,
Opera
10.10+,
Chrome,
IE9
*/
filter:
progid:DXImageTransform.Microsoft.gradient
»
(startColorStr='#99000000',EndColorStr='#99000000');
/*
IE6,
IE7
*/
-‐ms-‐filter:
"progid:DXImageTransform.Microsoft.gradient
»
(startColorStr='#99000000',EndColorStr='#99000000')";
/*
IE8
*/
}
TRANSPARENTER HINTERGRUND
39. .box_gradient
{
background-‐color:
#444;
background-‐image:
-‐moz-‐linear-‐gradient(top,
#444444,
#999999)
/*
FF3.6
*/
background-‐image:
-‐webkit-‐gradient(linear,
left
top,
left
bottom,
»
color-‐stop(0,
#444444),color-‐stop(1,
#999999));
/*
Saf4+,
Chrome
*/
filter:
progid:DXImageTransform.Microsoft.gradient
»
(startColorStr='#444444',
EndColorStr='#999999');
/*
IE6,IE7
*/
-‐ms-‐filter:
"progid:DXImageTransform.Microsoft.gradient
»
(startColorStr='#444444',
EndColorStr='#999999')";
/*
IE8
*/
}
VERLAUF
40. .box_gradient
{
background-‐color:
#444444;
background-‐image:
-‐moz-‐linear-‐gradient(top,
#444444,
#999999)
/*
FF3.6
*/
background-‐image:
-‐webkit-‐gradient(linear,
left
top,
left
bottom,
»
color-‐stop(0,
#444444),color-‐stop(1,
#999999));
/*
Saf4+,
Chrome
*/
filter:
progid:DXImageTransform.Microsoft.gradient
»
(startColorStr='#444444',
EndColorStr='#999999');
/*
IE6,IE7
*/
-‐ms-‐filter:
"progid:DXImageTransform.Microsoft.gradient
»
(startColorStr='#444444',
EndColorStr='#999999')";
/*
IE8
*/
}
VERLAUF
42. .box_shadow
{
-‐moz-‐box-‐shadow:
0px
0px
4px
rgba(0,0,0,.6);
/*
FF3.5+
*/
-‐webkit-‐box-‐shadow:
0px
0px
4px
rgba(0,0,0,.6);
/*
Saf3.0+,
Chrome
*/
box-‐shadow:
0px
0px
4px
rgba(0,0,0.6);
/*
Opera
10.5,
IE
9
*/
}
SCHATTENWURF
44. .box_round
{
-‐moz-‐border-‐radius:
3px;
/*
FF1+
*/
-‐webkit-‐border-‐radius:
3px;
/*
Saf3-‐4
*/
border-‐radius:
3px;
/*
Opera
10.5,
IE
9,
Saf5,
Chrome
*/
}
ABGERUNDETE ECKEN
46. .box_textshadow
{
text-‐shadow:
0px
1px
1px
rgba(255,255,255,.5);
/*
FF3.5+,
Opera
9+,
Saf1+,
Chrome
*/
}
TEXT SCHATTEN
49. @font-‐face
{
font-‐family:
'WebFont';
src:
url('DroidSans.eot');
/*
IE6-‐8
*/
src:
local('☺'),
url('DroidSans.woff')
format('woff'),
/*
FF3.6,
IE9
*/
url('DroidSans.ttf')
format('truetype');
/*
Saf3+,Chrome,
FF3.5,
Opera10+
*/
}
button
{
font-‐family:
"WebFont";
}
WEB FONTS
51. .box_rotate
{
-‐moz-‐transform:
rotate(7.5deg);
/*
FF3.5+
*/
-‐o-‐transform:
rotate(7.5deg);
/*
Opera
10.5
*/
-‐webkit-‐transform:
rotate(7.5deg);
/*
Saf3.1+,
Chrome
*/
transform:
rotate(7.5deg);
filter:
progid:DXImageTransform.Microsoft.Matrix
»
(sizingMethod='auto
expand',
M11=0.9914448613738104,
»
M12=-‐0.13052619222005157,M21=0.13052619222005157,
»
M22=0.9914448613738104);
/*
IE6,
IE7
*/
-‐ms-‐filter:
"progid:DXImageTransform.Microsoft.Matrix
»
(M11=0.9914448613738104,
M12=-‐0.13052619222005157,
»
M21=0.13052619222005157,
M22=0.9914448613738104,
»
sizingMethod='auto
expand')";
/*
IE8
*/
zoom:
1;
}
ROTATION
52. .box_rotate
{
-‐moz-‐transform:
rotate(7.5deg);
/*
FF3.5+
*/
-‐o-‐transform:
rotate(7.5deg);
/*
Opera
10.5
*/
-‐webkit-‐transform:
rotate(7.5deg);
/*
Saf3.1+,
Chrome
*/
transform:
rotate(7.5deg);
filter:
progid:DXImageTransform.Microsoft.Matrix
»
(sizingMethod='auto
expand',
M11=0.9914448613738104,
»
M12=-‐0.13052619222005157,M21=0.13052619222005157,
»
M22=0.9914448613738104);
/*
IE6,
IE7
*/
-‐ms-‐filter:
"progid:DXImageTransform.Microsoft.Matrix
»
(M11=0.9914448613738104,
M12=-‐0.13052619222005157,
»
M21=0.13052619222005157,
M22=0.9914448613738104,
»
sizingMethod='auto
expand')";
/*
IE8
*/
zoom:
1;
}
ROTATION