View
237
Download
0
Category
Preview:
Citation preview
HTML5 und CSS3
Was geht, was kommt?
✓ B2C Webentwicklung
✓ (Web)Entwicklung,
Administration
✓ Mac und iPhone Entwicklung
Über mich
HTML5 und CSS3 - Was geht, was kommt?
Vorschau
HTML5 und CSS3 - Was geht, was kommt?
HTML5HTML5 + CSS3 + JavaScript
The Flash
HTML5 und CSS3 - Was geht, was kommt?
The Flash
HTML5 und CSS3 - Was geht, was kommt?
VerfügbarkeitHTML5 und CSS3 - Was geht, was kommt?
http://www.flickr.com/photos/atzu/
VerfügbarkeitHTML5 und CSS3 - Was geht, was kommt?
http://www.flickr.com/photos/atzu/
HTML5 und CSS3 - Was geht, was kommt?
Doctype
HTML5 und CSS3 - Was geht, was kommt?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
HTML
HTML5 und CSS3 - Was geht, was kommt?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html lang="de">
Semantic Markup
HTML5 und CSS3 - Was geht, was kommt?
<div id=“header“>
<div id=“navigation“>
<divid=“sidebar“>
<div id=“footer“>
<div id=“post“>
<div id=“post“>
<div id=“content“>
Semantic Markup
HTML5 und CSS3 - Was geht, was kommt?
<header>
<nav>
<aside>
<footer>
<article>
<article>
<section>
Forms
HTML5 und CSS3 - Was geht, was kommt?
<input name="name" autofocus >
<input name="vorname" placeholder="Ihr Vorname">
<input name="range" type="range" min="0" max="10" step="2" value="6">
<input name="number" type="number" min="0" max="10" step="2" value="6">
Forms
HTML5 und CSS3 - Was geht, was kommt?
<input name="name" autofocus >
<input name="vorname" placeholder="Ihr Vorname">
<input name="range" type="range" min="0" max="10" step="2" value="6">
<input name="number" type="number" min="0" max="10" step="2" value="6">
Forms
HTML5 und CSS3 - Was geht, was kommt?
<input name="date" type="date">
<input name="email" type="email">
<input name="url" type="url">
Video
HTML5 und CSS3 - Was geht, was kommt?
<video width="320" height="240" controls preload="none" poster="videoframe.jpg"> <source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>
Canvas
HTML5 und CSS3 - Was geht, was kommt?
<canvas id="myDrawing" width="200" height="200"> <p>No canvas support.</p></canvas>
Canvas
HTML5 und CSS3 - Was geht, was kommt?
var drawingCanvas = document.getElementById('myDrawing'); if(drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d'); context.strokeStyle = "#000000"; context.fillStyle = "#FFFF00"; context.beginPath(); context.arc(100, 100, 50, 0, Math.PI*2, true); context.closePath(); context.stroke(); context.fill();}
Demo
HTML5 und CSS3 - Was geht, was kommt?
Was geht?
HTML5 und CSS3 - Was geht, was kommt?
- <acronym>- <applet>- <basefont>- <big>- <center>- <dir>- <font>- <frame>
- <frameset>- <noframes>- <s>- <strike>- <tt>- <u>- <xmp>
<tag-without-content>
Was noch?
HTML5 und CSS3 - Was geht, was kommt?
✓ Audio
✓ Canvas 3D (WebGL)
✓ Content Editable
✓ Drag and Drop
✓ Persistent Data Storage
✓ WebSockets
Vorschau
HTML5 und CSS3 - Was geht, was kommt?
CSS3
CSS3
HTML5 und CSS3 - Was geht, was kommt?
Button.button { border: 2px solid #408000 color: #408000;}
Border Radius
HTML5 und CSS3 - Was geht, was kommt?
Buttonborder-radius: 10px;
Browserunterschiede
HTML5 und CSS3 - Was geht, was kommt?
-webkit-border-radius: 10px;-moz-order-radius: 10px;border-radius: 10px;
-webkit-border-top-left-radius: 10px;-moz-order-radius-topleft: 10px;border-top-left-radius: 10px;
Browserunterschiede
HTML5 und CSS3 - Was geht, was kommt?
background: -webkit-gradient( linear, left top, left bottom, from(#cf6), to(#4e9803));background: -moz-linear-gradient( top, #cf6, #4e9803);
Gradients
HTML5 und CSS3 - Was geht, was kommt?
Buttonbackground: gradient( linear, left top, left bottom, from(#cf6), to(#4e9803));
Text Shadow
HTML5 und CSS3 - Was geht, was kommt?
Buttontext-shadow: 0px 1px 1px #fff;
Box Shadow
HTML5 und CSS3 - Was geht, was kommt?
Buttonbox-shadow: 0px 4px 3px #000;
Vergleich
HTML5 und CSS3 - Was geht, was kommt?
Button
Border Image
HTML5 und CSS3 - Was geht, was kommt?
Border Image
HTML5 und CSS3 - Was geht, was kommt?
border-image: url(border.png) 10 10 10 10 repeat repeat;
Border Image
HTML5 und CSS3 - Was geht, was kommt?
border-image: url(border.png) 10 10 10 10 round round;
Border Image
HTML5 und CSS3 - Was geht, was kommt?
border-image: url(border.png) 10 10 10 10 stretch stretch;
Transformation
HTML5 und CSS3 - Was geht, was kommt?
transform: translate(150px, 0);
transform: rotate(45deg);
transform: scale(1.5);
transform: translate(80px, 0) rotate(-65deg) scale(2.5);
Transition
HTML5 und CSS3 - Was geht, was kommt?
a:hover { color: red; transition: color .25s linear;}
a:link, a:visited { color: blue; transition: color .25s linear .1s;}
Selectors
HTML5 und CSS3 - Was geht, was kommt?
/* Input & Link related */ :focus :target :enabled :disabled :checked :indeterminate
Selectors
HTML5 und CSS3 - Was geht, was kommt?
/* Position related */ :first-child :last-child :nth-child(N) :nth-last-child(N) :nth-of-type(N) :nth-last-of-type(N) :first-of-type :last-of-type :only-of-type
Selectors
HTML5 und CSS3 - Was geht, was kommt?
/* Content related */ :before :after
a:after { content: attr(title); }
Demo
HTML5 und CSS3 - Was geht, was kommt?
Was noch?
HTML5 und CSS3 - Was geht, was kommt?
/* Multiple Backgrounds */background: url(gradient.png) repeat-x, url(tl.png) top left no-repeat, url(br.png) bottom right no-repeat;
Was noch?
HTML5 und CSS3 - Was geht, was kommt?
Web Fonts/* Web Fonts */
@font-face { font-family: Diavlo; src: url("diavlo.otf") format("opentype");}
h1 { font-family: Diavlo;}
Was noch?
HTML5 und CSS3 - Was geht, was kommt?
Web FontsLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
/* Columns */ column-count: 2; column-gap: 20px;
Was noch?
HTML5 und CSS3 - Was geht, was kommt?
Web FontsLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
/* Reflections */ box-reflect: below 5px gradient( linear, left top, left bottom, from(transparent), color-stop( 0.5, transparent), to(white));
Was noch?
HTML5 und CSS3 - Was geht, was kommt?
Web FontsLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
AN AUS
/* rgba */
.hud-box { background-color: rgba(0,0,0,.6);}
.hud-text { color: rgba(0,0,0,.6);}
Demos
HTML5 und CSS3 - Was geht, was kommt?
http://www.dextrose.com/en/projects/aves-engine
Links
HTML5 und CSS3 - Was geht, was kommt?
http://delicious.com/niedral/webdevfulda-html5css3
HTML5 und CSS3 - Was geht, was kommt?
Fragen!?
Recommended