[CSS] CSS-Contest 2012 WIPs

hellemon · 29.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
Schau dir mal das coverflow an, da mach ich genau das... alle haben dieselbe animation, nur eben zeitversetzt gestartet (rot). Der erste startet sofort (keine Zeitangabe).

Code:

#gallery ul li:nth-child(1) img{animation:slideshow 50s linear infinite;} #gallery ul li:nth-child(2) img{animation:slideshow 50s linear [COLOR=Red]10s[/COLOR] infinite;} #gallery ul li:nth-child(3) img{animation:slideshow 50s linear [COLOR=Red]20s[/COLOR] infinite;} #gallery ul li:nth-child(4) img{animation:slideshow 50s linear [COLOR=Red]30s[/COLOR] infinite;} #gallery ul li:nth-child(5) img{animation:slideshow 50s linear [COLOR=Red]40s[/COLOR] infinite;}

Ich habe mir schon deine CSS Datei angesehen und habe es auch mal versucht mit den 10s, 20s, 30s aber anscheinend hat das mit meiner Kombination von Keyframes nicht funktioniert.

Mir geht es eigentlich um den Effekt des überblenden's, reicht dann z.B. so eine Regel für alle Bilder? Oder bin ich da auf den falschen Weg.

Code:

@keyframes slideshow{     
0%{opacity:1;}     
16%{opacity:0;}     
50%{opacity:0.5;}     
70%{opacity:1;}     
100%{opacity:0;
}

Das ist noch ein großes Rätsel für mich, habe auch noch nichts hilfreiches darüber gelesen wann, wie, wo, welche Prozent Zahl eingesetzt wird um einen bestimmten Effekt zu erzielen. Daher frage ich gerade so dumm!

cebito · 29.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

Du musst die am Anfang auf opacity:0 haben, sonst geht das nicht. Schau dir mal die an macht genau das, was du suchst. Die Prozente errechnen sich halt aus der Zahl der Bilder + ein bissl Überschneidung beim ein- bzw. ausblenden...

hellemon · 29.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
Du musst die am Anfang auf opacity:0 haben, sonst geht das nicht. Schau dir mal die an macht genau das, was du suchst. Die Prozente errechnen sich halt aus der Zahl der Bilder + ein bissl Überschneidung beim ein- bzw. ausblenden...

So jetzt hat du es mir wieder gegeben, gell. :lol: Danke dir für die links, werde ich dann heute Abend oder heute Nachmittag nochmal anpassen. Und dann langsam loslegen mit dem zweiten Design.

Gruß Helle

EDIT: Es geschehen noch Wunder, habe es jetzt doch noch hin bekommen --> Es ist alles wieder nur geklaut - ähhäja

Danke dir cebito

So, und wie wir sehen, sehen wir nix im IE und Opera :'(

splatter · 29.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

hellemon schrieb:
So, und wie wir sehen, sehen wir nix im IE und Opera :'(

...sieht gut aus, musste allerdings auch erst meinen firefox starten,
in Chrome Fehlanzeige!
Das ist doch zum Mäuse melken, oder!?

gruß
splatter

vincitore · 29.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

splatter schrieb:
...sieht gut aus, musste allerdings auch erst meinen firefox starten,
in Chrome Fehlanzeige!
Das ist doch zum Mäuse melken, oder!?

gruß
splatter

also safari und chrome sind da noch bisschen penibel was die Syntax angeht, so funktioniert es bei mir (könnt evtl. prefixfreescript liegen :/)

Code:

#gallery ul li:nth-child(1) img {animation: picture 50s linear infinite;}
#gallery ul li:nth-child(2) img {animation: picture 50s ease-in-out 10s infinite;}
#gallery ul li:nth-child(3) img {animation: picture 50s ease-in-out 20s infinite;}
#gallery ul li:nth-child(4) img {animation: picture 50s ease-in-out 30s infinite;}
#gallery ul li:nth-child(5) img {animation: picture 50s ease-in-out 40s infinite;}
#gallery ul li:nth-child(1) figcaption {animation: text 50s linear infinite;}
#gallery ul li:nth-child(2) figcaption {animation: text 50s ease-in-out 10s infinite;}
#gallery ul li:nth-child(3) figcaption {animation: text 50s ease-in-out 20s infinite;}
#gallery ul li:nth-child(4) figcaption {animation: text 50s ease-in-out 30s infinite;}
#gallery ul li:nth-child(5) figcaption {animation: text 50s ease-in-out 40s infinite;}

@keyframes picture{
	0%{opacity:0;}
	8%{opacity:1;}
	17%{opacity:1;}
	25%{opacity:0;}
	100%{opacity:0;}
}

@keyframes text{
	0%{opacity:0;}
	8%{opacity:1;}
	17%{opacity:1;}
	25%{opacity:0;}
	100%{opacity:0;}
}

hab eigentlich nur die prefixsachen rausgekürzt

cebito · 29.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

splatter schrieb:
in Chrome Fehlanzeige!
Das ist doch zum Mäuse melken, oder!?

... manchmal schon, aber bei mir funzt dat im Chrome ausgezeichnet

Edith sagt noch - @ schickst du mir dein Zeugs auch noch zu? Die Vorschaubilder hast ja schon 2 Tage im Votingmodul drin...

hellemon · 29.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

splatter schrieb:
...sieht gut aus, musste allerdings auch erst meinen firefox starten,
in Chrome Fehlanzeige!
Das ist doch zum Mäuse melken, oder!?

Wie war, wie war, derzeit läuft es bei mir nur im FF, alle anderen vier Browser, Fehlanzeige, keine Slidshow. :hmpf:

vincitore schrieb:
also safari und chrome sind da noch bisschen penibel was die Syntax angeht, so funktioniert es bei mir (könnt evtl. prefixfreescript liegen :/)

....

hab eigentlich nur die prefixsachen rausgekürzt

Danke fürs anpassen, habe extra die Prefix sachen wieder rein geschrieben um vielleicht ein besseres Ergebnis zu erzielen, weder mit Prefixe noch ohne zeigt mir Chrome und Safari eine Galerie an. Echt der Hammer.
Ich persönlich glaube das es an den nth-child liegt, hier haben alle Browser ein Problem.
Für den IE gibt es sogar ein Fallback Script --> http://selectivizr.com/
Werde das morgen noch mal mit dem direkten ansprechen versuchen obwohl ich auch hier wenig Hoffnung habe.

Ich würde das auswechseln

Code:

#gallery ul li:nth-child(1) img {animation: picture 50s linear infinite;}

Mit dem

Code:

#gallery ul li img[src=""] {animation: picture 50s linear infinite;}

Mal sehen ob es funktioniert.

Gruß Helle

EDIT: Habe den Fehler gefunden, es liegt an dem opacity: 0, dieser Tag verhindert das im Notfall ein Background Image als Fallback angezeigt wird. Setzt man das auf 1 sieht man zwar ein Bild, aber dann läuft die Animation nicht mehr. :rolleyes:

Code:

#gallery ul li img {
  ...
  opacity: 0;
}

vincitore · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

hellemon schrieb:
Wie war, wie war, derzeit läuft es bei mir nur im FF, alle anderen vier Browser, Fehlanzeige, keine Slidshow. :hmpf:

Danke fürs anpassen, habe extra die Prefix sachen wieder rein geschrieben um vielleicht ein besseres Ergebnis zu erzielen, weder mit Prefixe noch ohne zeigt mir Chrome und Safari eine Galerie an. Echt der Hammer.
Ich persönlich glaube das es an den nth-child liegt, hier haben alle Browser ein Problem.
Für den IE gibt es sogar ein Fallback Script --> http://selectivizr.com/
Werde das morgen noch mal mit dem direkten ansprechen versuchen obwohl ich auch hier wenig Hoffnung habe.

Ich würde das auswechseln

Code:

#gallery ul li:nth-child(1) img {animation: picture 50s linear infinite;}

Mit dem

Code:

#gallery ul li img[src=""] {animation: picture 50s linear infinite;}

Mal sehen ob es funktioniert.

Gruß Helle

EDIT: Habe den Fehler gefunden, es liegt an dem opacity: 0, dieser Tag verhindert das im Notfall ein Background Image als Fallback angezeigt wird. Setzt man das auf 1 sieht man zwar ein Bild, aber dann läuft die Animation nicht mehr.

Code:

#gallery ul li img { ... opacity: 0; }

also bei mir hat es mit der Verbesserung von mir im safari funktioniert ?:/
wie gesagt hab nur die prefix rausgeschmissen und bei den keyframes die Semikolon gesetzt und das leerzeichen nach dem animationsnamen weggemacht :/

Also am nth-child dürfts eigentlich nicht hängen

@renschli: bei dir funktioniert keins der Bilder!

cebito · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

vincitore schrieb:
@renschli: bei dir funktioniert keins der Bilder!

War mir gar nicht aufgefallen, er hatte die Pfade immer ../ angegeben. Hab das mal korrigiert

hellemon · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

vincitore schrieb:
also bei mir hat es mit der Verbesserung von mir im safari funktioniert ?:/
wie gesagt hab nur die prefix rausgeschmissen und bei den keyframes die Semikolon gesetzt und das leerzeichen nach dem animationsnamen weggemacht :/
Also am nth-child dürfts eigentlich nicht hängen

Du hast recht, habe jetzt noch folgende Browser getestet.

Bei denen funktioniert es
Safari 5.1.5 (7534.55.3)
Opera 12.00 alpha (1351)
Google Chrome 18.0.1025.142
Firefox 11.0
IE 10

Bei denen nicht (mehr habe ich nicht mehr installiert)
IE 9.0.8112.16421
Opera 11.62

Gruß Helle

LaFaSiLuc · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

ich hab noch das problem, dass bei Verkleinern des Bildschirms die sidebar aus dem inneren rausrutscht nach rechts und das sieht schnodder aus...

simonpicos · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

Ich glaube das wurde hier schonmal gefragt, aber ich habs jetzt nicht gefunden..

Wenn man auf einen meiner Navipunkte klickt, gelangt man immer zum richtigen Anker. Allerdings liegt der meistens unter der gefixten Navigation. d.h. die aufgerufene Sektion ist nur teilweise zu sehen.

Wie kann ich das beheben? Danke schonmal

↑ das ist übrigens ein neuer entwurf

cebito · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

padding-top

simonpicos · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
padding-top

hmm.. interessant.. das war jetzt soooo schwer, da wär ich niemlas draufgekommen. damn it :lol:

vincitore · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

hellemon schrieb:
Du hast recht, habe jetzt noch folgende Browser getestet.

Bei denen funktioniert es
Safari 5.1.5 (7534.55.3)
Opera 12.00 alpha (1351)
Google Chrome 18.0.1025.142
Firefox 11.0
IE 10

Bei denen nicht (mehr habe ich nicht mehr installiert)
IE 9.0.8112.16421
Opera 11.62

Gruß Helle

IE9 und Opera11 können noch keine Keyframes

renschli · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
War mir gar nicht aufgefallen, er hatte die Pfade immer ../ angegeben. Hab das mal korrigiert

Danke fürs korrigieren - dann sollte ich also die Punkte weglassen?

Bei "wähle ein Design" zeigts bei mir und ADcosmos nicht alle Teilnehmer an.

cebito · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

Mit ../ wechselst du ja ein Verzeichnis höher, die CSS befindet sich aber im selben Verzeichnis wie der Bilderordner.

renschli schrieb:
Bei "wähle ein Design" zeigts bei mir und ADcosmos nicht alle Teilnehmer an.

Klick mal vorherige Designs, das hab ich genau deshalb gemacht, damit eben nicht so eine ellenlange Liste das Design sprengt wie im letzten Jahr bei einigen...

renschli · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
Klick mal vorherige Designs, das hab ich genau deshalb gemacht, damit eben nicht so eine ellenlange Liste das Design sprengt wie im letzten Jahr bei einigen...

Naja, ich finde, daß sollte halt jeder bei seinem Design berücksichtigen, das die Liste auch länger werden kann. Ich habe das jetzt z.B (auch letztes Jahr) extra aus diesem Grund an den Rand ausgelagert mit entsprechend Platz nach unten...

LaFaSiLuc · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

Ich Gestörte hab mich noch an ein zweites Design gewagt o_O

Was meint ihr dazu? Bis auf CSS Nerd hab ich alles bearbeitet. Macht das Sinn?
www.lafasiluc.de/contest

simonpicos · 30.03.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
padding-top

Öhm, doch net so easy.. Wenn cih den einzelnen dingern ein padding gebe haben die ja nach oben luft. (also innerhalb der sektion) ich will aber dass die einzelnen sektionen direkt untereinander liegen..

Oder stell ich mich grad soo blöd an?