Farbverlauf mit/ohne Grafik

  • CSS

Es gibt 12 Antworten in diesem Thema. Der letzte Beitrag () ist von Samus Aran.

    Farbverlauf mit/ohne Grafik

    Hi,

    Ich versuche mich gerade an meiner ersten "professionellen" Webseite. Ich möchte im Header und im Footer gern einen Farbverlauf haben. Das habe ich auch hinbekommen indem ich in meiner css-Datei den/das(?) entsprechende Gradient als Background reingepackt habe. Allerdings kommen wir gerade Zweifel ob das die peste Lösung ist. Ich brauche ja für fast jede Browser Engine einen anderen CSS-Code. Außerdem unterstützen ältere Browser im schlimmsten fall CSS-Gradienten gar nicht.

    Jetzt zu meiner frage: ist es besser den Farbverlauf mit CSS zu erstellen oder sollte man lieber eine 1px Grafik mit Farbverlauf als Hintergrund nehmen ?
    Habe da leider keinen genauen plan von, was besser ist.


    Grüße

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Chrisber“ ()

    Kommt ganz auf deine Zielgruppe an, wenn du Jugendliche oder allgemein Leute mit Ahnung von Browsern ansprechen möchtest, eignen sich CSS-Gradients sehr gut. Sollen allerdings Trottel mit IE -20 auch noch unterstützt werden, dann musste ne Grafik nehmen.
    CSS. Es gibt keinen aktuellen Browser, der Gradients nicht unterstützt.
    Firefox kann das m.W. ab Version 3 (4 auf jeden Fall), Webkit kann das eh seit Ewigkeiten, Opera kanns und IE kanns seit Version 9 auch.
    Du musst nicht mal nen Grafikfallback einrichten. (Nebenbei sollte man das heutzutage ohnehin nicht mehr machen, das verschwendet nur Speicherplatz und Traffic)

    Edit: Es ist völlig egal, welche Zielgruppe du hast. Jeder(!) bekannte Browser (Firefox, Webkit, Opera, IE) kann die Grundlagen von CSS3.
    Edit 2: Nur Android hinkt bei CSS3 natürlich hinterher. Zwar nicht bei Gradients, aber bei anderen CSS3-Features: daneden.me/2011/12/putting-up-with-androids-bullshit/

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Samus Aran“ ()

    Hi,

    habes jetzt erstmal in CSS gelöst. Ist es denn wirklich deren Ernst, dass ich für jeden Browser nen anderen CSS-Code brauche ?

    Spoiler anzeigen
    So mache ich es im moment:

    HTML-Quellcode

    1. background-color:#0e2c5f; /* for the god damnit noobs */
    2. background-image: -moz-linear-gradient(90deg, #, #0e2c5f 100.0%); /* for Firefox */
    3. background-image: -webkit-linear-gradient(90deg, #0e2c5f, #15408f 100.0%); /* for Chrome */
    4. background-image: -o-linear-gradient(90deg, #0e2c5f, #15408f 100.0%); /* for Opera */
    5. background-image: -ms-linear-gradient(90deg, #0e2c5f, #15408f 100.0%); /* for IE10 */
    6. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e2c5f', endColorstr='#15408f'); /* for IE9 */
    7. background-image: linear-gradient(90deg, #0e2c5f, #15408f 100.0%); /* for CSS3 Browser */

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „viperkill“ ()

    Die Präfixe gabs nur als die Gradient Definition noch nicht geklärt war vom W3C, genauso wie die runden Ecken usw. dafür gabs dann die Präfixe die nur von den entsprechendne Browsern ausgewertet wurden, wie man sieht unterscheiden sie sich zum teil etwas, weils eben noch keine einheitliche Schreibweise gab die vorschreibt wie es auszusehen hat. Mittlerweile brauchst nur noch die letzte Zeile.
    Das mit dem Farbverlauf hab ich nun fertig. Allerdings habe ich jetzt noch eine andere Frage: Ich habe oben auf meiner Webseite ein horizontales Menü. Um zu verdeutlichen, welcher Menü-Punkt aktuell gewählt ist, also auf welcher Seite (z.B. "Home"), sich der User befindet, habe ich anstatt eines Links schonmal einen "normalen" Text genommen(<strong>). Ich möchte jetzt allerdings das ganze noch mit einem Hintergrund mit abgerundeten Ecken verschönern. Die Grafik für den Hintergrund habe ich schon fertig:



    Um nicht für jeden Menü-Eintrag ein neues Hintergrundbild mit einer anderen Breite erstellen zu müssen, habe ich das Hintergrundbild in 3 Teile aufgeteilt: Linker Rand, 1 px Grafik für die mitte(soll dann in CSS an der x-achse wiederholt werden) und noch den rechten Rand. Das Problem dabei ist, dass ich keine Ahnung habe wie ich dem <strong> sagen soll, dass es diese 32px hohe Grafik im hinter dem Text anzeigen soll.

    Das ganze soll dann später etwa so aussehen:




    Hat jemand vielleicht ein paar Tips wie ich das am besten umsetzen kann ?
    lieber eine 1px Grafik mit Farbverlauf als Hintergrund nehmen ?

    Wie willst du mit einer 1px Grafik einen Farbverlauf hinbekommen?


    Sonst CSS3 nutzen und einfach fixe Hintergrundfarbe feltlegen. Älte Browser dürfen sich halt nur mit dem begnügen.

    MFG
    mit 1px war nur die Breite gemeint, die Höhe sollte natürlich auf 32px bleiben.

    Mit CSS habe ich jetzt das Design des Hintergrunds "nach gebastelt". Allerdings benötige ich dafür einen Div und meine Navibar ist eine Horizontale unorderd list und wenn ich dann in dem entsprechedem aktiven Item einfach den text, also z.B. "Home", in den Div packe, geht der großteil meiner Formatierung flöten. Muss damit noch nen bischen rum spielen, dann wird sich das sicher einfach machen lassen.