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

7 comments:

  1. klasse, gefällt mir.......
    such ich schon lange für meinen blog
    http://flo-rundum.blogspot.de/
    ich finds nämlich mehr als doof bei mir......
    unter dem posttitel ist bei mir zur zeit...nix...nothing.....
    und wenn ich dann da texte sieht das blöd aus, find ich.
    wooooooo muss, oder kann ich denn den div.container reinpacken, so dass, mein postinhalt ...immer.... zwischen den beiden trennlinien erscheint?

    geht das auch?
    denn jedesmal den css-code im post neu einfügen is ja auch nicht pricklend.
    ich frag mal so, weil ich mich damit nicht so auskenne.

    freue mich von dir zu lesen.

    grüßle flo

    ReplyDelete
    Replies
    1. Hallo Flo

      Meinst du so, wie ich das bei mir gemacht habe?
      Das geht mit CSS.

      .post-body:before {
      content:"";
      height:1px;
      background:-moz-linear-gradient(left, #FFFFFF 0%,#314133 50%,#FFFFFF 100%);
      background:-webkit-linear-gradient(left, #FFFFFF 0%,#314133 50%,#FFFFFF 100%);
      background:linear-gradient(left, #FFFFFF 0%,#314133 50%,#FFFFFF 100%);
      width:100%;
      display:block;
      }

      und


      .post-footer:before{
      content:"";
      height:1px;
      background:-moz-linear-gradient(left, #FFFFFF 0%,#314133 50%,#FFFFFF 100%);
      background:-webkit-linear-gradient(left, #FFFFFF 0%,#314133 50%,#FFFFFF 100%);
      background:linear-gradient(left, #FFFFFF 0%,#314133 50%,#FFFFFF 100%);
      width:100%;
      display:block;
      }


      Sollte klappen :D

      Grüsse
      Myri

      Delete
  2. hurraaaaaaaaaaaaaaa, lach,
    man sieht das cool aus bei mir, bin hin und wech.
    klasse, haste gut gemacht und sogar ICH hab das geschafft.
    bin ja begeistert.
    schau doch mal büdde, musst du gesehen haben.
    freu mich echt drüber, ganz lieben dank an dich.

    http://flo-rundum.blogspot.de/

    grüßle flo
    einen fröhlichen start in die neue woche für dich myri

    ReplyDelete
  3. Das ist eine klasse Idee ... ich hätte nicht gedacht, dass man einem Pseudoelement überhaupt einen Gradienten geben kann ... die Linien selber sind sehr beeindruckend, habe so was noch nie zuvor 'live' in einem Blog gesehen. Ist gespeichert, mal sehen, ob ich das mal irgendwo einsetzen kann. ^^Oliver

    ReplyDelete
    Replies
    1. hihi mal was was ich nicht von Oliver gelernt habe, eine Seltenheit :D

      Ich hatt ne relativ komplizierte Version davon gesehen, aber beim Versuch mit dem pseudoelement hat's dann geklappt.

      Grüsse
      Myri

      Delete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered