Markdown Tutorial #5 - Trennlinien, mit eienem kleinen Trick auch farbig


MarkdownLogo.png

Hallo Steemians,

heute möchte ich euch zeigen, wie ihr eure Artikel mit farbigen Trennlinien etwas mehr individualisieren könnt.

trennlinie7.gif

Ich habe mich in den letzten Tagen immer gefragt, warum die Trennlinien hier in steemit bei allen Posts gleich aussehen. Nun habe ich ein wenig nachgeforscht und habe herausgefunden, dass es in Markdown eigentlich möglich ist, die Farbe der Trennlinien zu ändern. Doch die entsprechenden Befehle werden hier nicht unterstützt.

Wie ihr eine horizontale Linie hinbekommt, wisst ihr wahrscheinlich schon. Eine solche Linie hat wohl jeder Anfänger schon einmal versehentlich erzeugt, so wie ich auch. Doch wusste ihr, das es mindesten 4 verschiedene Möglichkeiten gibt, diese einfache Linie zu erzeugen?

trennlinie7.gif

Die folgenden vier Befehle führen alle zu dem gleichen Ergebnis

***
---
___
<hr>




trennlinie7.gif

Mit einem kleinen Trick könnt ihr diese Linien etwas aufhübschen. Dazu braucht ihr nur eine kleine Grafik erstellen. Diese fügt ihr dann statt der normalen Trennlinie einfach in eure Texte ein. Ich zeige euch nun ein paar Beispiele, was mit einfachen Mitteln möglich ist.

Als erstes nochmal die Standardlinie:


Die folgende Linie ist ein Bild das 5000 Pixel breit und 1 Pixel hoch ist:
trennlinie1.png

Nun eine Linie, die in der Mitte etwas dicker wird:
trennlinie2.png

Eine Linie mit einem Farbverlauf
trennlinie4.png

Ein anderer Farbverlauf:
trennlinie6.png

Und so kann es aussehen, wenn ihr eine animiertes GIF verwendet:
trennlinie7.gif

Aber achtet darauf, dass eure Grafiken breit genug sind, damit sie bei unterschiedlichen Bildschirmauflösungen auch immer die komplette Breite eures Artikels ausfüllen. Die obigen Linien sind alle 5000 Pixel breit und variieren nur etwas in der Höhe.



Bis zum nächsten mal
eure @Waldfee


Bitte folgt mir wenn ihr die nächsten Teile meiner Tutorialreihe sehen möchtet, oder Interesse an Makrofotografie habt.

Hier geht findet ihr die ersten Teile meiner Tutorialreihe:

Markdown Tutorial #1 - Überschriften
Markdown Tutorial #2 - Zentrierte Ausgabe
Markdown Tutorial #3 - Mehrspaltiges Design
Markdown Tutorial #4 - Mehrspaltiges Design 2

H2
H3
H4
3 columns
2 columns
1 column
30 Comments