Tartalom kezdete

Ugrás a "Nagyító-kép, képgaléria fölé"(CSS 3 pszeudo -> h3:target{border-left: 5px solid green;})

Helyi menü "contextmenu.js"-el

(Próbáld ki a helyi menüket!)

(jobb-kattintás egy menüre)

  1. Saját meghívás1
  2. Saját meghívás2
  3. Saját meghívás3



Helyi menü "popupmenu.js"-el

Minta1 (jobb-kattintás blokkon belül)

var popup1 = new PopupMenu();
popup1.add('Megnyitás új ablakban', function(target)
{ window.open(location.href); });
popup1.add('Figyelmeztető ablak', function(target)
{ alert('Ez egy felugró ablak!');
 });
popup1.addSeparator();
popup1.add('Új ablak bezárás', function(target)
{ window.close(); });
popup1.setSize(170, 0);
popup1.bind('example1'); // cél a pre blokk
/* popup1.bind(); // cél a dokumentum */
  

Minta2 (jobb-kattintás blokkon belül)

var popup2 = new PopupMenu();
popup2.add('Piros háttér', function(target)
{ target.style.background = 'red'; });
popup2.add('Kék háttér', function(target)
{ target.style.background = 'blue'; });
popup2.add('Sárga háttér', function(target)
{ target.style.background = 'yellow'; });
popup2.addSeparator();
popup2.add('Alapértelmezett háttér', function(target)
{ target.style.background = '#EEEEEE'; });
popup2.setSize(170, 0);
popup2.bind('example2'); //  cél a pre blokk
  


Tartalom folytatása

Vissza az oldal tetejére(CSS 3 pszeudo -> h3:target{border-left: 5px solid green;})
Ugrás a "CSS 3, ÚJ pszeudo osztályok"(CSS 3 pszeudo -> h3:target{border-left: 5px solid green;})

Nagyító-kép, képgaléria fölé

(CSS3 kerekített kerettel, árnyékkal, háttér színátmenettel...)
( továbbá "mouseover" opacity átmenettel és objektum tükrözéssel)

Itt a tükrözésnek kell lennie!
(Egyenlőre Chrome, Safari)
Firefox az "SVG Elements" segítségével.
(HTML Validator szerint "NOT VALID")



Objektum tükrözés kicsit másképp(2011.11.21)

(Így már Firefox-7.0, Opera-11.52, Chrome-16.0, Safari-5.1, Netscape-9.6 és IE-6,7 esetében is működik)


CSS 3, ÚJ pszeudo osztályok

Vissza az oldal tetejére(CSS 3 pszeudo -> h3:target{border-left: 5px solid green;})
Vissza az "Nagyító-kép, képgaléria fölé"(CSS 3 pszeudo -> h3:target{border-left: 5px solid green;})
Pszeudo osztály Teszt beállítás GeckoWebkit
E:first-child Ezen táblázat, minden sor 1. cella:
tbody tr td:first-child{ width:200px; font-family: monospace; color:green; }
Ezen táblázat, üres cella:
tbody tr td:empty{ background-color: red; }
1.8412
E:empty 1.8412
E:nth-child Ezen táblázat, minden sor 2. cella:
tbody tr td:nth-child(2){ width:400px; color:red; }
Ezen táblázat, minden 2. sor:
tbody tr:nth-child(2n+2){ background-color: #C4EAEA; font-weight:700; text-align: left; }
1.9.1525
E:target Horgonyok:
h3:target{ border-left: 5px solid green; }
1.3525
E:not() Minden (.fejezet) H2, amely nem (.egyedi):
.fejezet{ color: black; } .fejezet:not(.egyedi){ color: red; }
1.085
E:only-of-type A szülő elemben(td) egyedül létező kép:
.teszt img:only-of-type{ border: 4px solid green; }
1.9.1525


"E:only-of-type" Teszt



SVG-Progressbars, csak Firefox alatt
35%
55%
75%