CSS3 a přidružené moderní technologie

Obsah

  1. Multimedia
  2. 3D, Graphics, Effects
  3. CSS3

Multimedia – Audio

<audio controls>
	<source src="sound.ogg" type="audio/ogg" />
	<source src="sound.mp3" type="audio/mpeg" />
	<source src="sound.wav" type="audio/wave" />
	Smůla :-(
</audio>

Multimedia – Audio

Javascriptové API

new Audio("song.mp3").play();
var a = new Audio();
a.canPlayType("audio/mpeg"); /* "", "maybe", "probably" */
a.src = "song.mp3";
a.addEventListener("timeupdate", function() { console.log(a.currentTime); }, false);
a.play();

Budoucí rozšíření

  • přístup k právě přehrávaným datům (vizualizace)
  • generování zvukového signálu

Multimedia – Video

<video controls poster="image.png">
	<source src="video-small.mp4" 
		type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" 
		media="screen and (max-width:500px)" 
	/>
	<source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" />
	<source src="video.ogv" type="video/ogg; codecs='theora, vorbis'"/>
	<source src="video.webm" type="video/webm; codecs='vp8, vorbis'" />
	<!-- embed flash jako fallback -->
</video>

Graphics – Canvas

Graphics – Canvas

Javascriptové API

var c = $("canvas").getContext("2d");
c.fillStyle = "rgb(50, 100, 255)";
c.fillRect(0, 0, 300, 300);

c.fillStyle = "rgb(255, 255, 0)";
c.beginPath();  
c.arc(150, 150, 50, 0, 2*Math.PI, true);  /* střed */
c.translate(150, 150);

for (var i=0; i<8; i++) {                 /* paprsky */
	c.moveTo(60, 15); c.lineTo(130, 15); 
	if (!(i % 2)) { c.lineTo(120, 0); }
	c.lineTo(130, -15); c.lineTo(60, -15);
	c.lineTo(60, 15);
	c.rotate(Math.PI/4);
}

c.closePath(); c.fill(); c.stroke();

Graphics – WebGL

Graphics – SVG

Graphics – SVG

<svg width="300" height="300" viewBox="0 0 10 10">
	<circle cx="5" cy="5" r="2" />
	<g transform="translate(5, -2) rotate(45)">
		<rect x="3" y="3" width="4" height="4"/>
		<text x="5" y="5">SVG</text>
	</g>
</svg>
circle {
	fill: yellow; stroke: red;
}
rect {
	fill: none; stroke: black;
	stroke-width: 0.2;
}
text {
	text-anchor: middle; font-size: 1px;
}

CSS3

CSS3 – Media queries

<source src="video.mp4" media="screen and (color) and (min-device-width: 600px)" />

CSS3 – selektory

CSS3 – transformace


Adds +3 to your HTML skills

div {
	transform: rotate(45deg) skew(20deg);
	-moz-transform: rotate(45deg) skew(20deg);
	-webkit-transform: rotate(45deg) skew(20deg);
	-ms-transform: rotate(45deg) skew(20deg);
	-o-transform: rotate(45deg) skew(20deg);
}

CSS3 – font-face

Použití vlastního souboru s definicí řezu písma

@font-face {
	font-family: "IM Fell";
	src: url("IMFePIrm28P.ttf") format("truetype");
}
h2 {
	font-family: "IM Fell";
}

Různé formáty souborů písem

EOT Internet Explorer, od verze 4 (!)
TTF, OTF tradiční formáty, podporované ostatními prohlížeči
WOFF pokus o sjednocení všech formátů do jednoho univerzálního

CSS3 – efekty

pre {
	text-shadow: 2px 2px 5px red;
	opacity: 0.75;

	box-shadow: 0px 0px 15px 5px blue;
	border-radius: 30px;

	background-image: linear-gradient(top, #ffee88, #88ff88);
}

CSS3 – Flexible box model

flexible box model

#parent {
	display: box;
	box-orient: horizontal;
	box-align: center;
}
#box1         { box-flex: 1; }
#box1, #box3  { box-ordinal-group: 2; }	
#box2 {
	box-ordinal-group: 1;
	box-flex: 2;
}



<div id="parent">
	<div id="box1">1</div>
	<div id="box2">2</div>
	<div id="box3">3</div>
</div>
1
2
3

Prostor pro otázky