[CSS] CSS-Contest 2012 WIPs

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

LaFaSiLuc schrieb:
ja wie jezze? dann lass ich den rotz weg

Oder so :lol:

@stromer - kombiniert und bissl umgebaut, funktioniert wunderbar sogar im FF die figcaption musst dir jetzt neu positionieren, die brauch keine Hintergrundbilder mehr.

Code:

#gallery ul{
position:relative;
list-style:none;
margin:20px 40px 0 40px;
width:720px;
padding:0;
text-align: center;
}
#gallery ul li {
display:inline-block;
width:110px;
height:73px;
margin-right:30px;
background-size:cover;
background-position:50% 50%;
background-repeat:none;
padding:0;
opacity:0.5;
z-index:1;
box-shadow: 0px 2px 3px #090909;
}
#gallery ul li:nth-child(1) {
background-image:url(../images/rocketship.jpg);
animation: thumb 40s linear  0s infinite;
}
#gallery ul li:nth-child(2) {
background-image:url(../images/behind_the_scenes.jpg);
animation: thumb 40s linear  8s infinite;
}
#gallery ul li:nth-child(3) {
background-image:url(../images/femme_fatale.jpg);
animation: thumb 40s linear  16s infinite;
}
#gallery ul li:nth-child(4) {
background-image:url(../images/a_paper_bag_story.jpg);
animation: thumb 40s linear  24s infinite;
}
#gallery ul li:nth-child(5) {
background-image:url(../images/rocketship_music.jpg);
animation: thumb 40s linear  32s infinite;
margin-right:0;
}
#gallery ul li:hover {
opacity:1;
}
#gallery ul li figure {
margin:0;
position:absolute;
top:60px;
left:50%;
margin:0 0 0 -320px;
width:640px;
height:400px;
overflow:hidden;
opacity:0;
}
#gallery ul li:hover figure {
opacity:1;
z-index: 1000;
box-shadow: inset 0px 0px 3px #090909;
color:#046380;
}
#gallery ul li:nth-child(1) figure {
animation: versuch 40s linear  0s infinite;
}
#gallery ul li:nth-child(2) figure {
animation: versuch 40s linear  8s infinite;
}
#gallery ul li:nth-child(3) figure {
animation: versuch 40s linear  16s infinite;
}
#gallery ul li:nth-child(4) figure {
animation: versuch 40s linear  24s infinite;
}
#gallery ul li:nth-child(5) figure {
animation: versuch 40s linear  32s infinite;
}
#gallery ul:hover li,#gallery ul:hover li figure{animation:none;}

@keyframes versuch {
0%{opacity:0;}
5%{opacity:1;}
20%{opacity:1;}
25%{opacity:0;}
100%{opacity:0;}
}
@keyframes thumb {
0%{opacity:.5;}
5%{opacity:1;}
20%{opacity:1;}
25%{opacity:.5;}
100%{opacity:.5;}
}
#cc:before{
content:'';
display:block;
z-index:100;
margin:0;
position:absolute;
top:124px;
left:40px;
width:720px;
height:400px;
}
#cc {
padding:0;
margin:420px 0 0 0;
float:right;
font-family:Cuprum;
font-size:14px;
font-weight:bold;
}

Gegenstrom · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:

@stromer - kombiniert und bissl umgebaut, funktioniert wunderbar die figcaption musst dir jetzt neu positionieren, die brauch keine Hintergrundbilder mehr.

Code:

#gallery ul{
position:relative;
list-style:none;
margin:20px 40px 0 40px;
width:720px;
padding:0;
text-align: center;
}
#gallery ul li {
display:inline-block;
width:110px;
height:73px;
margin-right:30px;
background-size:cover;
background-position:50% 50%;
background-repeat:none;
padding:0;
opacity:0.5;
z-index:1;
box-shadow: 0px 2px 3px #090909;
}
#gallery ul li:nth-child(1) {
background-image:url(../images/rocketship.jpg);
animation: thumb 40s linear  0s infinite;
}
#gallery ul li:nth-child(2) {
background-image:url(../images/behind_the_scenes.jpg);
animation: thumb 40s linear  8s infinite;
}
#gallery ul li:nth-child(3) {
background-image:url(../images/femme_fatale.jpg);
animation: thumb 40s linear  16s infinite;
}
#gallery ul li:nth-child(4) {
background-image:url(../images/a_paper_bag_story.jpg);
animation: thumb 40s linear  24s infinite;
}
#gallery ul li:nth-child(5) {
background-image:url(../images/rocketship_music.jpg);
animation: thumb 40s linear  32s infinite;
margin-right:0;
}
#gallery ul li:hover {
opacity:1;
}
#gallery ul li figure {
margin:0;
position:absolute;
top:60px;
left:50%;
margin:0 0 0 -320px;
width:640px;
height:400px;
overflow:hidden;
opacity:0;
}
#gallery ul li:hover figure {
opacity:1;
z-index: 1000;
box-shadow: inset 0px 0px 3px #090909;
color:#046380;
}
#gallery ul li:nth-child(1) figure {
animation: versuch 40s linear  0s infinite;
}
#gallery ul li:nth-child(2) figure {
animation: versuch 40s linear  8s infinite;
}
#gallery ul li:nth-child(3) figure {
animation: versuch 40s linear  16s infinite;
}
#gallery ul li:nth-child(4) figure {
animation: versuch 40s linear  24s infinite;
}
#gallery ul li:nth-child(5) figure {
animation: versuch 40s linear  32s infinite;
}
#gallery ul:hover li,#gallery ul:hover li figure{animation:none;}

@keyframes versuch {
0%{opacity:0;}
5%{opacity:1;}
20%{opacity:1;}
25%{opacity:0;}
100%{opacity:0;}
}
@keyframes thumb {
0%{opacity:.5;}
5%{opacity:1;}
20%{opacity:1;}
25%{opacity:.5;}
100%{opacity:.5;}
}

du bist ein c.rack

vielen dank, ich versuch grad durchzuschauen, damit ich davon lernen kann

jackykfm · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Hab alle Verbesserungsvorschläge durchprobiert, bringen keinerlei Verbesserungen sondern nur Verschlechterungen.
Cebito, vlt. kannst du dir die CSS-Datei mal ansehen.

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Gegenstrom schrieb:
du bist ein c.rack
vielen dank, ich versuch grad durchzuschauen, damit ich davon lernen kann

Ich hab noch mal editiert, kopiers dir nochmal neu, hab noch was übers große Bild gelegt, sonst könnts nervig werden.
@jacky - CSS kann ich heut nicht mehr sehn, ich guck da morgen mal rein... Pionierehrenwort

jackykfm · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Cebito, kannst auch übermorgen reinschauen, nicht so eilig.

vincitore · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

hm bei der Stocksuche auf deviantART ist mir grad mal wieder aufgefallen, das die Chinesen einfach alles kopieren, sogar copyrightgeschützte Bilder nur um sie dann 1:1 als ihr eigenes auszugeben

@jacky, wenn ich jetzt nicht gerade mit meinem externen Bildschirm deine Seite angeschaut hätte, dann hätte ich aufm 13 zoll widescreen wohl nicht mehr viel lesen können, dein header ist schon recht wuchtig

LaFaSiLuc · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

I like chineeese *lallaallaaa*
Sach mal, Scheffe, darf man die Galerie auch ergänzen? 5 Bilder sind so... wenig

simonpicos · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

LaFaSiLuc schrieb:
I like chineeese *lallaallaaa*
Sach mal, Scheffe, darf man die Galerie auch ergänzen? 5 Bilder sind so... wenig

Mit pseudoelementen lässt sich da ja vielleicht was machen

Wie ceb einfach mal alle css's durcharbeitet und überarbeitet

Find ich sau nice von dir

Gegenstrom · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

simonpicos schrieb:
Wie ceb einfach mal alle css's durcharbeitet und überarbeitet Find ich sau nice von dir

jep er is ein gott

edit zu simon:
nein kann man nicht, oder hättest du beide galerien zusammenbekommen, ok den ansatz mit background-image hat ich ja schon, aber hätte ich wohl nie im leben alleine so hinbekommen

simonpicos · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

ok, man kanns auch übertreiben^^

(ot: irgendwie fehlt mir hier der strike-tag.. ich glaube sinus hatte das schonmal angesprochen)

edit zu gegenstrom:
keine ahnugn, hab ich mir noch nicht angeschaut

aber ich bewundere ceb echt dafür! Er ist ein CSS-Gott

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Gegenstrom schrieb:
jep er is ein gott

Wenn das jenni hört krieg ich gleich wieder Kloppe , zum Glück schaut die hier nie rein :lol:

Kommst klar stromer?

Gegenstrom · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
Kommst klar stromer?

keine probleme, is auch schon on, hab alles nach meinen wünschen verändern können wie ich es wollte, werde mich morgen im laufe des tages nochma richtig reinhauen, damit ich komplett durchsteige und noch feinheiten dran machen kann, wie z bsp das cc, opacity, hover etc
aber sonst alles wunderbar

simonpicos · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Was mir bei deinem wip aufgefallen ist: wo is'n deine navi hin??

patrick_l · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

simonpicos schrieb:
Wie ceb einfach mal alle css's durcharbeitet und überarbeitet Find ich sau nice von dir

Jep, sehe ich auch so. Jeder schraubt selber schon wie blöde dran herum und dann frickelt er es mal eben fix zurecht. Hut ab dafür

Könnte man ja glatt hier ins Forum implementieren. :lol: Wenn es nicht läuft, PN an dich

Aber echt cool das hier im Thread so viel Bewegung ist. Vermisse nur noch den ein oder anderen. z.B. Adi und den D.

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

simonpicos schrieb:
Was mir bei deinem wip aufgefallen ist: wo is'n deine navi hin??

Wenn du den stromer meinst, die is immer noch oben

Hebt sich halt nicht sonderlich ab...

DerOtto schrieb:
Könnte man ja glatt hier ins Forum implementieren.

Wenn es nicht läuft, PN an dich

Ist ja hier 'nen Contest und ich betreu euch nun mal... Kommt aber immer wieder mal vor, das solche PM eintrudeln, wenn man mal irgendwo geantwortet hat. Dann sag ich grundsätzlich: "für Privatsupport sollten wir erst mal das Finanzielle klären..."

"... sonst nur übers Forum." Die melden sich in der Regel nicht mehr, oder gehen wieder ins Forum

Nee, sowas kann schon dreist sein. Wenn ich verzweifelte Bemühungen seh und im Forum nur Grütze gepostet wird, biet ich das schon mal von mir aus an, aber nur dann helf ich per PM.

simonpicos · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

DerOtto schrieb:
Aber echt cool das es hier im Thread so viel Bewegung ist. Vermisse nur noch den ein oder anderen. z.B. Adi und den D.

Also "vermissen" tu ich niemand, weil ich jakeine ahnung hab, wer letztes ma aktiv dabei war.. allerdings is hier echt bissl leer.. wird zwar viel gepostet, aber maximal von 8 leuten..
:uhm:
Würd mich über mehr freuen, weil wieder so 32 Beiträge wären schon geil

edit: darf man eig auch wieder 2 Beiträge einreichen?

Gegenstrom · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

simonpicos schrieb:
Was mir bei deinem wip aufgefallen ist: wo is'n deine navi hin??

meinst mich?
ich sehe meine navi?
is immernoch oben woe se hingehört...

simonpicos · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Gegenstrom schrieb:
meinst mich?
ich sehe meine navi?
is immernoch oben woe se hingehört...

Jep genau dich mein Ich..
Hier mal en Screenshot:
http://www.abload.de/img/2012-02-27_2135550pkzr.jpg

Da scheint wieder der Wurm im Chrome drin zu sein.. FF isse an Ort und Stelle.. Ich mach mich mal auf Fehlersuche

patrick_l · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

simonpicos schrieb:
edit: darf man eig auch wieder 2 Beiträge einreichen?

Du fragst schon nach zwei Beiträgen, ich bin froh wenn erst einmal das eine steht :lol: Frickel noch immer in Photoshop herum. Jetzt auch nochmal bisschen was nachlesen und dann morgen wieder in / an meinem CSS schrauben.

Wäre fein wenn der ein oder andere sich noch dazu gesellen würde. Aber ist ja auch noch genügend Zeit übrig.

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

simonpicos schrieb:
Also "vermissen" tu ich niemand, weil ich jakeine ahnung hab, wer letztes ma aktiv dabei war.. allerdings is hier echt bissl leer.. wird zwar viel gepostet, aber maximal von 8 leuten..
:uhm:
Würd mich über mehr freuen, weil wieder so 32 Beiträge wären schon geil

edit: darf man eig auch wieder 2 Beiträge einreichen?

32 - 8 sind nach Adam Ries wieviel? Leg los, da hast dir was vorgenommen :lol:
Oder zu deutsch - klar doch