24.06.2007, 15:00
|
|||
|
|||
Einen grafischen Button in CSS nachbauen
Hallo Zusammen!
Ich hätte hier einen Button anzubieten, den ich in CSS nachbauen wollte:  Der Grund dafür ist denke ich naheliegend. Der Button taucht fast überall im Forum auf in unterschiedlichen Breiten und Sprachen und daher denke ich, dass ich einen großen Teil der Ladezeiten und die Serverlast auf Grund der Reduzierung der HTTP Requests reduzieren könnte. Alleine in der Themenansicht können theoretisch bis zu 14 verschiedene Buttons geladen werden, weshalb ich jetzt über den Einsatz von einem CSS Button nachdachte. Hier ist die Grafik etwas größer:  Klar sind die runden Ecken bei der Größe des Buttons unrelevant. Daher habe ich mal mit einem Rand gearbeitet und einem gif als Hintergrundverlauf: (links Original, rechts die beiden in CSS nachgebaut) Button Test Das Ergebnis ist schon in Ordnung in meinen Augen. Schade ist nur, dass ich keine Schriftart meiner Wahl nutzen kann, außer ich nutze Tools wie sIFR etc. Ist ein Gif als Verlaufsgrafik besser als wenn ich den Verlauf in CSS nachbauen würde wie z.B. hier aufgezeigt wurde? Vertikaler CSS-Farbverlauf Ich könnte mir gut vorstellen, dass jeder HTTP Request weniger, einen Vorteil darstellt, auch wenn der geladene Inhalt in kB identisch ist. Aber meine Erfahrung hat gezeigt, dass ein Gif in 1 Pixel Breite nur Bytes aufweist im Gegensatz zu mehreren div-Zeilen, die je nach Verlaufshöhe durchaus ein paar kB ausmachen können. 
|
| Sponsored Links |
|
24.06.2007, 15:22
|
||||
|
||||
|
Code:
<div style="border-color:#33AA01;border-color-top:#33AA00;"></div>
<div style="border-color:#33AA03;border-color-top:#33AA02;"></div>
<div style="border-color:#33AA05;border-color-top:#33AA04;"></div>
<div style="border-color:#33AA07;border-color-top:#33AA06;"></div>
<div style="border-color:#33AA09;border-color-top:#33AA08;"></div>
<div style="border-color:#33AA0B;border-color-top:#33AA0A;"></div>
<div style="border-color:#33AA0D;border-color-top:#33AA0C;"></div>
<div style="border-color:#33AA0F;border-color-top:#33AA0E;"></div>
<div style="border-color:#33AA11;border-color-top:#33AA10;"></div>
<div style="border-color:#33AA13;border-color-top:#33AA12;"></div>
<div style="border-color:#33AA15;border-color-top:#33AA14;"></div>
<div style="border-color:#33AA17;border-color-top:#33AA16;"></div>
<div style="border-color:#33AA19;border-color-top:#33AA18;"></div>
<div style="border-color:#33AA1B;border-color-top:#33AA1A;"></div>
<div style="border-color:#33AA1D;border-color-top:#33AA1C;"></div>
<div style="border-color:#33AA1F;border-color-top:#33AA1E;"></div>
<div style="border-color:#33AA21;border-color-top:#33AA20;"></div>
<div style="border-color:#33AA23;border-color-top:#33AA22;"></div>
<div style="border-color:#33AA25;border-color-top:#33AA24;"></div>
<div style="border-color:#33AA27;border-color-top:#33AA26;"></div>
<div style="border-color:#33AA29;border-color-top:#33AA28;"></div>
<div style="border-color:#33AA2B;border-color-top:#33AA2A;"></div>
<div style="border-color:#33AA2D;border-color-top:#33AA2C;"></div>
<div style="border-color:#33AA2F;border-color-top:#33AA2E;"></div>
<div style="border-color:#33AA31;border-color-top:#33AA30;"></div>
<div style="border-color:#33AA33;border-color-top:#33AA32;"></div>
<div style="border-color:#33AA35;border-color-top:#33AA34;"></div>
<div style="border-color:#33AA37;border-color-top:#33AA36;"></div>
<div style="border-color:#33AA39;border-color-top:#33AA38;"></div>
<div style="border-color:#33AA3B;border-color-top:#33AA3A;"></div>
<div style="border-color:#33AA3D;border-color-top:#33AA3C;"></div>
<div style="border-color:#33AA3F;border-color-top:#33AA3E;"></div>
<div style="border-color:#33AA41;border-color-top:#33AA40;"></div>
<div style="border-color:#33AA43;border-color-top:#33AA42;"></div>
<div style="border-color:#33AA45;border-color-top:#33AA44;"></div>
<div style="border-color:#33AA47;border-color-top:#33AA46;"></div>
<div style="border-color:#33AA49;border-color-top:#33AA48;"></div>
<div style="border-color:#33AA4B;border-color-top:#33AA4A;"></div>
<div style="border-color:#33AA4D;border-color-top:#33AA4C;"></div>
<div style="border-color:#33AA4F;border-color-top:#33AA4E;"></div>
<div style="border-color:#33AA51;border-color-top:#33AA50;"></div>
<div style="border-color:#33AA53;border-color-top:#33AA52;"></div>
<div style="border-color:#33AA55;border-color-top:#33AA54;"></div>
<div style="border-color:#33AA57;border-color-top:#33AA56;"></div>
<div style="border-color:#33AA59;border-color-top:#33AA58;"></div>
<div style="border-color:#33AA5B;border-color-top:#33AA5A;"></div>
<div style="border-color:#33AA5D;border-color-top:#33AA5C;"></div>
<div style="border-color:#33AA5F;border-color-top:#33AA5E;"></div>
<div style="border-color:#33AA61;border-color-top:#33AA60;"></div>
<div style="border-color:#33AA63;border-color-top:#33AA62;"></div>
<div style="border-color:#33AA65;border-color-top:#33AA64;"></div>
<div style="border-color:#33AA67;border-color-top:#33AA66;"></div>
<div style="border-color:#33AA69;border-color-top:#33AA68;"></div>
<div style="border-color:#33AA6B;border-color-top:#33AA6A;"></div>
<div style="border-color:#33AA6D;border-color-top:#33AA6C;"></div>
<div style="border-color:#33AA6F;border-color-top:#33AA6E;"></div>
<div style="border-color:#33AA71;border-color-top:#33AA70;"></div>
<div style="border-color:#33AA73;border-color-top:#33AA72;"></div>
<div style="border-color:#33AA75;border-color-top:#33AA74;"></div>
<div style="border-color:#33AA77;border-color-top:#33AA76;"></div>
<div style="border-color:#33AA79;border-color-top:#33AA78;"></div>
<div style="border-color:#33AA7B;border-color-top:#33AA7A;"></div>
<div style="border-color:#33AA7D;border-color-top:#33AA7C;"></div>
<div style="border-color:#33AA7F;border-color-top:#33AA7E;"></div>
<div style="border-color:#33AA81;border-color-top:#33AA80;"></div>
<div style="border-color:#33AA83;border-color-top:#33AA82;"></div>
<div style="border-color:#33AA85;border-color-top:#33AA84;"></div>
<div style="border-color:#33AA87;border-color-top:#33AA86;"></div>
<div style="border-color:#33AA89;border-color-top:#33AA88;"></div>
<div style="border-color:#33AA8B;border-color-top:#33AA8A;"></div>
<div style="border-color:#33AA8D;border-color-top:#33AA8C;"></div>
<div style="border-color:#33AA8F;border-color-top:#33AA8E;"></div>
<div style="border-color:#33AA91;border-color-top:#33AA90;"></div>
<div style="border-color:#33AA93;border-color-top:#33AA92;"></div>
<div style="border-color:#33AA95;border-color-top:#33AA94;"></div>
<div style="border-color:#33AA97;border-color-top:#33AA96;"></div>
<div style="border-color:#33AA99;border-color-top:#33AA98;"></div>
<div style="border-color:#33AA9B;border-color-top:#33AA9A;"></div>
<div style="border-color:#33AA9D;border-color-top:#33AA9C;"></div>
<div style="border-color:#33AA9F;border-color-top:#33AA9E;"></div>
<div style="border-color:#33AAA1;border-color-top:#33AAA0;"></div>
<div style="border-color:#33AAA3;border-color-top:#33AAA2;"></div>
<div style="border-color:#33AAA5;border-color-top:#33AAA4;"></div>
<div style="border-color:#33AAA7;border-color-top:#33AAA6;"></div>
<div style="border-color:#33AAA9;border-color-top:#33AAA8;"></div>
<div style="border-color:#33AAAB;border-color-top:#33AAAA;"></div>
<div style="border-color:#33AAAD;border-color-top:#33AAAC;"></div>
<div style="border-color:#33AAAF;border-color-top:#33AAAE;"></div>
<div style="border-color:#33AAB1;border-color-top:#33AAB0;"></div>
<div style="border-color:#33AAB3;border-color-top:#33AAB2;"></div>
<div style="border-color:#33AAB5;border-color-top:#33AAB4;"></div>
<div style="border-color:#33AAB7;border-color-top:#33AAB6;"></div>
<div style="border-color:#33AAB9;border-color-top:#33AAB8;"></div>
<div style="border-color:#33AABB;border-color-top:#33AABA;"></div>
<div style="border-color:#33AABD;border-color-top:#33AABC;"></div>
<div style="border-color:#33AABF;border-color-top:#33AABE;"></div>
<div style="border-color:#33AAC1;border-color-top:#33AAC0;"></div>
<div style="border-color:#33AAC3;border-color-top:#33AAC2;"></div>
<div style="border-color:#33AAC5;border-color-top:#33AAC4;"></div>
<div style="border-color:#33AAC7;border-color-top:#33AAC6;"></div>
<div style="border-color:#33AAC9;border-color-top:#33AAC8;"></div>
<div style="border-color:#33AACB;border-color-top:#33AACA;"></div>
<div style="border-color:#33AACD;border-color-top:#33AACC;"></div>
<div style="border-color:#33AACF;border-color-top:#33AACE;"></div>
<div style="border-color:#33AAD1;border-color-top:#33AAD0;"></div>
<div style="border-color:#33AAD3;border-color-top:#33AAD2;"></div>
<div style="border-color:#33AAD5;border-color-top:#33AAD4;"></div>
<div style="border-color:#33AAD7;border-color-top:#33AAD6;"></div>
<div style="border-color:#33AAD9;border-color-top:#33AAD8;"></div>
<div style="border-color:#33AADB;border-color-top:#33AADA;"></div>
<div style="border-color:#33AADD;border-color-top:#33AADC;"></div>
<div style="border-color:#33AADF;border-color-top:#33AADE;"></div>
<div style="border-color:#33AAE1;border-color-top:#33AAE0;"></div>
<div style="border-color:#33AAE3;border-color-top:#33AAE2;"></div>
<div style="border-color:#33AAE5;border-color-top:#33AAE4;"></div>
<div style="border-color:#33AAE7;border-color-top:#33AAE6;"></div>
<div style="border-color:#33AAE9;border-color-top:#33AAE8;"></div>
<div style="border-color:#33AAEB;border-color-top:#33AAEA;"></div>
<div style="border-color:#33AAED;border-color-top:#33AAEC;"></div>
<div style="border-color:#33AAEF;border-color-top:#33AAEE;"></div>
<div style="border-color:#33AAF1;border-color-top:#33AAF0;"></div>
<div style="border-color:#33AAF3;border-color-top:#33AAF2;"></div>
<div style="border-color:#33AAF5;border-color-top:#33AAF4;"></div>
<div style="border-color:#33AAF7;border-color-top:#33AAF6;"></div>
<div style="border-color:#33AAF9;border-color-top:#33AAF8;"></div>
<div style="border-color:#33AAFB;border-color-top:#33AAFA;"></div>
<div style="border-color:#33AAFD;border-color-top:#33AAFC;"></div>
<div style="border-color:#33AAFF;border-color-top:#33AAFE;"></div>
Mit 1Pixel Grafiken hat der IE Probleme. Auch der 7, daher ist es nicht zu empfehlen solche Grafiken zu verwenden, die müssen schon etwas größer sein. Natürlich kannst Du nur Schriftarten verwenden, die ein User auch installiert hat, oder Du machst die Grafiekn via PHP. Stichwort wäre hier GD Libary, was ihn meinen Augen aber nicht benutzerfreundlich ist.
|
| Sponsored Links |
|
24.06.2007, 15:30
|
||||
|
||||
|
Zitat:
Beachte beim gif, daß der Button dieselbe Hintergrundfarbe haben sollte wie das (in Deinem Falle obere) Ende des Verlaufs (siehe Textvergrößerung).
|
|
24.06.2007, 16:07
|
|||
|
|||
|
Zitat:
EDIT: Ok, habe gesehen, dass es im Firefox geht. Danke! Ich frage mich nur warum im Firefox über und unter dem Button noch Pixel frei ist?! (insbesondere die 2. Zeile betreffend) Geändert von mgutt (24.06.2007 um 16:11 Uhr)
|
|
24.06.2007, 16:09
|
||||
|
||||
|
in dem du die Schrift vergrößerst
 z.B.: Firefox: STRG + Mausrad
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ
|
|
24.06.2007, 17:00
|
|||
|
|||
|
Hi,
so ich habe es einfach mal umgesetzt: Wurzelholz Design austauschen :: Honda Forum & Tuning - MaXReV Nun habe ich beim Testen bemerkt, dass die Buttons sich nicht mit nowrap beeinflussen lassen. Wenn man nicht eingeloggt ist, sieht man "nur" die unteren Buttons. Um das nachzuvollziehen was ich meine vergrößert man einfach die Schriftgröße im Firefox. Dann sieht man, dass die Buttons in die nächste Zeile rutschen. Jemand eine Idee? Gruß
|
|
24.06.2007, 17:00
|
||||
|
||||
|
Zitat:
Übrigens ist overflow keine gute Methode zum Einschließen von Floats, lasse ul z.B. ebenfalls floaten oder siehe FAQ Punkt 2.
|
|
24.06.2007, 17:05
|
||||
|
||||
|
Zitat:
|
|
24.06.2007, 17:49
|
|||
|
|||
|
Ok, ich mache es jetzt nur noch mit DIV-Elementen. Keine Aufzählungsobjekte mehr, da ich damit nur mehr Code produziere, der in unterschiedlichen Browsern, unterschiedliche Ergebnisse liefert.
So wie es jetzt aussieht scheint es mir in Ordnung zu sein: DVD Entertainment System :: Honda Forum & Tuning - MaXReV Danke!
|
| Sponsored Links |
|
24.06.2007, 18:11
|
||||
|
||||
|
Zitat:
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Verschachteln und Erweitern von CSS? | DerJo | CSS | 4 | 25.01.2010 18:07 |
| Eigenen Button machen mit CSS | marhei | CSS | 10 | 10.07.2008 17:19 |
| Wege zum guten CSS - Ausgewählte Links | Sp33dy G0nz4l3s | Ressourcen | 1 | 27.05.2008 11:09 |
| IE6 Problem mit CSS Menü | träumer | CSS | 2 | 15.01.2007 16:55 |
| Verschiedene HTML-Tags von CSS Styles ausschliesen | Phenomenon | CSS | 2 | 11.01.2007 14:55 |
Linear-Darstellung
