Ben's Hobbyhoekje -- Een CSS-lintje

Een CSS-lintje

Dit is een tekst

De bedoeling van deze pagina is zonder verdere uitleg wel duidelijk. Op deze bladzijde wordt uitgelegd hoe je dit lint met tekst maakt. De code kun je downloaden om zelf te gebruiken.

Er komen hierbij geen JavaScript of plaatjes aan te pas. Alles wordt gedaan CSS en een beetje HTML.

Er worden twee items besproken:
1. Opbouw van de CSS
2. Toepassen op je site
Opbouw van de CSS
De CSS definieert een class ribbon, dit is de 'voorkant' van het lint waarop de tekst staat.
.ribbon heeft een width, die bepaalt hoe 'lang' het lint is. De breedte van het lint wordt bepaald door het lettertype (font-family, font-size en line-height).
De tekst staat gecentreerd op het lint: text-align: center.
Boven en onder wordt een marge van 15px aangehouden, zodat het lintje niet over de andere tekst heen loopt. Om te zorgen dat de class .ribbon de instellingen van andere HTML-elementen volgt is display: inline-block opgenomen, in combinatie met position: relative.
De dubbelgevouwen uiteinden van het lintje zijn gemaakt met de pseudo-elementen .ribbon:before en .ribbon:after.
Deze pseudo-elementen worden in twee delen gedefinieerd: Eerst de eigenschappen die ze gemeen hebben, daarna de verschillen apart.
Om te zorgen dat de opgevouwen stukken achter het voorste stuk van het lint blijven, hebben ze z-index: -15. (De z-index van het voorste stuk is per default gelijk aan nul.)
Als je de z-index van de voorkant van het lint verandert, kan het zijn dat je de z-index van de opgevouwen stukken ook moet veranderen. De z-index van de opgevouwen stukken moet altijd kleiner zijn dan de z-index van de voorkant.
De eigenschap content in .ribbon:before en .ribbon:after moet een lege string zijn.
Door width: 6px in te stellen worden de uiteinden net ietsje langer, dat staat mooi.
De borders met de donkerste tint groen zijn smaller dan de rest (13px vs. 19px). Het verschil is 6px, precies wat hierboven is genoemd.
Om het dubbelgevouwen stuk van het lint goed te laten zien, is top: 19px gebruikt. Daardoor schuiven de uiteinden wat naar beneden. De positionering is absoluut ten opzichte van de voorkant van het lint.
De uiteinden van het lint worden iets naar binnen geschoven. Dat gebeurt met left:-25px en right:-25px. Ook deze positionering is absoluutten opzichte van de voorkant van het lint.
Deze verschuiving maakt de illusie compleet.
De aanpak om de vorm te maken zoals die is, is een variant op het maken van driehoeken met CSS, zie het item Driehoeken tekenen met CSS.
Om het lint diepte te geven zijn er drie verschillende tinten groen gebruikt:
- De voorkant van het lint, waar de tekst in staat. Dit is gedaan met de CSS-eigenschap background-color van de class .ribbon.
- De voorkant van het omgevouwen lint. Dit ligt in de 'schaduw' van het middenstuk en is daarom wat donkerder van tint.
- De achterkant van het omgevouwen lint. Dat ligt als het ware dubbel in de schaduw en is daarom nog weer wat donkerder tint.
De drie tinten groen zijn (van licht naar donker) #00a52c, #008736 en #006938.
Toepassen in je eigen site
Begin met de noodzakelijke CSS-code in de <head> de zetten.
In de <body>, op de plaats waar het lint moet verschijnen, zet je een <div>-tag neer, die je met CSS-attributen en/of eventueel HTML-attributen positioneert. Op deze bladzijde is <div align="center"> gebruikt. Het lint staat dus netjes in het midden van de bladzijde.
Binnen de <div>-tag zet je een tweede &lgt;div>. Deze geef je class="ribbon" mee.
De tag <div class="ribbon"> bevat de tekst die op het lint moet verschijnen. Hier is dat :"Dit is een tekst".

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>).

<style>
.ribbon {
background-color: #00a52c;
display: inline-block;
color: #fff; text-align: center;
font-size: 22px;
line-height: 38px;
margin: 15px 0;
position: relative;
width: 400px;
}
.ribbon:before,
.ribbon:after {
content: "";
border-style: solid;
border-width: 0;
height: 0;
position: absolute;
width: 6px;
top: 19px;
z-index: -15;
}
.ribbon:before {
border-color: #008736 #006938 #008736 transparent;
border-width: 19px 13px 19px 19px;
left: -25px;
}
.ribbon:after {
border-color: #008736 transparent #008736 #006938;
border-width: 19px 19px 19px 13px;
right: -25px;
}
</style>

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

<div style="text-align:center">
<div class="ribbon">Dit is een tekst</div>
</div>

Inspiratie : Webdesigner Magazine nr. 47, pag. 32 (juni 2012). Dit blad wordt sinds eind november 2017 niet meer gemaakt. / bron: jsbin.com
Verfijning en verbeteringen: Ben's Hobbyhoekje ©2015

Downloaden:

Druk op de knop: File: voorb125.zip, 573 bytes.