CSS3 Buttons / simonpicos

[simonpicos]

Hallo zusammen

Heute hatte ich mal wieder richtig Lust was schönes mit CSS3 zu machen und habe mich ein paar Stündchen drangesetzt und ein paar Buttons in verschiedenen Styles gemacht. Wie gefallen sie euch?



Update: schaut doch mal alle in meinem Webshowroom: vorbei! Da gibts die Buttons und viele weitere Sachen aus CSS

Fertig sind sie aber noch nicht, da ich ein Problem habe: Beim "hovern" fahren die Buttons mittels transitions und transforms um 10 Pixel nach oben. Im Firfox klappts soweit nur die Webkit-Browser zicken seltsamerweise.. Findet jemand den Fehler? Warscheinlich habe ich mich nur irgendwo vertippt und finde den Fehler nicht, weil ich schon zu lang dran sitze :hmpf:

Ich freue mich auf euer Feedback und Hilfe

Gruß und schönen Abend noch
Simon

 

[simonpicos]

AW: CSS3 Buttons / simonpicos

Dankeschön
Und Danke auch für deinen Tipp.. Das "abheben" war mehr zu demonstartionszwecken gedacht, du hast aber Recht: Ich werd mir noch was für den active-Zustand überlegen

 

[LaFaSiLuc]

AW: CSS3 Buttons / simonpicos

ich find das hübsch, dass die buttons so schweben, aber wenn man mit der maus am unteren buttonrand klebt, zittert der button wie irre

 

[MyBad]

AW: CSS3 Buttons / simonpicos

Gefällt mir auch. Schöne Demonstration!

 

[Gelöschtes Mitglied 133165]

AW: CSS3 Buttons / simonpicos

schön gemacht, simpel aber raffiniert. Gefällt mir sehr gut

 

[simonpicos]

AW: CSS3 Buttons / simonpicos

Danke für eure Kritiken

@ Das liegt an den Transitions. Die laufen nur ab, wenn man mit der Maus auf dem Element ist. Wenn man an die Kante geht, wechselt halt dauernd der Zustand: "maus drauf - maus nicht drauf"

 

[LaFaSiLuc]

AW: CSS3 Buttons / simonpicos

Ah, danke Wieder was dazu gelernt...

 

[cebito]

AW: CSS3 Buttons / simonpicos

@ Das liegt an den Transitions. Die laufen nur ab, wenn man mit der Maus auf dem Element ist. Wenn man an die Kante geht, wechselt halt dauernd der Zustand: "maus drauf - maus nicht drauf"

Setz die Buttons in eine Liste (wo sie auch reingehören ) und nimm den li:hover... dann ruckelt auch nix mehr:



Edith sagt noch - da es eine Navigation ist, hat sie es auch noch in das semantisch richtige HTML5-nav-Element gesetzt

 

[simonpicos]

AW: CSS3 Buttons / simonpicos

Ein Dankeschön an Cebito für Tipps

Hab den Buttons mal ein "Reindrückeffekt" hinzugefügt. Dabei wird der jeweilige Button um 1 px nach unten gerückt und die blur(WTF? Was sagt man dazu auf Deutsch? )-Stärke verringert.
(Den unteren Buttons habe ich diesen Effekt nicht gegeben, weil es nicht ging, da diese schon einen äußeren Schatten durch den genähten Effekt haben.. )
Außerdem heben sich die Buttons beim hovern nur noch halb so viel

Hier die aktualisierte Version:



Schönes Wochenende
Simon

 

[LaFaSiLuc]

AW: CSS3 Buttons / simonpicos

sehr genial

 

[Lona]

AW: CSS3 Buttons / simonpicos

Mir gefällt es auch sehr gut...

 

[GoMeZ]

AW: CSS3 Buttons / simonpicos

Prima Demo!

Was mir allerdings noch auffällt, ist die nachträgliche Änderung der Strichstärke bei den Buchstaben beim Hover-Effekt. Vielleicht ist ja auch mein Rechenknecht nur zu langsam?

 

[simonpicos]

AW: CSS3 Buttons / simonpicos

Vielen lieben Dank für die positive Resonanz

Was mir allerdings noch auffällt, ist die nachträgliche Änderung der Strichstärke bei den Buchstaben beim Hover-Effekt. Vielleicht ist ja auch mein Rechenknecht nur zu langsam?

Also gewollt ist das bestimmt nicht

Tritt das bei bestimmten Buchstaben/Buttons auf? Welchen Browser nutzt du? Bei mir im aktuellen FF kann ich das Problem nicht feststellen

----
Wo wir gerade schon beim präsentieren sind Hier hab ich mal was älteres von mir rausgekramt.. auch ne riesen Menge an CSS3

http://labs.simonpicos.hostingsociety.com/
Die schönen gedrehten Nav-punkte funktionieren wie ich gerade festgestellt habe im Chrome irgendwie noch nicht.. setze ich mich morgen mal dran

Bis dahin: Schönen Abend noch
Simon

 

[cebito]

AW: CSS3 Buttons / simonpicos

@simon - schön, das du dich in deinen jungen Jahren schon damit auseinandersetzt. Warum machst du nicht ein paar Tuts zu deinen Sachen, da kannst du erklären, warum du was machst. Die meisten verstehen die Quelltexte nicht und haben deshalb vielleicht Probleme die Sachen für sich selbst anzupassen...

Ach, und schön, daß du das wunderbare Dresden als Hintergrund für deinen Ava nutzt

 

[simonpicos]

AW: CSS3 Buttons / simonpicos

@simon - schön, das du dich in deinen jungen Jahren schon damit auseinandersetzt. Warum machst du nicht ein paar Tuts zu deinen Sachen, da kannst du erklären, warum du was machst. Die meisten verstehen die Quelltexte nicht und haben deshalb vielleicht Probleme die Sachen für sich selbst anzupassen...

Mal schauen, wenn ich ein freies WE habe (oder bald sind ja auch die Weihnachtsferien ) mache ich gerne mal ein, zwei Tuts

Ach, und schön, daß du das wunderbare Dresden als Hintergrund für deinen Ava nutzt

: gut erkannt

 

[Waegi]

AW: CSS3 Buttons / simonpicos

Sehr schöne Gestaltung und auch schöne Präsentation.

Mfg Waegi

 

[hellemon]

AW: CSS3 Buttons / simonpicos

http://labs.simonpicos.hostingsociety.com/
.....

Also die rechte Navigation mit den vier Unterpunkten ist sehr gut, die hätte ich letztes Jahr gebraucht. Werde mal des öfteren Rein schauen zu dir, hast es drauf. :

Gruß Helle

 

[Gelöschtes Mitglied 486178]

AW: CSS3 Buttons / simonpicos

Großes Kompliment meinerseits - das ist fett & zwar richtig gefällt mir ausnehmend gut. Hab auch erst neulich für ne Arbeit versucht mich in CSS reinzufrickeln, kommt aber lange nicht an das ran was du hier ablieferst. Beim coden liegen bei mir die Erfolgsmomente einfach zu nah an denen, wo ich am liebsten in Tisch beißen würde

 

[simonpicos]

AW: CSS3 Buttons / simonpicos

Großes Kompliment meinerseits - das ist fett & zwar richtig gefällt mir ausnehmend gut. Hab auch erst neulich für ne Arbeit versucht mich in CSS reinzufrickeln, kommt aber lange nicht an das ran was du hier ablieferst. Beim coden liegen bei mir die Erfolgsmomente einfach zu nah an denen, wo ich am liebsten in Tisch beißen würde

Danke vielmals

@hellemon: pn..

 

[LaFaSiLuc]

AW: CSS3 Buttons / simonpicos

Kann ich die nehmen für den CSS Contest?