• Art.09B.5.21

    Un petit retour sur les arrondis; d'abord, avec une image saisie par l'icône "Image" de la barre d'outils.

    Art.09B.5.21

    Art.09B.5.21

    <p style="text-align: center;"><img src="http://ekladata.com/TNztyOdbExKoOYS5PRJi7suY3tU@500x500.jpg" alt="Art.09B.5.21" /></p>

    Dans les réglages se l'icône image, j'ai choisi une taille personnalisée de 500x500px, en recadrant l'image; dans ce cas, le sujet est centré donc pas de souci.

    On ajoute un arrondi en ajoutant: border-radius:50%; une bordure légère: border:2px solid black; et un ombre portée: box-shadow:4px 4px 6px black;

    <p style="text-align: center;"><img style="border-radius:50%;border:2px solid black; box-shadow:4px 4px 6px black;" src="http://ekladata.com/TNztyOdbExKoOYS5PRJi7suY3tU@500x500.jpg" alt="Art.09B.5.21" /></p>

    Art.09B.5.21

    Par contre, si le sujet n'est pas centré, à part utiliser un programme de traitement d'image,  je ne connais le centrage qu'en plaçant l'image en fond de paragraphe et en positionnant ce fond par background-position:-Xpx -Ypx;

    Art.09B.5.21

    Si je veux me centrer sur la goutte d'eau, dans une paragraphe de 500px par 500px, par exemple, je vais récupérer l'adresse de l'image http://ekladata.com/Ire5d2Flx4eLRkJklxz_57qzISg@1000x563.jpg et la placer en fond de paragraphe.

    Comme la taille de l'image est de 1000x563px, je vais utiliser l'image d'origine en 1920x1080px en modifiant l'adresse : http://ekladata.com/Ire5d2Flx4eLRkJklxz_57qzISg.jpg

     

     <p style="width: 500px; height: 500px; margin: 20px auto; border-radius: 50%; border: 2px solid black; box-shadow: 4px 4px 6px black,inset -4px -4px 6px black, inset 6px 6px 8px white; background: url('http://ekladata.com/Ire5d2Flx4eLRkJklxz_57qzISg.jpg'); background-position: -1100px -450px;">&nbsp;</p>

    Comme vous le voyez, le positionnement se fait par des valeurs négatives.