Opvallende koppen III:

Gecentreerd met achtergrond

Op de achtergrond van de blauwe onderkop staat een streep. Op deze bladzijde wordt uitgelegd hoe je dat kunt aanpakken.
De code van het voorbeeld staat beschreven op deze pagina. Je kunt hem ook downloaden om zelf te gebruiken.

Methode

Er wordt alleen CSS gebruikt. JavaScript en/of plaatjes komen er niet aan te pas.
De kop bestaat uit twee delen:
1. De lijn op de achtergrond.
2. De tekst.
De lijn op de achtergrond
De lijn is opgenomen in een <h1>-tag.
De lijn begint en eindigt iets vanaf de tekst-marges. Daarvoor is margin:0 20px ingesteld. Dit kun je zelf aanpassen aan je eigen smaak. Je kunt het ook weglaten. Dan loopt de lijn van de linkermarge tot aan de rechtermarge.
N.B.: padding werkt hier niet.
De vrije ruimte rond de tekst wordt ingesteld bij de tekst zelf.
Om er voor te zorgen dat de tekst van de kop netjes in het midden staat, is text-align:center meegegeven.
De lijn zelf wordt gemaakt door de CSS-eigenschap linear-gradient een beetje oneigenlijk te gebruiken.
Omdat de richting van het kleurverloop bij de definitie van linear-gradient niet is opgegeven, loopt deze van boven naar beneden.
- Er wordt een 'verloop' gemaakt van de kleur, van #e4e9f6 naar #e4e9f6, van 0% tot 45% van de hoogte van de <h1>-tag. De kleur verandert dus niet!
  De kleur #e4e9f6 is paars-blauw, het is de achtergrond kleur van deze pagina.
- Vervolgens is er een 'verloop' van #009 naar #009, van 46% tot 54%. Ook deze kleur is constant. Kleur #009 is donkerblauw.
- Tenslotte is er een weer een 'verloop', van #e4e9f6 naar #e4e9f6, van 55% tot 100%.
- Op deze manier ontstaat dus een horizontale lijn.
Voor de achtergrond-kleur van de lijn kun je ook transparent gebruiken. Hier is dat niet gedaan.
De tekst
De tekst staat in een <span>-tag binnen de <h1>-tag waar de lijn in staat. Dat is nodig om het te laten werken.
De tekst wordt hier helemaal opgemaakt: Kleur, lettergrootte, regel-hoogte, enz. Je kunt hier ook een font-family opgeven. Hier is dat niet gedaan; alle letters zijn van hetzelfde font.
N.B.: Voor de achtergrond-kleur kun je in principe ook transparent gebruiken. Als je dat doet loopt de lijn echter dwars door de tekst van de kop heen. Je moet de achtergrond kleur dus expliciet benoemen.
De <span>-tag ligt bovenop de lijn. Het opgeven van een z-index is niet nodig.
De vrije ruimte voor en na de tekst wordt ingesteld met padding:0 20px

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
h1 {
background: linear-gradient(#e4e9f6 0%, #e4e9f6 45%,
#009 46%, #009 54%, #e4e9f6 55%, #e4e9f6 100%);
text-align:center; margin:0 20px
}
h1 span {
background:#e4e9f6; padding:0 20px;
font-size: 12pt; font-weight:bold; color:#009;
}
</style>

(Zet dit in de <BODY>, op de plaats waar de kop moet verschijnen).

<h1><span>Gecentreerd met achtergrond</span></h1>

Downloaden:

Druk op de knop: File: voorb390.zip, 459 bytes.

Inspiratie: Webdesigner Magazine 54, pag. 28.