• Arrondis sur image

    La page précédente nous donne un code simple pour mettre une bordure et une ombre sur une image rectangulaire.

    Nous pouvons ajouter un attribut: border-radius:100px; ou donner une valeur en %: border-radius:50%;

    Les valeurs en px donneront un arrondi identique sur la largeur et sur la hauteur.

    Les valeurs en % donneront un arrondi en % de la largeur et de la hauteur: comme ces valeurs sont différentes, le résultat sera différent et se présentera, sur une image rectangulaire, comme un ovale.

    Si nous utilisons une image carrée, avec un arrondi de 50% (le maximum), nous obtiendrons un rond: survolez les images ci-dessous et retrouvez leur code, dans l'ordre, en dessous.

    Deux premières images en 700x525px et la troisième en 700x700px.

    <p style="text-align: center;"><img id="j1" src="http://ekladata.com/ftMdsMzGGIzvQiLojplZxHHKruA.jpg" alt="" /></p>
    <p style="text-align: center;"><img id="j2" src="http://ekladata.com/9BK0r7FdEidgh8zigkGNq-bTFHk.jpg" alt="" /></p>
    <p style="text-align: center;"><img id="j3" src="http://ekladata.com/yWNvQLvS97Ur0OVOMWzCiw3n8bc.jpg" alt="" /></p>
    <style><!--
    #j1, #j2, #j3{ transition:all 0.5s linear;}
    #j1:hover{border:6px ridge white; box-shadow:4px 4px 8px black; border-radius:150px;}
    #j2:hover{border:6px ridge white; box-shadow:4px 4px 8px black; border-radius:50%;}
    #j3:hover{border:6px ridge white; box-shadow:4px 4px 8px black; border-radius:50%;}
    --></style>