Ronde afbeelding

Voorbeeld ronde afbeelding van 300x300 pixels:


Afbeelding 300x300 pixels


rond

Afbeelding 200x200 pixels


rond
  • 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: http://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...



rond
Tekstbestand
Ronde foto
Tekstbestand [575.0 B]
Download (71 downloads)

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
Tekstbestand
3 ronde fotos
Tekstbestand [1.8 KB]
Download (31 downloads)



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

rond