"We are back" « oc.at

CSS3: fun with target

nitschi 04.11.2003 - 13:44 1825 15 Thread rating
Posts

nitschi

miau!
Avatar
Registered: Oct 2002
Location: Wien
Posts: 1739
:eek: 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
Avatar
Registered: Jan 2002
Location: Scotland
Posts: 13497
hm, geil

Jedi

PROGrAMmER
Avatar
Registered: May 2002
Location: linz
Posts: 1871
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
Avatar
Registered: Jan 2002
Location: Scotland
Posts: 13497
im ie 6.0 net

Jedi

PROGrAMmER
Avatar
Registered: May 2002
Location: linz
Posts: 1871
aus nitschi 1. Post ist irgendwie das "ohne JavaScript" nicht so deutlich hervor gegangen ;)

Spikx

My Little Pwny
Avatar
Registered: Jan 2002
Location: Scotland
Posts: 13497
hm
Zitat von Jedi
aus nitschi 1. Post ist irgendwie das "ohne JavaScript" nicht so deutlich hervor gegangen ;)
Zitat von nitschi
:eek: Verschiebbare und anklickbare Fenster nur mit HTML/CSS.
;)

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4532
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
Avatar
Registered: Jan 2003
Location: lnz/(hgb)
Posts: 1480
:eek:
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!
Avatar
Registered: Oct 2002
Location: Wien
Posts: 1739
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
Avatar
Registered: Jun 2001
Location: schlafzimmer
Posts: 856
schöne spielereien

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

nitschi

miau!
Avatar
Registered: Oct 2002
Location: Wien
Posts: 1739
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
Avatar
Registered: May 2002
Location: linz
Posts: 1871
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
Zitat von Jedi
Zitat von fabsko
evtl. a Deixbuch :D ?
@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
Avatar
Registered: May 2002
Location: linz
Posts: 1871
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
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz