CSS Runde Ecken und Gradienten Grenze

Ich bin in den Prozess des würfelnden und slicing psd-layout von einem designer. Das design basiert auf dem 960 grid system und besteht aus mehreren Boxen (ein 960px Feld für das top-Menü, 2 460px Boxen für 2 content-Bereiche, eine 220pixel und eine 720-pixel-für ein anderes content-setup-option etc). Alle diese Felder basieren auf einem soliden hintergrund-Farbe (Körper), aber Sie alle haben abgerundete Ecken und eine Grenze von ca 10pixel den ganzen Weg um die Steigung.

Ich bin Betrachtung, was wäre der beste Weg zu nehmen, hier, html klug, während man bedenkt, dass es sollte natürlich überprüfen, schön, Semantik etc.

Irgendwelche Ideen/input?

  • Ein Bild würde wahrscheinlich helfen hier. Auch haben Sie nicht wirklich gefragt, eine konkrete Frage.
  • Ich möchte nicht unhöflich sein, aber, kann man eine schnellere Antwort auf doctype.com
  • Beispiel ich bei Google gefunden: ruzee.com/blog/2006/06/.... Nur Unterschied ist, dass ich Runde Ecken, wo, wie er Welle wie oben und unten. Aber der Verlauf/drop shadow ist im wesentlichen das gleiche, und meine Bedürfnisse werden in variabler Breite. Ich denke, ich weiß eine Frage stellen, aber ich kann es wieder versuchen; Wie man am besten die Umsetzung der oben genannten Funktion.
InformationsquelleAutor cJockey | 2010-01-17
  1. 7

    Ich bin Betrachtung, was wäre der beste Weg zu nehmen, hier, html klug, während man bedenkt, dass es sollte natürlich überprüfen, schön, Semantik etc.

    Die beste route zu nehmen, wäre hier die Verwendung von reinem CSS3 zum hinzufügen von abgerundeten Ecken und Farbverläufen.

    Vorteile:

    • Keine zusätzlichen, semantisch sinnlos, beschissen markup erforderlich
    • Keine Bilder
    • Einfach zu implementieren und zu pflegen
    • Fähigkeit zu degradieren anmutig für ältere Browser, die keine Unterstützung CSS3

    Nachteils:

    • Funktioniert nicht in jedem browser noch

    Es ist wirklich bis zu Ihnen.

    Wenn Sie möchten, dass Ihre Website Aussehen genau die gleiche in jedem browser, CSS3 ist keine option — Sie müssen verlassen sich auf schwer zu pflegen, Bilder und aufgebläht markup.

    Allerdings, wenn Sie nichts dagegen haben, dass Benutzer von älteren Browsern leicht unterschiedlich, aber trotzdem schönes design, CSS3 ist definitiv der Weg zu gehen.

    'CSS3' Verläufe:

    CSS3-abgerundete Ecken:

    • Es muss voll kompatibel mit IE+,7-und 8 + FF, Chromse und Safari - so ist CSS3 nicht eine option, fürchte ich 🙁 ich war denken vielleicht mit einigen jQuery, aber nicht sicher über die Last-Effekt (die eckigen Ecken, wenn die Seite Rendern, und dann eine kurze falsh und dann die Ecken rund sind, wenn der Ladevorgang abgeschlossen ist)
    • Firefox, Chrome und Safari zeigen die abgerundeten Ecken, Opera und IE7,8 einfach nur ignorieren, dass die Regel-und Anzeige-Kästchen. Für Dinge wie abgerundete Ecken, die ich bereit bin zu nehmen, dass der trade-off. Es ist unmöglich, um Ihre Website Aussehen pixel perfekt auf allen Browsern.
    • Ich würde mit diesem Ansatz, während das ausspionieren von IE und mit Hilfe von JavaScript bieten die abgerundeten Ecken, die für IE-Benutzer. Vielleicht diese ein - methvin.com/jquery/jq-corner-demo.html
    InformationsquelleAutor Mathias Bynens
  2. 1

    This ain ' T zur Arbeit zu gehen einwandfrei in allen Web-Browsern ab IE6 und mit nur CSS. Sie müssen greifen Sie JavaScript, damit es funktioniert in allen Browsern. Es gibt jQuery - plugins, die kann Runde Ecken auf die fliege, die auf allen Web-Browsern, ohne zusätzliche Bilder oder CSS. Ich hab gute Erfahrungen mit das jQuery Corner plugin.

    InformationsquelleAutor BalusC
  3. 0

    Ich empfehlen, versucht die javascript-Bibliothek DD_roundies (http://www.dillerdesign.com/experiment/DD_roundies/). Die meisten Browser unterstützen bereits abgerundete Ecken wie angegeben in CSS3, und DD_roundies fügt die Unterstützung für Browser, die nicht (wie bei IE).

    InformationsquelleAutor JussiR
Schreibe einen Kommentar