Be KreaTief

[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>
edit