CSS-pijlpunten

In fotoalbum zie je vaak pijlpunten die naar links of naar rechts wijzen, om aan te geven dat er nog meer te zien is, zoals te zien is in het item Fotogalerij III: Carrousel.
In dit verhaal gaat het specifiek om deze knoppen:

❮ en ❯

Inspiratie voor dit item is ontstaan door diverse websites die dit hebben. Voor dit item is gebruik gemaakt van code die ik heb gevonden op w3schools.com.

Om deze pijlpunten te maken zijn meerdere benaderingen mogelijk:

• Gebruik de tekens voor 'kleiner dan' en 'groter dan', (< en >) die op je toetsenbord staan. Dit geeft helaas niet altijd even fraaie resultaten.
• Gebruik tekens uit de UTF-karakterset, zoals:
  &#10094; en &#10095;, (❮ en ❯) of:
  &#10096; en &#10097;, (❰ en ❱).
  Door de iets hogere karakters ziet de pijlpunt er wat "platter" uit, dat oogt fraaier.
• Gebruik een icons-font, zoals glyphicons-halflings. Dit font kon vroeger als standaard-component worden toegevoegd aan het platform Bootstrap 3. Gebruik buiten het Bootstrap-platform is lastig, maar kan wel.
  Vergelijkbare fonts zijn ook te downloaden vanaf o.a. FontAwesome.com.
• Gebruik een plaatje in .svg-formaat. Dat werkt goed maar is omslachtig in het gebruik.
• Gebruik een plaatje in .png-formaat. Dat kan goed werken, maar geeft soms problemen als er wordt ingezoomd.
• Maak de pijlpunten met CSS. Dat is waar het in dit verhaal om gaat.

Pijlpunten maken met CSS
De aanpak is eenvoudig:

• Maak een class en noem die pijlpunt.
• Geeft de class een border-top en een border-right. Stel border-width in.
• Zet padding en border-radius die gelijk zijn aan de border-width.
• Draai dit 135° voor een pijlpunt naar links, -45° voor een pijlpunt naar rechts.
• Positioneer de klassen op de plaats waar je die nodig hebt. Gebruik daar <span>-tags voor. Die tags mogen geen content bevatten.
  Om te zorgen dat de pijlpunt (een block-element) zich als regel-element gedraagt, heeft pijlpunt de eigenschap display:inline-block.
   
• Door over -135° of +45° te draaien wijzen de pijlpunten omhoog resp. omlaag.

Pijl naar links:
Pijl naar rechts:
Pijl naar omhoog:
Pijl naar omlaag:

Toepassen in je eigen site
Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Verander de kleuren naar je eigen inzicht.

Als de pijlen te klein zijn ten opzichte van de karaktergrootte van de tekst, maak je overal in de filestyles.css de waarde van 3px groter. Hoeveel dat moet zijn is een kwestie van proberen. Het omgekeerde geldt ook.
Houd de padding, de border-width en de border-radius wel gelijk aan elkaar.

De border-radius kun je kleiner maken dan border-width. Desgewenst kan border-radius helemaal worden weggelaten. Je krijgt dan pijlpunten met een scherpe punt.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="css/styles.css">

(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen)

Voor een pijlpunt naar links:
  <span class="pijlpunt naar-links"></span>
Voor een pijlpunt naar rechts:
  <span class="pijlpunt naar-rechts"></span>
Voor een pijlpunt naar omhoog:
  <span class="pijlpunt naar-omhoog"></span>
Voor een pijlpunt naar omlaag:
  <span class="pijlpunt naar-omlaag"></span>

Downloaden:
 
Druk op de knop:  File: voorb843.zip, 629 bytes.