Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
technologiské testy pro prohlížeče
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment