nicht angemeldet
Custom Button Image
Matthias Apsel
Gunnar BittersmannHi,
ich habe einen schönen Button in Photoshop designed, den ich jetzt gerne auf meine Webseite packen möchte. Am liebsten so einfach wie möglich, ohne die Codesize großartig zu erhöhen.
Vom Prinzip erstelle ich mir drei Bilder von dem Button: ein Bild, welches den rechten Rand beinhaltet (3px breit), ein weiteres Bild, das den linken Rand beihaltet (3px breit) und ein Bild, welches den Mittelteil des Photoshopbuttons beinhaltet (1px breit).
Der Clue soll sein, dass ich alle Button meiner Webseite damit stylen kann - unabhängig von deren spezifischen Breite.
Wie kann ich jetzt per CSS alle drei Bilder richtig platzierens, so dass das gewährleistet ist?
Bis jetzt hab ich nur "background: url(../btn.png) repeat-x;" gefunden, was den Mittelteil abfrühstücken würde. Aber wie kann ich angeben, dass die letzten drei Pixel mit einem anderen Bild hinterlegt werden sollen?
Gruß
Paul
-
Om nah hoo pez nyeetz, Paul Wiegenzahl!
Wie kann ich jetzt per CSS alle drei Bilder richtig platzierens, so dass das gewährleistet ist?
Bis jetzt hab ich nur "background: url(../btn.png) repeat-x;" gefunden, was den Mittelteil abfrühstücken würde. Aber wie kann ich angeben, dass die letzten drei Pixel mit einem anderen Bild hinterlegt werden sollen?
clever wäre, nur ein Bild zu verwenden, weil es ressourcenschonender ist, ein etwas größeres Bild zu laden als drei kleinere. Du musst dann halt das Sprite geschickt füllen. Moderne Browser erlauben mehrere Hintergrundbilder für ein Element.
Matthias
--
1/z ist kein Blatt Papier.
-
@@Paul Wiegenzahl:
nuqneH
Vom Prinzip erstelle ich mir drei Bilder von dem Button:
Wie sollen denn dein Buttons aussehen, dass sie mit CSS-Hausmitteln (linear-gradient, box-shadow, text-shadow, border-radius) nicht zu realisieren wären?
ein Bild, welches den Mittelteil des Photoshopbuttons beinhaltet (1px breit).
Nicht die beste Idee; siehe diesen Thread.
Der Clue soll sein, dass ich alle Button meiner Webseite damit stylen kann - unabhängig von deren spezifischen Breite.
„Sliding Doors“ ist dein Suchbegriff. Wenn es denn wirklich Grafiken sein müssen; s.o.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
@@Paul Wiegenzahl:
nuqneH
Vom Prinzip erstelle ich mir drei Bilder von dem Button:
Wie sollen denn dein Buttons aussehen, dass sie mit CSS-Hausmitteln (linear-gradient, box-shadow, text-shadow, border-radius) nicht zu realisieren wären?
naja das Problem ist hierbei ja, dass nicht jeder Browser alles versteht. Und dann hätte ich unter Umständen erhebliche Unterschiede in der View. Zumindestens "border-radius" funktioniert im IE8 nicht.
-
@@Paul Wiegenzahl:
nuqneH
naja das Problem ist hierbei ja, dass nicht jeder Browser alles versteht. Und dann hätte ich unter Umständen erhebliche Unterschiede in der View. Zumindestens "border-radius" funktioniert im IE8 nicht.
Und was ist daran das Problem? Funktioniert die Seite im IE8 ohne runde Ecken nicht? Progressive enhancement ist dein Freund.
Farbverläufe bekommt man in alten IEs mit deren proprietärem 'filter' hin (wenn’s denn unbedingt sein muss).
Zu Farbverläufen und runden Ecken im IE9 siehe http://maddesigns.de/ie9-mit-css3-border-radius-und-linear-gradient-problemen-813.html
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
-
-