CSS-Schnipsel - Fading Line - Bühne

CSS-Schnipsel - Fading Line

Lieber Besucher, herzlich willkommen bei: easy-scripting.net. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

Eike Schuderer

Anfänger

(21)

Beiträge: 55

Renommeemodifikator: 2

350

27.01.2012, 22:48

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.

Cascading Style Sheet

#footer {
border: 0;
}
 
#footer:before {
float: left;
width: 100%;
height: 1px;
content: " ";
margin: 0 0 5px 0;
 
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+ */
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+ */
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+ */
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+ */
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+ */
background: linear-gradient(left,  rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

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
1	<div class="fadingLine"></div>

Cascading Style Sheet

.fadingLine {
width: 100%;
height: 1px;
margin: 5px;
 
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+ */
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+ */
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+ */
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+ */
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+ */
background: linear-gradient(left,  rgba(255,255,255,0.01) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

»Eike Schuderer« hat folgendes Bild angehängt:

Signatur von »Eike Schuderer« 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« (27.01.2012, 22:51)

Zum Seitenanfang
0

Vincent Petritz

Multisupport

(183)

Beiträge: 2 074

Renommeemodifikator: 13

1 790

27.01.2012, 22:51

Toll, nie gewusst, da ist man direkt schlauer, danke dir für den Tipp Eike! :)

Signatur von »Vincent Petritz« Mit freundlichen Grüßen
Vincent Petritz

Administration - easy-scripting.net

mein easy-scripting Benutzerprofil
easy-scripting auf Facebook

Zum Seitenanfang
0

Nostra

Anfänger

(10)

Beiträge: 14

Renommeemodifikator: 1

230

27.01.2012, 22:52

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

Signatur von »Nostra« Mit freundlichem Gruß,
Nostra.

Zum Seitenanfang
0

Eike Schuderer

Anfänger

(21)

Beiträge: 55

Renommeemodifikator: 2

350

27.01.2012, 23:01

Zitat von »Nostra«

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.

Signatur von »Eike Schuderer« Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
KEIN PN-Support.