Lijnen

De voorbeelden gaan uit van een HTML-pagina met Enter wordt een nieuwe regel en Alles in het midden uit. Staan die aan (zo begint een nieuwe pagina), dan wordt elke Enter in je code een witregel en staat alles in het midden. Zet ze uit in de editor als je een voorbeeld plakt.

Een lijn geeft rust tussen twee stukken tekst. De makkelijkste is <hr>: die heeft geen eindtag nodig. Wil je iets vrolijkers, dan pak je een lijn uit de galerij.

Een gewone lijn

<hr> trekt een lijn over de hele breedte. Met width maak je hem korter; hij staat dan vanzelf in het midden. De oude attributen werken ook: size is de dikte, color de kleur en noshade maakt hem vol in plaats van met een randje.

Boven de lijn
<hr>
Tussen de lijnen
<hr width="50%" size="4" color="#e0338a" noshade>
Onder de lijn

Kleur, dikte en stijl met style

Met CSS heb je meer keus. Zet eerst de gewone rand uit met border: 0 en teken dan alleen een bovenrand. Die bestaat uit drie delen: de dikte, de stijl en de kleur.

solid is een doorgetrokken lijn, dashed een streepjeslijn en dotted een stippellijn.
double is een dubbele lijn. Die heeft minstens 3 pixels nodig, anders zie je maar één streep.

<hr style="border: 0; border-top: 2px solid #1c7ed6">
<hr style="border: 0; border-top: 3px dashed #e0338a">
<hr style="border: 0; border-top: 4px dotted #2b8a3e">
<hr style="border: 0; border-top: 6px double #7048e8; width: 60%">

Een lijn uit de galerij als plaatje

In de galerij staan lijnen van toen: hartjes, sterretjes, bloemetjes, golfjes, regenboogstippels en pijltjes. Klik er op "Kopieer code" en plak de code in je pagina. Of kies in de editor de knop "Galerij": dan komt de code meteen op de plek van je cursor. Zet hem tussen <center> en </center> als je hem in het midden wilt.

De sterretjes bewegen. Heeft een bezoeker "minder beweging" aanstaan op zijn telefoon of computer, dan ziet hij ze stilstaan.

Een lijn over de hele breedte

Een plaatje is zo breed als het is. Wil je de lijn over de hele breedte, maak dan een <hr> met de lijn als achtergrond. Zo werkt het:

border: 0 haalt de gewone lijn weg;
height is de hoogte van het plaatje: 12 pixels voor de hartjes, 10 voor de bloemetjes, 8 voor de golfjes;
repeat-x herhaalt het plaatje naar rechts tot de lijn vol is.

<hr style="height: 12px; border: 0; background: url(/assets/profielhulp/lijnen/hartjes.png) repeat-x">
<hr style="height: 10px; border: 0; background: url(/assets/profielhulp/lijnen/bloemetjes.png) repeat-x">

Strakke lijnen in negen kleuren

Liever iets rustigs? Onder "Strak" in de galerij staan dunne lijnen: een golf, punt en streep, een ruit in het midden en een dubbele lijn. Ze zijn er in negen kleuren, en de kleur staat in de naam van het plaatje: golf-blauw.svg, ruit-roze.svg. Kies in de galerij eerst een kleur en kopieer dan de code.

<hr style="height: 12px; border: 0; background: url(/assets/profielhulp/strak/lijnen/golf-blauw.svg) repeat-x">
<center><img src="/assets/profielhulp/strak/lijnen/ruit-roze.svg" alt=""></center>
<img src="/assets/profielhulp/strak/lijnen/punt-en-streep-groen.svg" alt="">

Deze lijnen blijven scherp, ook op een telefoon die alles groter tekent.