CSS3: fun with target

nitschi

miau!

Registered: Oct 2002
Location: Wien
Posts: 1739

04.11.2003 - 13:44

Verschiebbare und anklickbare Fenster nur mit HTML/CSS (und Javascript für das drag-feature

).

http://www.virtuelvis.com/gallery/c.../interface.html

Funktioniert nur mit Mozilla/Firebird bzw. Safari auf Mac.

Bearbeitet von nitschi am 04.11.2003, 14:41

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13497

04.11.2003 - 13:57

hm, geil

Jedi

PROGrAMmER

Registered: May 2002
Location: linz
Posts: 1871

04.11.2003 - 13:59

blödsinn, in Selfhtml gibts das Beispiel auch und das geht überall

nachtrag:

Zitat
without any use of Javascript.

ups...
ok, ich bin beeindruckt :eek:

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13497

04.11.2003 - 14:01

im ie 6.0 net

Jedi

PROGrAMmER

Registered: May 2002
Location: linz
Posts: 1871

04.11.2003 - 14:04

aus nitschi 1. Post ist irgendwie das "ohne JavaScript" nicht so deutlich hervor gegangen

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13497

04.11.2003 - 14:23

hm

Zitat von Jedi
aus nitschi 1. Post ist irgendwie das "ohne JavaScript" nicht so deutlich hervor gegangen

Zitat von nitschi
Verschiebbare und anklickbare Fenster nur mit HTML/CSS.

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4532

04.11.2003 - 14:27

Leute, lesen!

Das "without Javascript" bezieht sich nur auf die :target Pseudoklasse, d.h. wenn du unten auf ein Icon klickst damit das jeweilige Fenster "aktiv" wird.

Das Drag&Drop ist sehr wohl in Javascript realisiert; steht ja auch dort:

Zitat
I've made added a few lines of script that should enable you to drag the windows around to your own liking.

x3

† 18.03.2006

Registered: Jan 2003
Location: lnz/(hgb)
Posts: 1480

04.11.2003 - 14:27

beeindruckt
aber ein rand wer net schlecht
also oben und auf der seiten
denn sonst schiebt man das fenster vl ganz nach oben und man bekommts nicht mehr runter!

nitschi

miau!

Registered: Oct 2002
Location: Wien
Posts: 1739

04.11.2003 - 14:39

Zitat von Rektal
Das "without Javascript" bezieht sich nur auf die :target Pseudoklasse, d.h. wenn du unten auf ein Icon klickst damit das jeweilige Fenster "aktiv" wird.

Das Drag&Drop ist sehr wohl in Javascript realisiert; steht ja auch dort:

Das hab ich in der Tat übersehen. Mea culpa.

Oculus

void

Registered: Jun 2001
Location: schlafzimmer
Posts: 856

04.11.2003 - 15:02

schöne spielereien

aber wer braucht sowas?
erhöht net grad die usability solcher seiten

nitschi

miau!

Registered: Oct 2002
Location: Wien
Posts: 1739

04.11.2003 - 15:14

Zitat von Oculus
aber wer braucht sowas?
erhöht net grad die usability solcher seiten

Ich denke, dass diese Demonstration nicht ohne Grund mit "fun with target" betitelt wurde.

Jedi

PROGrAMmER

Registered: May 2002
Location: linz
Posts: 1871

04.11.2003 - 15:36

auf die art kann man wunderschön Tabpages simulieren

das mit dem Verschieben der Layer ist allerdings wirklich eine eher unnötige Spielerei

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4532

04.11.2003 - 16:06

Zitat von Jedi
Zitat von fabsko
evtl. a Deixbuch ?

@Jedi: Um Tabpages zu simulieren brauchst das :target nicht. Das funktioniert jetzt auch schon mit minimalen code, like

Code:

<div id="tab">
    <div id="tab-canvas">
        <a id="trigger-tab-1" href="">Tab 1</a>
        <a id="trigger-tab-2" href="">Tab 2</a>
    </div>
</div>
<div id="tab-content">
    <div id="tab-1" class="tab-content">
    </div>
    <div id="tab-2" class="tab-content">
    </div>
</div>

Vom HTML her ist nicht mehr noetig als das; mit dem richtigen CSS & Javascript kann das wie im Screenshot aussehen (bis auf die Borders; Moz-Only feature

); auf allem was nicht grad NS4-Aera ist.

tabs_40142.png (downloaded 31x)

Jedi

PROGrAMmER

Registered: May 2002
Location: linz
Posts: 1871

04.11.2003 - 16:15

Zitat von Rektal
@Jedi: Um Tabpages zu simulieren brauchst das :target nicht. Das funktioniert jetzt auch schon mit minimalen code, like
Code:
...

ich meinte eben: man kann auf die Art Tabpages ohne Javsacript machen

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4532

04.11.2003 - 16:51

nitschi miau! Registered: Oct 2002 Location: Wien Posts: 1739	04.11.2003 - 13:44 Verschiebbare und anklickbare Fenster nur mit HTML/CSS (und Javascript für das drag-feature ). http://www.virtuelvis.com/gallery/c.../interface.html Funktioniert nur mit Mozilla/Firebird bzw. Safari auf Mac. Bearbeitet von nitschi am 04.11.2003, 14:41
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13497	04.11.2003 - 13:57 hm, geil
Jedi PROGrAMmER Registered: May 2002 Location: linz Posts: 1871	04.11.2003 - 13:59 blödsinn, in Selfhtml gibts das Beispiel auch und das geht überall nachtrag: Zitat without any use of Javascript. ups... ok, ich bin beeindruckt
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13497	04.11.2003 - 14:01 im ie 6.0 net
Jedi PROGrAMmER Registered: May 2002 Location: linz Posts: 1871	04.11.2003 - 14:04 aus nitschi 1. Post ist irgendwie das "ohne JavaScript" nicht so deutlich hervor gegangen
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13497	04.11.2003 - 14:23 hm Zitat von Jedi aus nitschi 1. Post ist irgendwie das "ohne JavaScript" nicht so deutlich hervor gegangen Zitat von nitschi Verschiebbare und anklickbare Fenster nur mit HTML/CSS.
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4532	04.11.2003 - 14:27 Leute, lesen! Das "without Javascript" bezieht sich nur auf die :target Pseudoklasse, d.h. wenn du unten auf ein Icon klickst damit das jeweilige Fenster "aktiv" wird. Das Drag&Drop ist sehr wohl in Javascript realisiert; steht ja auch dort: Zitat I've made added a few lines of script that should enable you to drag the windows around to your own liking.
x3 † 18.03.2006 Registered: Jan 2003 Location: lnz/(hgb) Posts: 1480	04.11.2003 - 14:27 beeindruckt aber ein rand wer net schlecht also oben und auf der seiten denn sonst schiebt man das fenster vl ganz nach oben und man bekommts nicht mehr runter!
nitschi miau! Registered: Oct 2002 Location: Wien Posts: 1739	04.11.2003 - 14:39 Zitat von Rektal Das "without Javascript" bezieht sich nur auf die :target Pseudoklasse, d.h. wenn du unten auf ein Icon klickst damit das jeweilige Fenster "aktiv" wird. Das Drag&Drop ist sehr wohl in Javascript realisiert; steht ja auch dort: Das hab ich in der Tat übersehen. Mea culpa.
Oculus void Registered: Jun 2001 Location: schlafzimmer Posts: 856	04.11.2003 - 15:02 schöne spielereien aber wer braucht sowas? erhöht net grad die usability solcher seiten
nitschi miau! Registered: Oct 2002 Location: Wien Posts: 1739	04.11.2003 - 15:14 Zitat von Oculus aber wer braucht sowas? erhöht net grad die usability solcher seiten Ich denke, dass diese Demonstration nicht ohne Grund mit "fun with target" betitelt wurde.
Jedi PROGrAMmER Registered: May 2002 Location: linz Posts: 1871	04.11.2003 - 15:36 auf die art kann man wunderschön Tabpages simulieren das mit dem Verschieben der Layer ist allerdings wirklich eine eher unnötige Spielerei
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4532	04.11.2003 - 16:06 Zitat von Jedi Zitat von fabsko evtl. a Deixbuch ? @Jedi: Um Tabpages zu simulieren brauchst das :target nicht. Das funktioniert jetzt auch schon mit minimalen code, like Code: `<div id="tab"> <div id="tab-canvas"> <a id="trigger-tab-1" href="">Tab 1</a> <a id="trigger-tab-2" href="">Tab 2</a> </div> </div> <div id="tab-content"> <div id="tab-1" class="tab-content"> </div> <div id="tab-2" class="tab-content"> </div> </div>` Vom HTML her ist nicht mehr noetig als das; mit dem richtigen CSS & Javascript kann das wie im Screenshot aussehen (bis auf die Borders; Moz-Only feature ); auf allem was nicht grad NS4-Aera ist. tabs_40142.png (downloaded 31x)
Jedi PROGrAMmER Registered: May 2002 Location: linz Posts: 1871	04.11.2003 - 16:15 Zitat von Rektal @Jedi: Um Tabpages zu simulieren brauchst das :target nicht. Das funktioniert jetzt auch schon mit minimalen code, like Code: `...` ich meinte eben: man kann auf die Art Tabpages ohne Javsacript machen
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4532	04.11.2003 - 16:51

CSS3: fun with target

Forum Index > Software > Coding Stuff

nitschi

Spikx

Jedi

Spikx

Jedi

Spikx

Rektal

x3

nitschi

Oculus

nitschi

Jedi

Rektal

Jedi

Rektal