[QT] Gradient Lines ✤✤

Gradient Lines

Euch sind normale horizontale Linien zu langweilig? Was das auf der Seite ausgeblendet wird, wäre viel toller?

Machen wir das doch. :)

Es gibt verschiedene Wege eine horizontale Linie zu produzieren.
Die einfachste ist über das

<hr>

-Tag.


Wenn ihr das platziert, wird eine horizontale 1px-hohe Linie angezeigt.

---

Wollen wir das diese Linie am Rand ausgeblendet wird, müssen wir das

:before

-Element des

<hr>

-Tags ansprechen.
Wir machen das mithilfe von CSS.
hr:before {
content:"";
height:1px;
background:-moz-linear-gradient(left, transparent 0%,#314133 50%,transparent 100%);
background:-webkit-linear-gradient(left, transparent 0%,#314133 50%,transparent 100%);
background:linear-gradient(left, transparent 0%,#314133 50%,transparent 100%);
width:100%;
display:block;
}

Das schaut dann so aus:

---

Okay, noch nicht ganz. Die Eigenschaften des

<hr>

-Tags sind noch zu stark. Die müssen wir also noch ausblenden. Das machen wir folgendermassen.
hr{
border-color: transparent;
}

Und ausschauen tuts dann folgendermassen:

---

So einfach geht's.
Nun aber noch eine kleine Überlegung. Was wenn ich sozusagen einen Streifen und bisschen Text haben möchte?
Lösen wir das mit folgender Form, schaut das so aus:
<hr><h2>Text</h2></hr>

---

Text

---

Der Anstand ist zu gross.
Ich könnte das mit padding reduzieren, eine einfachere Möglichkeit ist es allerdings das ganze nicht mit dem

<hr>

-Tag, sondern mit einem

<div>

-Container zu lösen.

Text

<div class="gradientline"><h2>Text</h2></div>

<style>
.gradientline{
position: relative;
height: 30px;
}
.gradientline h2{
text-align: center;
}
.gradientline:before{
content:"";
height:1px;
background:-moz-linear-gradient(left, transparent 0%,#314133 50%,transparent 100%);
background:-webkit-linear-gradient(left, transparent 0%,#314133 50%,transparent 100%);
background:linear-gradient(left, transparent 0%,#314133 50%,transparent 100%);
width:100%;
position: absolute;
top:0px;
}

.gradientline:after{
content:"";
height:1px;
background:-moz-linear-gradient(left, transparent 0%,#314133 50%,transparent 100%);
background:-webkit-linear-gradient(left, transparent 0%,#314133 50%,transparent 100%);
background:linear-gradient(left, transparent 0%,#314133 50%,transparent 100%);
width:100%;
position: absolute;
bottom: 0px;
}
</style>