CSS-Schnipsel - Fading Line

  • CSS-Schnipsel - Fading Line

    Mit CSS3 ist es möglich Linien zu erstellen, welche herkömmlich mit einer Grafik umgesetzt wurden. Die Größten Vorteile dabei sind wohl das man keine Grafiken verwenden muss, sowie die Linie sich der Breite anpasst.

    In meinem Beispiel verwende ich den Footer aus dem WoltLab Burning Board 3. Natürlich kann der Verlauf beliebig verändert werden, hierbei kann ich den "Ultimate CSS Gradient Generator" von ColorZilla empfehlen, dieser generiert euch Cross-browser kompatibles CSS.

    CSS-Quellcode

    1. #footer {
    2. border: 0;
    3. }
    5. #footer:before {
    6. float: left;
    7. width: 100%;
    8. height: 1px;
    9. content: " ";
    10. margin: 0 0 5px 0;
    12. background: -moz-linear-gradient(left, rgba(255,255,255,0.01) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    13. background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.01)), color-stop(50%,rgba(0,0,0,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    14. background: -webkit-linear-gradient(left, rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    15. background: -o-linear-gradient(left, rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    16. background: -ms-linear-gradient(left, rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
    17. background: linear-gradient(left, rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* W3C */
    18. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    19. }
    Alles anzeigen


    Hier noch der allgemeine Code, zur Verwendung an jeder beliebigen stelle, man kann natürlich auch einen div verwenden (normalerweise würde man <hr /> nutzen).

    HTML-Quellcode

    1. <div class="fadingLine"></div>


    CSS-Quellcode

    1. .fadingLine {
    2. width: 100%;
    3. height: 1px;
    4. margin: 5px;
    6. background: -moz-linear-gradient(left, rgba(255,255,255,0.01) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    7. background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.01)), color-stop(50%,rgba(0,0,0,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    8. background: -webkit-linear-gradient(left, rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    9. background: -o-linear-gradient(left, rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    10. background: -ms-linear-gradient(left, rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
    11. background: linear-gradient(left, rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* W3C */
    12. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    13. }
    Alles anzeigen
    Bilder

    • fadingLine.jpg

      36,16 kB, 970×75, 211 mal angesehen
    Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
    KEIN PN-Support.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Eike Schuderer ()

  • Nostra schrieb:

    Hab ich auch noch nie so gesehen, die meisten werden trotzdem eher Grafiken nutzen da dennen das zu schwer ist.

    Mit dem Generator ist das recht einfach, Verläufe erstellen ähnlich wie mit Photoshop. CSS3 ist allerdings noch am kommen, was nicht zuletzt an der Browserunterstützung und den vielen IE 5 - 8 Nutzern liegt. Für den IE 5.5 könnte man allerdings an oberster Stelle ein background: black; (oder jede andere Farbe) benutzen, da dieser Verläufe gar nicht unterstützt.
    Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
    KEIN PN-Support.