Ronde afbeeldingen
Hier links zie je een plaatje. Rechts staat hetzelfde plaatje, maar dan in een ronde uitsnede.
Als je deze pagina bekijkt met een recente Webkit-browser (Chrome, Opera), dan vloeit deze tekst in een gebogen contour rond
het plaatje rechts.
Op deze pagina wordt uitgelegd hoe je dat aanpakt.
- Er worden twee items besproken:
- De CSS om een plaatje een ronde uitsnede te geven.
- De CSS om tekst de contour rond een plaatje te laten vloeien.
- Een plaatje een ronde uitsnede geven
- Om een rond plaatje te maken ga je uit van een vierkant 'origineel'. De randen rond je af met een straal van 50%. Dat
doe je met CSS:
width: 148px;
height: 148px;
border-radius: 50%; - Merk op dat de hoogte en de breedte aan elkaar gelijk zijn.
- Uiteraard zijn er ook wat eigenschappen gedefinieerd om het plaatje te positioneren:
float: right;
margin-left: 25px;
padding: 0; - Je kunt het ronde plaatje eenvoudig van een rand voorzien door een border-eigenschap op te nemen in de CSS, bijvoorbeeld:
border:5px dashed blue;
- Het plaatje is rond omdat het "bronbestand" vierkant is. Als het bronbestand een rechthoek is, ontstaat een ellipsvormige uitsnede.
- De complete CSS- en HTML-code van het ronde plaatje staat onderaan de bladzijde.
- Tekst om een plaatje laten vloeien in een ronde contour
- De CSS om dit voor elkaar te krijgen luidt:
shape-outside: circle();
shape-margin: 10px; - De code van deze CSS is eenvoudig te doorgronden: De shape-eigenschap heeft meerdere verschijningsvormen:
- shape-outside. Dit gaat over de buitenkant van een element. Normaal is dat een rechthoek, maar door circle()
op te geven wordt het een cirkel.
N.B.: Hier is een vierkant plaatje gebruikt. Dat geeft een rond verloop. Als je een rechthoekig plaatje zou gebruiken, krijg je een ellipsvormig verloop. - shape-margin. Dit is een aanvulling op de "gewone" marge die je met margin instelt. Je moet hier zowel margin als shape-margin toepassen, anders lijkt de opmaak nergens op.
- shape-outside. Dit gaat over de buitenkant van een element. Normaal is dat een rechthoek, maar door circle()
op te geven wordt het een cirkel.
Inspiratie: Webdesigner Magazine nr. 77 (juni 2015) pag. 58. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Gebruik:
- De code staat in de <HEAD>.
De code van het ronde plaatje ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.rond_plaatje {
width: 148px;
height: 148px;
border-radius: 50%;
float: right;
margin-left: 25px;
padding: 0;
shape-outside: circle();
shape-margin: 10px;
}
</style>
(Zet dit in de <BODY>, op de plaats waar het ronde plaatje moet verschijnen).
<img class="rond_plaatje" src="esi_logo.gif" alt="plaatje, rond">
