[CSS] CSS-Contest 2012 WIPs

[LaFaSiLuc]

hehe, ich wars nüsch

[hellemon]

Zitat von cebito

SDabei hab ich grad gemerkt, wenn ihr in der XML ein & benutzt, maskiert das bitte... & sonst gibbet 'n Haufen Warnungen ......

Mensch und ich war wieder schuld.

[renschli]

Hallo zusammen,

da hat es ja schon tolle eingereichte Beiträge!

Ich bräuchte aber mal noch eure Hilfe. Der IE9 zeigt mir die Google-Schrift nicht korrekt an (die anderen IE-Versionen habe ich noch nicht getestet) - da kommt eine ganz andere, nicht so tolle Schrift:

@import url(http://fonts.googleapis.com/css?family=Calligraffitti);

Firefox und Opera machen keine Probleme...

[cebito]

Gib mal 'nen Link zu deinem Entwurf...

[renschli]

Zitat von cebito

Gib mal 'nen Link zu deinem Entwurf...

...oh, da habe ich noch nicht wirklich einen! Werd schauen, daß ich das noch mache - aber heute wirds wohl nichts mehr werden.

So Cebito, nun habe mal gegoogelt (hätte ich gestern ja schon tun können) und habe eine Lösung gefunden - und dann auch noch von Dir verfasst. Alternative "kursive" war der Auslöser.

Nun werd ich mal schauen, dass ich meinen Beitrag im Contest hochlade und dir die DAten noch schicke...

[hellemon]

Hallo zusammen,

bin jetzt immer noch an der Gallerie dran für das zweite Design und habe es endlich alleine hin bekommen, meine letzte Frage bevor ich mit dem zweiten Design beginne ist die "figcaption" mit den Bildtexten.

http://www.thurnhofer.net/download/hellemon7/index.php

Gibt es da noch eine Möglichkeit das so anzupassen das Sie mit den Bildern ein und ausgeblendet werden, da verliere ich gerade den Faden und weiß noch nicht wie ich es umsetzen könnte.

http://www.thurnhofer.net/download/h...hmer/style.css

Denn wenn ich aus dem ganzen eine Animation mache dann läuft das nicht sauber ab, bin immer noch nicht 100% durch die Keyframes durchgestiegen.

Vielleicht hat ja jemand noch einen Tipp für mich.

Danke und Gruß
Helle

[ADcosmos]

Hi,

Zitat von hellemon

Hallo zusammen,

bin jetzt immer noch an der Gallerie dran für das zweite Design und habe es endlich alleine hin bekommen, meine letzte Frage bevor ich mit dem zweiten Design beginne ist die "figcaption" mit den Bildtexten.

http://www.thurnhofer.net/download/hellemon7/index.php

Gibt es da noch eine Möglichkeit das so anzupassen das Sie mit den Bildern ein und ausgeblendet werden, da verliere ich gerade den Faden und weiß noch nicht wie ich es umsetzen könnte.

Du könntest Deine Animation nicht dem img-Tag, sondern dem figure-Tag zuweisen:

#gallery li:nth-of-type(1) figure{
  //ani1
}

#gallery li:nth-of-type(2) figure{
  //ani2
}

usw.

Allerdings kennt IE8 nth-of-type nicht. Aber das ist ja halb so schlimm. Dann sehen die IE8-Nutzer nur ein Bild und keine 5. Das habe ich bei meiner Mac-Variante aber auch. Aber im IE8 muss ja nicht die gleiche Funktion wie bei den anderen Browservorhanden sein.

MFG ADcosmos

[cebito]

helle, du machst das ein bissl umständlich mit den 1000 @keyframe-Regeln. Da reicht eine, die kannst du zeitversetzt starten...
Bei meinem coverflow müsst ich das eigentlich so machen wie du, dann müsst ich nicht warten bis die Bilder reingelaufen sind, aber da bin ich zu faul zu.

[hellemon]

Zitat von ADcosmos

Hi,

#gallery li:nth-of-type(1) figure{
  //ani1
}

#gallery li:nth-of-type(2) figure{
  //ani2
}

usw.

Danke dir für das Code Beispiel, das mit den nth-of-type() habe ich schon in allen Variationen versucht, das Problem ist, sobald ich nth-of-type als Pseudo angebe, dann sehe ich nur noch das 5 Bild und die Animation stoppt. Wenn ich wieder das ganze mit img[...] deklariere dann ist es so wie jetzt.

Zitat von cebito

helle, du machst das ein bissl umständlich mit den 1000 @keyframe-Regeln. Da reicht eine, die kannst du zeitversetzt starten...
Bei meinem coverflow müsst ich das eigentlich so machen wie du, dann müsst ich nicht warten bis die Bilder reingelaufen sind, aber da bin ich zu faul zu.

Ich kann dir leider nicht sagen ob es Kompliziert ist oder nicht, leider habe ich das mit den Keyframes noch nicht wirklich kapiert.

Was meinst du mir Zeitversetzt? Hast du da ein Beispiel wie so was funktioniert. So viel ich jetzt verstanden habe ist jeder Keyframe für ein Bild zuständig, im Keyframe muss ich angeben was bei welcher Phase passieren soll. Nur kann ich gerade nicht nachvollziehen wie ich mit eine Regel den gleichen Effekt für alle Bilder erziele.

[cebito]

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).

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

[hellemon]

Zitat von cebito

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).

#gallery ul li:nth-child(1) img{animation:slideshow 50s linear infinite;} 
#gallery ul li:nth-child(2) img{animation:slideshow 50s linear 10s infinite;} 
#gallery ul li:nth-child(3) img{animation:slideshow 50s linear 20s infinite;} 
#gallery ul li:nth-child(4) img{animation:slideshow 50s linear 30s infinite;} 
#gallery ul li:nth-child(5) img{animation:slideshow 50s linear 40s 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.

@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]

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

[hellemon]

Zitat von cebito

Du musst die am Anfang auf opacity:0 haben, sonst geht das nicht. Schau dir mal die an http://www.cebito.de/examples/bganimation/ 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. 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
http://www.thurnhofer.net/download/hellemon7/index.php
http://www.thurnhofer.net/download/h...hmer/style.css
Danke dir cebito

So, und wie wir sehen, sehen wir nix im IE und Opera

[splatter]

Zitat von hellemon

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]

Zitat von splatter

...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 :/)

#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