[CSS] CSS-Contest 2012 WIPs

[hellemon]

AW: [CSS] CSS-Contest 2012 WIPs

So ich wage mich mal an das zweite Design, mal sehen ob ich es umsetzen kann. Habe vor das die Seite nach rechts navigiert. Habe zwar noch keine Plan wie das funktionieren soll, aber wer nicht wagt der nicht gewinnt.

Hier mal ein beispiel wie das ganze am Ende aussehen soll --> http://www.psynai.com/



Gruß Helle

 

[simonpicos]

AW: [CSS] CSS-Contest 2012 WIPs

uuuh, helle, das wird hart

etwas dergleichen hatte ich ja schon in meinem 1. draft versucht, allerdings musst du bedenken, dass die seite im ie8 funzen soll..

Und so wirst du es kaum hinbekommen. Eine möglichkeit wäre die einzelnen sections um 100% rauszuschieben und dann mit :target reinzuschieben..

Ich bin gespannt, wie du es lösen willst

edit: Wo find ich nochmal das PSD-Logo??

 

[hellemon]

AW: [CSS] CSS-Contest 2012 WIPs

Wow jacky, das sieht wirklich gut aus. Ich würd vielleicht noch das "PSD" in der Überschrift durch unseren Letterschming ersetzen...

@cebito hat hier das Logo verlinkt.

uuuh, helle, das wird hart

Noch mach ich mir keine Sorgen, warten wir mal ab wie viele Frustmomente ich noch haben werde. :lol:

Persönlich glaube ich, wenn man einen weite von 10.000 Pixel angibt und die Navigationspunkt alle 2000/4000/6000/... Pixel ansteuert, das schon der ganze Trick sein könnte. Mal sehen ob meine naive Denkweise die Lösung ist. Wenn es so funktioniert, dann sollte der IE es auch fressen.

 

[cebito]

AW: [CSS] CSS-Contest 2012 WIPs

Kann man machen Helle, ich hab schon überlegt ob ich 'ne Karte mache, aber ich glaub das wird ganz schön fett kb-mäßig. Das Ding hier hab ich schon per CSS gestreckt...

 

[hellemon]

AW: [CSS] CSS-Contest 2012 WIPs

Kann man machen Helle, ich hab schon überlegt ob ich 'ne Karte mache, aber ich glaub das wird ganz schön fett kb-mäßig. Das Ding hier hab ich schon per CSS gestreckt...

Danke für das Beispiel, habe erst letztens eine Seite gesehen die ähnlich navigierte, erst 4 Punkte nach rechts und dann 4 Punkte nach unten, vielleicht finde ich den Link.

Jep hier der Link --> http://www.exit10.com/

 

[cebito]

AW: [CSS] CSS-Contest 2012 WIPs

Jep hier der Link --> http://www.exit10.com/

Da isses halt mit Flash gemacht

 

[simonpicos]

AW: [CSS] CSS-Contest 2012 WIPs

Soweit hab ich noch gar nicht gedacht, hellemon. Warum einfach, wenns auch kompliziert geht^^
Danke für den Schmetterling Den Darf ich doch sicher auch nach Herzenslust umfärben, oder?

002.php

Wie viele Beiträge gedenkst du zu machen?! :lol:

edit: @hellemon Ich hab auch vor ner Weile mal eine gesehen, die hatte die 4 Bereiche unter/nebeneineander angeordnet. Sah richtig hammer aus. war auch ganz oben bei awwwards, etc

 

[hellemon]

AW: [CSS] CSS-Contest 2012 WIPs

Da isses halt mit Flash gemacht

Da habe ich noch gar nicht nachgesehen. Weil es hier dabei war und fast alle mit CSS oder JQuery umgesetzt wurden, denke aber das es nur mit CSS auch geht, vielleicht nicht so schön was das Sliden angeht, aber es ist machbar.

edit: @hellemon Ich hab auch vor ner Weile mal eine gesehen, die hatte die 4 Bereiche unter/nebeneineander angeordnet. Sah richtig hammer aus. war auch ganz oben bei awwwards, etc

Sehr schöne Beiträge dabei, für die Inspiration sehr gut.

 

[cebito]

AW: [CSS] CSS-Contest 2012 WIPs

Kann man machen Helle

Dabei fällt mir grad ein das ich da ja nur den footer rumschiebe, ich wollt dann halt den content aus der Karte kommen lassen als overlay.
Hab ich wohl bissl Mist erzählt, mit der Seite gehts vielleicht nicht ganz so :uhm:

 

[simonpicos]

AW: [CSS] CSS-Contest 2012 WIPs

bissl Mist erzählt, mit der Seite gehts vielleicht nicht ganz so :uhm:

Doch,doch, ich glaub der helle hatte da ne ziemlich gute Idee.. Ich skizziers mal kurz

 

[vincitore]

AW: [CSS] CSS-Contest 2012 WIPs

@cebito hat hier das Logo verlinkt.



Noch mach ich mir keine Sorgen, warten wir mal ab wie viele Frustmomente ich noch haben werde. :lol:

Persönlich glaube ich, wenn man einen weite von 10.000 Pixel angibt und die Navigationspunkt alle 2000/4000/6000/... Pixel ansteuert schon der ganze Trick sein könnte. Mal sehen ob meine naive Denkweise die Lösung ist. Wenn es so funktioniert, dann sollte der IE es auch fressen.

10.000 px musst nicht unbedingt sein ^^
also ich hab bei mir left: 100%, 200% usw. gemacht , nur für den IE muss ich mir noch was überlegen glaub ich (obs im moment geht kann ich ja nicht testen ^^)

 

[simonpicos]

AW: [CSS] CSS-Contest 2012 WIPs

Ach scheibenkleister.. Du hattest doch recht, ceb.. wiur haben ja keinen wrapper, den man hin und her schieben kann..
Man kann zwar die anker auch in der vertikalen ansprechen, aber mit animieren wirds nix..

 

[vincitore]

AW: [CSS] CSS-Contest 2012 WIPs

hm wie kann ich denn das scrollen nach rechts verbieten? mir ist grad aufgefallen, dass mein overflow-x:hidden; gar nichts bringt :/

 

[simonpicos]

AW: [CSS] CSS-Contest 2012 WIPs

hm wie kann ich denn das scrollen nach rechts verbieten? mir ist grad aufgefallen, dass mein overflow-x:hidden; gar nichts bringt :/

klar, funktioniert doch alles

Du solltest aber bedenken, dass deine Seite im ie unbrauchbar ist. das rausschieben solltest du per position lösen, nicht mit transform, da der ie das nicht unterstützt

 

[vincitore]

AW: [CSS] CSS-Contest 2012 WIPs

klar, funktioniert doch alles

Du solltest aber bedenken, dass deine Seite im ie unbrauchbar ist. das rausschieben solltest du per position lösen, nicht mit transform, da der ie das nicht unterstützt

hm also ich kann bei mir teilweise noch scrollen
mit per position meinst du ne animation in der ich die position langsam hochschraube? also 0%{left:0%;} 100%{left:100%;}?

edit: wobei das ja eigentlich keinen unterschied machen sollte oder ?^^weil hab die ja auf 100 200 300 usw gelegt von daher sollte der ie einfach ohne animation hinspringen oder?

 

[simonpicos]

AW: [CSS] CSS-Contest 2012 WIPs

Also soweit cih das aus deinem Code entziffern kann (bisschen Ordnung!! ) Hast du die .inners der einzelnen sektionen um 100, 200, usw % nach links verschoben. bei klick werden die per translateX auf 0 geschoben. Ersetz in der animation das translateX doch einfach durch left.
Weil im Moment macht der ie gar nix

 

[hellemon]

AW: [CSS] CSS-Contest 2012 WIPs

Ich bleib erst mal bei meiner naiven Denkweise, in einer Stunde kann ich euch mehr erzählen.

Bis später
Helle

 

[vincitore]

AW: [CSS] CSS-Contest 2012 WIPs

Also soweit cih das aus deinem Code entziffern kann (bisschen Ordnung!! )

Ist doch ordentlich jedenfalls blick ich durch ^^

Hast du die .inners der einzelnen sektionen um 100, 200, usw % nach links verschoben. bei klick werden die per translateX auf 0 geschoben. Ersetz in der animation das translateX doch einfach durch left.
Weil im Moment macht der ie gar nix

der IE kann doch eh keine Animationen, oder?
Von daher müsste der einfach das translateX ignorieren und rüberscrollen oder?

 

[simonpicos]

AW: [CSS] CSS-Contest 2012 WIPs

Ich brauch mal ein paar schnelle Meinungen. Ich hatte grad die blitzidee meine Seite auf einem blueprint grid unterzubringen
Meint ihr das könnt was werden? Meine größten Bedenken liegen bei der Lesbarkeit bei dem dominanten bg..
Als alternative könnt ich mir noch vorstellen dass ich den content in zentriert in der Mitte mit ner breite von z.b. 80% hab, auf weißem Hintergrund (halbtransparent)

 

[cebito]

AW: [CSS] CSS-Contest 2012 WIPs

in einer Stunde kann ich euch mehr erzählen.

:uhm: *aufdieuhrgucktundmitdenfingernaufdemtischrumtrommelt* - ach ja, hab ich schon mal gehört, in Bayern gehen die Uhren halt noch ein bissl anders :lol:

@simon - ich weiß nicht ob 's an bplaced oder was auch immer liegt, beim ersten Versuch lud die Seite ewig und auch jetzt ist sie noch ziemlich lahm.