iiic/pokusy-s-novinkami-html5-a-css3.html

## pokusy-s-novinkami-html5-a-css3.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
*{
margin:10px;
padding:10px;
}
div{
float:left;
width:100px;
height:50px;
box-shadow:5px 8px 5px #aaa;
}
hr{
clear:both;
height:1px;
color:#eee;
background-color:#eee;
border:0;
margin:0;
padding:0;
}
#prvni{
border:20px double red;
border-radius:20px 20px; /* podle oficiálního validátoru je tohle jediný správný zápis zaoblených rohů... pro zaoblení každého rohu jinak bude asi potřeba využít rozšířený zápis */
}
#druhy{
border:20px double green;
border-radius:120px / 80px;
}
#treti{
border:20px double blue;
border-radius:90px 0 / 90px;
}
#ctvrty{
border:20px double #0ff;
border-radius:7px / 7px;
}
#paty{
border:20px double #f0f;
border-radius:0 0 90px / 90px;
}
#sesty{
border:20px double #ff0;
border-radius:60px / 80px;
}
#sedmy{
border:20px double #f88;
border-radius:0 0 90px 90px / 90px;
}
#osmy{
border:20px double #8f8;
border-radius:0 150px 150px 150px / 150px;
}
#devaty{
border:20px double #88f;
border-radius:20px 20px 80px 80px / 80px 80px 20px 20px;
}
#desaty{
border:20px double #f80;
border-radius:10px 100px 10px 100px / 100px 10px 100px 10px;
}
#jedenacty{
border:20px double #08f;
border-radius:80px 40px 80px 40px / 40px 80px 40px 80px;
}
table,td{
border:1px solid black;
padding:2px;
}
tr:nth-child(2n) td{
background:red;
}
#transitions{
transition-property: opacity;
transition-duration: 2s;
}
/* Načtení nového fontu a jeho použití na webu
CSS 3 Font Embed (Example I)
@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
}
.my_CSS3_class {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}
*/
#mega-stin {
text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
font-size: 40px;
margin: 0 0 15px 0;
}
#stin-boxiku {
box-shadow: 5px 5px 5px #888;
background: #eee;
}
#vloz-text:before {
border-bottom:1px solid red;
content:"menu: ";
}
#prvni-pismeno::first-line{
color:green;
}
#prvni-pismeno:first-letter{
color:red;
}
#gradient-1{
background:linear-gradient(white, gray);
}
#gradient-2{
background:radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);
/* tahle vlastnost byla původně udedena u list-style-image */
}
#gradient-3{
linear-gradient(top, yellow, blue 20%, #0f0);
}
</style>
</head>
<body>
<h2>zaoblené rohy</h2>
<div id="prvni">prvni</div>
<div id="druhy">druhy</div>
<div id="treti">treti</div>
<div id="ctvrty">ctvrty</div>
<div id="paty">paty</div>
<div id="sesty">sesty</div>
<div id="sedmy">sedmy</div>
<div id="osmy">osmy</div>
<div id="devaty">devaty</div>
<div id="desaty">desaty</div>
<div id="jedenacty">jedenacty</div>
<hr />
<h2>multiple file upload</h2>
<form action="#">
<input type="file" multiple="" />
</form>
<hr />
<h2>tabulka se zvýrazněním sudých řádků</h2>
<table>
<tr><td>00</td><td>01</td></tr>
<tr><td>10</td><td>11</td></tr>
<tr><td>20</td><td>21</td></tr>
<tr><td>30</td><td>31</td></tr>
<tr><td>40</td><td>41</td></tr>
<tr><td>50</td><td>51</td></tr>
<tr><td>60</td><td>61</td></tr>
<tr><td>70</td><td>71</td></tr>
</table>
<hr />
<h2>Css transitions</h2>
<div id="transitions">stejně to nějak nefunguje</div>
<hr />
<h2 id="mega-stin">Text s mega stínem</h2>
<hr />
<div id="stin-boxiku">zatím nefunguje v žádném prohlížeči</div>
<hr />
<h2>Text vepsaný z css před odstavec</h2>
<div id="vloz-text">obsah menu zde (CSS 2.1)</div>
<hr />
<h2>speciální selektory css 2.1</h2>
<div id="prvni-pismeno">Odstavec textu s prvním obarveným zde, celý první řádek je navíc zelený.</div>
<hr />
<h2>SVG (kruh)</h2>
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
na vlastní stránce:
<a href="http://www.w3.org/TR/SVGTiny12/examples/solidcolor.svg">prvni</a>
<a href="http://www.w3.org/TR/SVGTiny12/examples/13_01.svg">druhy</a>
<a href="http://www.croczilla.com/bits_and_pieces/svg/samples/arcs1/arcs1.svg">treti</a>
<hr />
<h2>Datalist</h2>
<form action="#">
<input list="browsers" />
<datalist id="browsers">
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
</form>
<hr />
<h2>CSS Gradient - oficiální zápis!</h2>
<div id="gradient-1">tady bude úžasný barevný přechod</div>
<div id="gradient-2">stejně tak jako i tady</div>
<div id="gradient-3">výsledek: http://dev.w3.org/csswg/css3-images/linear4.png</div>
<hr />
<h2>cancas příklad z dokumentace</h2>
<canvas width="800" height="450"></canvas>
<script>
 var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 var lastX = context.canvas.width * Math.random();
 var lastY = context.canvas.height * Math.random();
 var hue = 0;
 function line() {
   context.save();
   context.translate(context.canvas.width/2, context.canvas.height/2);
   context.scale(0.9, 0.9);
   context.translate(-context.canvas.width/2, -context.canvas.height/2);
   context.beginPath();
   context.lineWidth = 5 + Math.random() * 10;
   context.moveTo(lastX, lastY);
   lastX = context.canvas.width * Math.random();
   lastY = context.canvas.height * Math.random();
   context.bezierCurveTo(context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         lastX, lastY);
   hue = hue + 10 * Math.random();
   context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
   context.shadowColor = 'white';
   context.shadowBlur = 10;
   context.stroke();
   context.restore();
 }
 setInterval(line, 50);
 function blank() {
   context.fillStyle = 'rgba(0,0,0,0.1)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 }
 setInterval(blank, 40);
</script>
<hr />

</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style type="text/css">
	*{
	margin:10px;
	padding:10px;
	}
	div{
	float:left;
	width:100px;
	height:50px;
	box-shadow:5px 8px 5px #aaa;
	}
	hr{
	clear:both;
	height:1px;
	color:#eee;
	background-color:#eee;
	border:0;
	margin:0;
	padding:0;
	}
	#prvni{
	border:20px double red;
	border-radius:20px 20px; /* podle oficiálního validátoru je tohle jediný správný zápis zaoblených rohů... pro zaoblení každého rohu jinak bude asi potřeba využít rozšířený zápis */
	}
	#druhy{
	border:20px double green;
	border-radius:120px / 80px;
	}
	#treti{
	border:20px double blue;
	border-radius:90px 0 / 90px;
	}
	#ctvrty{
	border:20px double #0ff;
	border-radius:7px / 7px;
	}
	#paty{
	border:20px double #f0f;
	border-radius:0 0 90px / 90px;
	}
	#sesty{
	border:20px double #ff0;
	border-radius:60px / 80px;
	}
	#sedmy{
	border:20px double #f88;
	border-radius:0 0 90px 90px / 90px;
	}
	#osmy{
	border:20px double #8f8;
	border-radius:0 150px 150px 150px / 150px;
	}
	#devaty{
	border:20px double #88f;
	border-radius:20px 20px 80px 80px / 80px 80px 20px 20px;
	}
	#desaty{
	border:20px double #f80;
	border-radius:10px 100px 10px 100px / 100px 10px 100px 10px;
	}
	#jedenacty{
	border:20px double #08f;
	border-radius:80px 40px 80px 40px / 40px 80px 40px 80px;
	}
	table,td{
	border:1px solid black;
	padding:2px;
	}
	tr:nth-child(2n) td{
	background:red;
	}
	#transitions{
	transition-property: opacity;
	transition-duration: 2s;
	}
	/* Načtení nového fontu a jeho použití na webu
	CSS 3 Font Embed (Example I)
	@font-face {
	font-family: SketchRockwell;
	src: url(‘SketchRockwell.ttf’);
	}
	.my_CSS3_class {
	font-family: SketchRockwell;
	font-size: 3.2em;
	letter-spacing: 1px;
	text-align: center;
	}
	*/
	#mega-stin {
	text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
	font-size: 40px;
	margin: 0 0 15px 0;
	}
	#stin-boxiku {
	box-shadow: 5px 5px 5px #888;
	background: #eee;
	}
	#vloz-text:before {
	border-bottom:1px solid red;
	content:"menu: ";
	}
	#prvni-pismeno::first-line{
	color:green;
	}
	#prvni-pismeno:first-letter{
	color:red;
	}
	#gradient-1{
	background:linear-gradient(white, gray);
	}
	#gradient-2{
	background:radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);
	/* tahle vlastnost byla původně udedena u list-style-image */
	}
	#gradient-3{
	linear-gradient(top, yellow, blue 20%, #0f0);
	}
	</style>
	</head>
	<body>
	<h2>zaoblené rohy</h2>
	<div id="prvni">prvni</div>
	<div id="druhy">druhy</div>
	<div id="treti">treti</div>
	<div id="ctvrty">ctvrty</div>
	<div id="paty">paty</div>
	<div id="sesty">sesty</div>
	<div id="sedmy">sedmy</div>
	<div id="osmy">osmy</div>
	<div id="devaty">devaty</div>
	<div id="desaty">desaty</div>
	<div id="jedenacty">jedenacty</div>
	<hr />
	<h2>multiple file upload</h2>
	<form action="#">
	<input type="file" multiple="" />
	</form>
	<hr />
	<h2>tabulka se zvýrazněním sudých řádků</h2>
	<table>
	<tr><td>00</td><td>01</td></tr>
	<tr><td>10</td><td>11</td></tr>
	<tr><td>20</td><td>21</td></tr>
	<tr><td>30</td><td>31</td></tr>
	<tr><td>40</td><td>41</td></tr>
	<tr><td>50</td><td>51</td></tr>
	<tr><td>60</td><td>61</td></tr>
	<tr><td>70</td><td>71</td></tr>
	</table>
	<hr />
	<h2>Css transitions</h2>
	<div id="transitions">stejně to nějak nefunguje</div>
	<hr />
	<h2 id="mega-stin">Text s mega stínem</h2>
	<hr />
	<div id="stin-boxiku">zatím nefunguje v žádném prohlížeči</div>
	<hr />
	<h2>Text vepsaný z css před odstavec</h2>
	<div id="vloz-text">obsah menu zde (CSS 2.1)</div>
	<hr />
	<h2>speciální selektory css 2.1</h2>
	<div id="prvni-pismeno">Odstavec textu s prvním obarveným zde, celý první řádek je navíc zelený.</div>
	<hr />
	<h2>SVG (kruh)</h2>
	<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
	na vlastní stránce:
	<a href="http://www.w3.org/TR/SVGTiny12/examples/solidcolor.svg">prvni</a>
	<a href="http://www.w3.org/TR/SVGTiny12/examples/13_01.svg">druhy</a>
	<a href="http://www.croczilla.com/bits_and_pieces/svg/samples/arcs1/arcs1.svg">treti</a>
	<hr />
	<h2>Datalist</h2>
	<form action="#">
	<input list="browsers" />
	<datalist id="browsers">
	<option value="Safari">
	<option value="Internet Explorer">
	<option value="Opera">
	<option value="Firefox">
	</datalist>
	</form>
	<hr />
	<h2>CSS Gradient - oficiální zápis!</h2>
	<div id="gradient-1">tady bude úžasný barevný přechod</div>
	<div id="gradient-2">stejně tak jako i tady</div>
	<div id="gradient-3">výsledek: http://dev.w3.org/csswg/css3-images/linear4.png</div>
	<hr />
	<h2>cancas příklad z dokumentace</h2>
	<canvas width="800" height="450"></canvas>
	<script>
	var context = document.getElementsByTagName('canvas')[0].getContext('2d');
	var lastX = context.canvas.width * Math.random();
	var lastY = context.canvas.height * Math.random();
	var hue = 0;
	function line() {
	context.save();
	context.translate(context.canvas.width/2, context.canvas.height/2);
	context.scale(0.9, 0.9);
	context.translate(-context.canvas.width/2, -context.canvas.height/2);
	context.beginPath();
	context.lineWidth = 5 + Math.random() * 10;
	context.moveTo(lastX, lastY);
	lastX = context.canvas.width * Math.random();
	lastY = context.canvas.height * Math.random();
	context.bezierCurveTo(context.canvas.width * Math.random(),
	context.canvas.height * Math.random(),
	context.canvas.width * Math.random(),
	context.canvas.height * Math.random(),
	lastX, lastY);
	hue = hue + 10 * Math.random();
	context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
	context.shadowColor = 'white';
	context.shadowBlur = 10;
	context.stroke();
	context.restore();
	}
	setInterval(line, 50);
	function blank() {
	context.fillStyle = 'rgba(0,0,0,0.1)';
	context.fillRect(0, 0, context.canvas.width, context.canvas.height);
	}
	setInterval(blank, 40);
	</script>
	<hr />

	</body>
	</html>
No results found