PS button code !

[monsterbeatz]

Guten Abend Leute,

Ganz kurz zu mir, bin leidenschaftlicher Grafiker, erstelle gerne mit Photoshop Wallpapers , buttons , flyers usw. .
Ich möchte aber jetzt eine eigene Hompage erstellen nur bin ich Anfänger in Sachen HTML/CSS js ... .

Ich suche bereits seit mehreren Std. nach einer Lösung nur komme ich net weiter :/

Ich möchte meine selbst erstellen PS Buttons im Browser einfügen.
Nur kriege ich leider keine genauen Beschreibungen ,man kann ja heute alles mit CSS machen nur so ein Button wie ich habe kann man mit Hilfe von CSS net erstellen, bin ich der Meinung :S .

Button 1 nicht angeklickt:
http://www.fotos-hochladen.net/uploads/1dbnalmryw7.png
Button 2 angeklickt :
http://img5.fotos-hochladen.net/uploads/2p9ywunzmiq.png

Könntet ihr mir da mal weiterhelfen ?
Tutorials @ YT habe ich auch schon einige gesehen, nur die machen vieles mit CSS.

Mfg monster

 

[Rossie]

Tutorials @ YT habe ich auch schon einige gesehen, nur die machen vieles mit CSS.

Natürlich, das ist nun mal die beste Möglichkeit. Auch wenn man Grafiken verwenden möchte. Hierfür gibt es das Background-Attribut. Mittels Pseudo-Klassen kann man unterschiedliche Bilder für die verschiedenen Zustände zuweisen.

 

[monsterbeatz]

DAnke für deine Antwort, allerdings hast du mir da nicht weitergeholfen :S , ich möchte ungern mit CSS ein Button erstellen.
Hat vlt. jemand einen link von euch wie man das macht ? Oder benötigt man da vlt. selbst HTML Kenntnisse ?

 

[Daaron]

Grafik-Buttons sind SCHEISSE. Was ist, wenn du da mal was reinschreiben willst, was etwas zu lang für den Button ist?

Das Ding dürfte mit CSS gar nicht SO schwer zu sein...
1.) außen n Container, der per border-radius und drop-shadow die abgerundeten Ecken sowie den Schlagschatten erzeugt. Außerdem bekommt der Container noch die kleinen Leuchtpunkte als sich horizontal wiederholender Hintergrund.
2.) da rein kommt noch ein Container für den purpurnen Querbalken.
3.) Weil der Button so nervig komplex und kunterbunt ist, muss jetzt noch ein Container rein, der beim aktiven Button innen dieses weiße Leuchten erzeugt, wieder über border-radius und drop-shadow

Besser wäre: Abreißen, neu bauen. Halte den ganzen Kram schlicht und elegant. Der Entwurf wirkt arg überladen. Wenn die restliche Seite genauso überladen und kunterbunt ist, dann wird die pures Augengrusel mit abartigen Ladezeiten.
Das passiert halt, wenn ein Grafiker ohne Web-Erfahrung das erste Mal etwas für ne Webseite baut. Dagegen hilft nur praktische Erfahrung, Kritikfähigkeit und natürlich, sich viele andere gut gemachte Seiten anzugucken.

 

[monsterbeatz]

Danke für deine Antwort. Hast aufjedenfall recht, habe allerdings schon mit ps eine komplette Seite erstellt und Sie sieht nicht zu überladen aus.
Du hast ja es genau erkleart wie man soein Button mit CSS erstellt Gibt es vlt einen Link für soeinen Button generater like this - http://css-tricks.com/examples/ButtonMaker/# ? Damit kriegt man es ja net hin wie du schon beschrieben hast ^^

 

[Daaron]

Nein, dein Knopf ist viel zu komplex um aus so nem Generator zu kommen. Aber was du machen musst habe ich ja beschrieben. Jetzt musst du dich nur mal für ein paar Monate auf den Arsch setzen und dir das grundlegende Handwerkszeug hinsichtlich HTML5 und CSS3 aneignen.

 

[Yuuri]

Nur kriege ich leider keine genauen Beschreibungen ,man kann ja heute alles mit CSS machen nur so ein Button wie ich habe kann man mit Hilfe von CSS net erstellen, bin ich der Meinung :S .

Pi mal Daumen hingekleckst: http://jsfiddle.net/qqhbj415/2/ sogar mit netter Animation. Möglich ist (fast) alles. Sinnvoll? Naja... Mit <a class="button"> o.ä. bekommst du es zumindest nur über eine Hintergrundgrafik hin. Davon würde ich aber die Finger lassen, denn je nach Größe und Textinhalt, ist ne fixe Grafik absolut fehl am Platz. Dann kommen wir schnell wieder zu Tabellenlayouts, damit der Container und die Grafik mitwachsen kann.

 

[monsterbeatz]

OMMMMMFG du bist mir ja einer... nice skill 1a !

 

[Rossie]

DAnke für deine Antwort, allerdings hast du mir da nicht weitergeholfen :S , ich möchte ungern mit CSS ein Button erstellen.

Du würdest so nicht den Button komplett mit CSS erstellen, sondern CSS verwenden, um Deine PS-Grafiken einem HTML-Element (z.B. <button>) zuzuweisen. Ich würde zwar wie die Profis hier auch davon abraten, aber wenn man unbedingt mit Grafiken hantieren möchte, dann so.