Ronde afbeelding
Voorbeeld ronde afbeelding van 300x300 pixels:
Afbeelding 300x300 pixels
Afbeelding 200x200 pixels
- Zorg er voor dat je afbeelding vierkant is en met dit voorbeeld 300x300 pixels.
(In de code is het formaat aan te passen.. uitleg volgt verder op in deze beschrijving) - Zoek de jouwweb code van je afbeelding (Uitleg volgt na deze beschrijving)
- Maak op de pagina en op de plaats waar de ronde afbeelding moet komen een HTML item aan.
- Plak de HTML code uit onderstaand ronde-foto.txt in het HTML item
- Verander de code van de test afbeelding met de code van je eigen foto.
Code van het plaatje in het voorbeeld: https://dummyimage.com/300x300/dddddd/0000
- Als je de afmeting van de ronde foto wilt wijzigen, moet je dat doen met de regels:
width: 300px;
height: 300px;
------------------------------------
Met een eigen afbeelding ..

Met een foto ziet het er dan zo uit...

Voorbeeld van meerdere afbeeldingen bij elkaar:
Voorbeeld - Ingestelde posities plaatjes: 1.relatief 2.absoluut 3. absoluut
- Zorg er voor dat je afbeelding vierkant is en met dit voorbeeld 300x300 / 250x250 / 200x200 pixels.
(In de code is het formaat aan te passen.. uitleg volgt verder op in deze beschrijving) - Zoek de jouwweb code van je afbeelding (Uitleg volgt na deze beschrijving)
- Maak op de pagina en op de plaats waar de ronde afbeelding moet komen een HTML item aan.
- Plak de HTML code uit onderstaande 3-rond-fotos.txt in het HTML item.
- Verander de code van de test afbeeldingen met de code van je eigen fotos
Als je dezelefde CSS code gebruikt of een niet vierkante afbeelding krijg je onderstaand resultaat

Voorbeeld met Aangepaste schaduw: box-shadow: 10px 10px 8px rgba(0, 0, 0, .8);
Maak een Gratis Website met JouwWeb