HTML5 und CSS3 -...

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


HTML5HTML5 + CSS3 + JavaScript

The Flash


VerfügbarkeitHTML5 und CSS3 - Was geht, was kommt?

http://www.flickr.com/photos/atzu/



Doctype


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

HTML


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html lang="de">

http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml

Semantic Markup


<div id=“header“>

<div id=“navigation“>

<divid=“sidebar“>

<div id=“footer“>

<div id=“post“>

<div id=“post“>

<div id=“content“>

Semantic Markup


<header>

<nav>

<aside>

<footer>

<article>

<article>

<section>

Forms


<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


<input name="date" type="date">

<input name="email" type="email">

<input name="url" type="url">

Video


<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


<canvas id="myDrawing" width="200" height="200"> <p>No canvas support.</p></canvas>

Canvas


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


Was geht?


- <acronym>- <applet>- <basefont>- <big>- <center>- <dir>- <font>- <frame>

- <frameset>- <noframes>- <s>- <strike>- <tt>- <u>- <xmp>

<tag-without-content>

Was noch?


✓ Audio

✓ Canvas 3D (WebGL)

✓ Content Editable

✓ Drag and Drop

✓ Persistent Data Storage

✓ WebSockets

Vorschau


CSS3

CSS3


Button.button { border: 2px solid #408000 color: #408000;}

Border Radius


Buttonborder-radius: 10px;

Browserunterschiede


-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


background: -webkit-gradient( linear, left top, left bottom, from(#cf6), to(#4e9803));background: -moz-linear-gradient( top, #cf6, #4e9803);

Gradients


Buttonbackground: gradient( linear, left top, left bottom, from(#cf6), to(#4e9803));

Text Shadow


Buttontext-shadow: 0px 1px 1px #fff;

Box Shadow


Buttonbox-shadow: 0px 4px 3px #000;

Vergleich


Button

Border Image


Border Image


border-image: url(border.png) 10 10 10 10 repeat repeat;

Border Image


border-image: url(border.png) 10 10 10 10 round round;

Border Image


border-image: url(border.png) 10 10 10 10 stretch stretch;

Transformation


transform: translate(150px, 0);

transform: rotate(45deg);

transform: scale(1.5);

transform: translate(80px, 0) rotate(-65deg) scale(2.5);

Transition


a:hover { color: red; transition: color .25s linear;}

a:link, a:visited { color: blue; transition: color .25s linear .1s;}

Selectors


/* Input & Link related */ :focus :target :enabled :disabled :checked :indeterminate

Selectors


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


/* Content related */ :before :after

a:after { content: attr(title); }

Demo


Was noch?


/* Multiple Backgrounds */background: url(gradient.png) repeat-x, url(tl.png) top left no-repeat, url(br.png) bottom right no-repeat;

Was noch?


Web Fonts/* Web Fonts */

@font-face { font-family: Diavlo; src: url("diavlo.otf") format("opentype");}

h1 { font-family: Diavlo;}

Was noch?


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?




/* Reflections */ box-reflect: below 5px gradient( linear, left top, left bottom, from(transparent), color-stop( 0.5, transparent), to(white));

Was noch?




AN AUS

/* rgba */

.hud-box { background-color: rgba(0,0,0,.6);}

.hud-text { color: rgba(0,0,0,.6);}

Demos


http://www.dextrose.com/en/projects/aves-engine



Links


http://delicious.com/niedral/webdevfulda-html5css3




Fragen!?

HTML5 und CSS3 -...

Documents

Transcript of HTML5 und CSS3 -...