Opvallende koppen II:

De bedoeling van deze pagina is zonder verdere toelichting wel duidelijk. Hieronder wordt uitgelegd hoe je zo'n schuine kop maakt. De code van het voorbeeld kun je downloaden om zelf mee aan de slag te gaan.

Methode

• De kop bestaat uit twee delen:
  1. De tekst met de boven- en onderlijn.
  2. De schaduw.
   
• De tekst met de boven- en de onderlijn
• De kop wordt opgebouwd in een simpele h1-tag. Deze heeft een data-attribuut genaamd data-text. De waarde van dat attribuut is gelijk aan de inhoud van de h1-tag.
• De h1-tag is omsloten door een div-tag die de kop centreert.
• De code is nu:
  <div style="text-align:center">
  <h1 data-text="Schuine Tekst">Schuine Tekst</h1>
</div>
   
• De inhoud van het attribuut data-text en de innerHTML van de h1-tag moeten aan elkaar gelijk zijn.
   
• De kop wordt verder opgemaakt met behulp van CSS. Een paar opmerkingen:
  • display:inline-block Hiermee bereik je dat de kop inline in het document wordt geplaatst (zoals in een <span>-tag), maar dat de inhoud wordt behandeld als een block (zoals in een <div>-tag).
  • text-transform:uppercase; De tekst wordt in hoofdletters gezet. Dit kun je desgewenst weglaten.
  • position: relative; De kop wordt geplaatst op de plek waar je hem definieert.
  • z-index:5; De kop 'zweeft' iets boven het document, zodat de schaduw er later onder kan worden geschoven.
    Het kan voorkomen dat je de z-index van de de h1-tag moet verhogen. Dat hangt af van de opzet van je webdocument.
  • white-space:nowrap; Tekst wordt nooit afgebroken. Alles blijft op één regel staan.
  • border-top:6px solid navy; border-bottom:6px solid navy; Hiermee worden de boven- en onderlijn gemaakt.
  • padding: 0 0 2px 0; Hiermee voeg je wat extra ruimte in tussen de tekst en de onderlijn. Neem de waarde (hier: 2px) gelijk aan de waarde van v-shadow (zie verder), om plaats te maken voor de schaduw.
  • transform: Hiermee wordt de tekst schuin gezet. Er zijn drie transform-functies:
    
    • skew(-14deg) Hiermee wordt de rechthoek waar de tekst in staat, vervormd tot een parallellogram waarvan de verticale zijden over 14° verdraaid zijn, met de klok mee.
    • rotate(-6deg) Hiermee wordt het parallellogram als blok gedraaid, over 6° tegen de klok in.
    • translateZ(0); Hiermee wordt aangegeven dat er geen vervormingen loodrecht op het scherm zijn. Met name de browsers Chrome en Opera geven hierdoor een mooier resulataat
  • Voor sommige browsers moet voor transform: een vendor-prefix worden meegegeven.
   
• De schaduw
• De schaduw is geen echte schaduw zoals die wordt besproken in het item Opvallende koppen I: Tekstschaduw. De CSS-eigenschap text-shadow wordt hier niet gebruikt.
• Voor de schaduw wordt het pseudo-element h1:after gebruikt om de tekst op te maken. Op deze manier worden de verdraaiingen van de h1-tag overgenomen.
• Een paar opmerkingen bij de CSS:
  • De tekst van de schaduw staat in het attribuut data-text van de h1-tag. Het wordt in de CSS opgenomen met content:attr(data-text);
  • position:absolute; De plaats van de schaduw is vastgelegd ten opzichte van het nulpunt (in de linker bovenhoek) van de h1-tag. De schaduw is 2px naar beneden en naar rechts geschoven: top:2px; left:2px;. Hier is de padding van 2px van de h1-tag van afgeleid.
  • z-index:-1 De z-index is één lager dan de z-index van de h1-tag. Daardoor verdwijnt de schaduw achter de tekst zelf. Alleen de randen van 2px zijn zichtbaar.
   
• De volledige CSS vind je in de downloadfile. De CSS zet je het beste in de HEAD van je document.

Downloaden:
 
Druk op de knop:  File: voorb389.zip, 608 bytes.

Inspiratie: Webdesigner Magazine 54, pag. 29.