Tekstballon met CSS
Alleen CSS3.
Geen plaatjes!
Geen plaatjes!
De bedoeling van deze bladzijde is zonder nadere introductie wel duidelijk. Op deze pagina wordt uitgelegd hoe je zo'n tekstballon maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
Zoals de tekstballon al aangeeft worden en geen plaatjes gebruikt, maar ook geen JavaScript!
- De volgende zaken worden besproken:
- De HTML- en CSS-code waarmee je dit maakt.
- Positioneren van de ballon op de pagina.
- Zelf toepassen op je eigen site.
- De tekstballon in je pagina opnemen
- In de <body>, op de plaats waar de ballon moet komen, zet je een element met de class ballon. Dat element bevat de tekst die in de ballon komt.
- Met behulp van een style-attribuut zet je de ballon op de goede plaats. Zie de code onderaan deze bladzijde.
- De CSS-code
- De ballon zelf wordt gemaakt met de class ballon. Om de twee bolletjes te tekenen wordt de class ballon uitgebreid met de pseudo-elementen :before en :after.
- ballon, ballon:before en ballon:after hebben alle drie een background-image, dat wordt opgebouwd
met een linear-gradient, die in twee stappen verloopt van oranje naar wat lichter oranje.
- De class ballon heeft position: relative; top, bottom, left en right worden niet genoemd
en staan dus op nul. Daardoor wordt de ellips binnen het betreffende element (de parent) geplaatst.
De pseudo-elementen :before en :after (dat zijn de rondjes) hebben position: absolute. De plaats van het grote rondje (:before) wordt bepaald ten opzichte van de ellips. De plaats van het kleine rondje (:after) wordt bepaald ten opzichte van het grote rondje. - De width in .ballon bepaalt de breedte van de ellips, de hoogte hangt af an de tekst. De ellipsvorm ontstaat
doordat de breedte en de hoogte verschillen, in combinatie met border-radius:50%.
Bij de rondjes zijn height en width aan elkaar gelijk. ook hier is de border-radius:50%. - .ballon:before en .ballon:after hebben allebei display:block. Dit is trucje om de rondjes ook zichtbaar te krijgen in Internet Explorer 10 en eerder (daar staat de default waarde op display:none).
- De inhoud van content in :before en :after is leeg gelaten. We willen alleen een leeg rondje zien!
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>
.ballon {
width: 150px;
text-align: center;
font-size: 20px;
background-image: linear-gradient(#ff8000, #ff9500, #ffaa00);
border-radius: 50%;
padding: 30px;
color: white;
margin: 0 20px;
position: relative;
line-height: 25px;
}
.ballon:before {
content: '';
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background-image: linear-gradient(#ff8000, #ff9500, #ffaa00);
bottom: -13px;
}
.ballon:after {
content: '';
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
position: absolute;
background-image: linear-gradient(#ff8000, #ff9500, #ffaa00);
bottom: -30px;
left: 20px;
}
</style>
(Zet dit in de <BODY>, op de plaats waar de ballon moet komen)
<div class="ballon" style="float:right">
Alleen CSS3.<br>Geen plaatjes!
</div>
inspiratie/bron: https://jsbin.com/omomob/5/edit jsbin.com
Downloaden:
Druk op de knop:
File: voorb122.zip, 559 bytes.
