Er is geen CSS ondersteuning.
klik hier om naar de home pagina te gaan
met deze link ga je naar de indexpagina
voor het menu moet je hier zijn
informatie over notes staat hieronder
niets nieuws over de notes
een kleine helpende hand voor jou
De W3C-(css)validator slaat geheel op tilt van deze pagina. Natuurlijk kan ik met wat javascript de pagina feilloos laten valideren; maar wat heeft het voor zin. De browsers voeren zonder morren de code uit en in feite is het volkomen valide code. Het is niet de schuld van de websitebouwers dat elke browser(maker) zijn eigen CSS3-benamingen hanteert. Het tweede punt wat ik wil opmerken is dat voor IE er een troostprijs is. Bezoekers met deze browser krijgen (op deze pagina) wat oubollige IE-filters voorgeschoteld. Toch blijf ik hopen dat de volgende versie van IE opeens wél aan de "CSS3-party" gaat meedoen.
Zoals gewoonlijk voert safari de code op de "safari-manier" uit. Erg mooi...
En een ongelooflijke pluim heeft google's Chrome verdient. Razendsnel en bloedmooi
wordt deze pagina op jouw scherm "gekwakt". (op een snelle verbinding hebben we deze pagina
binnen de 0.08 seconde kunnen "klokken").
Ik zou bijna de pagina zélf vergeten. Deze omgebouwde "post-it-stickers", of zoals onze engelse buren het zeggen: de "sticky notes", spreken voor zich. Ik heb ze niet als "notes" gebruikt op deze pagina, maar als menu-items. Je kan ze natuurlijk voor alles en nog wat gebruiken.. De code is gering. Hieronder staat de stylesheet, en nog wat lager op de pagina staat de voorbeeld-code voor de "notes" die je in de body van jouw pagina kan zetten.
<style type="text/css">
.note{
font-size:24px}
.note,p{
font-weight:normal}
ol,li{
list-style:none}
ol{
overflow:hidden;
padding:5em}
ol li a{
font-size:12px;font-weight:bold;
text-decoration:none;
color:#000;
background:#ffd;
display:block;
height:9em;
width:9em;
padding:1em;
-moz-box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
-webkit-box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
-o-transition:-o-transform .15s linear;
-webkit-transition:-webkit-transform .15s linear;
-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-moz-transform:rotate(-6deg)}
ol li{
margin:-1.3em;
float:left}
ol li p{
font-family:"Comic Sans MS",Arial,helvetica,sans-serif;
margin:1em 0 0 0;
font-size:14px;font-style:italic}
ol li:nth-child(even) a{
-o-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
position:relative;
top:5px;
background:#dfd}
ol li:nth-child(3n) a{
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-moz-transform:rotate(7deg);
position:relative;
top:-5px;
background:#fdd}
ol li a:hover,ol li a:focus{
position:absolute;
box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
-moz-box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
-webkit-box-shadow:-1em 0.3em 0.5em rgba(99,99,99,0.2);
-webkit-transform:scale(1.25);
-moz-transform:rotate(-1deg) scale(1.25);
-o-transform: scale(1.25);
background:#fdf;color:#000;
position:relative;
z-index:5}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
ol,li{
border-left:1px solid #020}
ol li a{
font-size:12px;font-weight:bold;
text-decoration:none;
color:#000;
background:#ffd;
display:block;
height:9em;
width:9em;
padding:1em;
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=100,finishOpacity=10)}
ol li a:hover,ol li a:focus{position:absolute;
position:relative;
height:11em;
width:11em;
border-right:0px solid #020;
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99939083, M12=-0.03489950, M21=0.03489950, M22=0.99939083,sizingMethod='auto expand')progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=40,finishOpacity=100);
z-index:6;
margin-bottom:-2em;margin-right:-2em;
background:#fff;color:#000;font-weight:bold}
</style>
<![endif]-->
<ol id="positie-links">
<li><a href="#"><span class="note">home</span><p>klik hier om naar de home pagina te gaan</p></a></li>
<li><a href="#"><span class="note">index</span><p>met deze link ga je naar de indexpagina</p></a></li>
<li><a href="#"><span class="note">menu</span><p>voor het menu moet je hier zijn</p></a></li>
<li><a href="#"><span class="note">info</span><p>informatie over notes staat hieronder</p></a></li>
<li><a href="#"><span class="note">nieuws</span><p>als je nieuws wilt, koop je maar een krant</p></a></li>
<li><a href="#"><span class="note">help</span><p>een kleine helpende hand voor jou</p></a></li>
</ol>
cache 23-09-2010