• Arrondis

    Notre fidèle blogueuse américaine Loneci me demande comment faire des images arrondies...

    L'attribut CSS pour les arrondis est: border-radius:50%; la valeur peut être en px, %, vw... voir des sites en ligne du genre: ICI.

    Comme vous le savez, je ne propose que des codes en unités adaptatives afin que chaque écran affiche les montages correctement.

    Vous pouvez appliquer un arrondi sur chaque angle d'une image ou sur chaque angle d'un paragraphe contenant une image.

     

    <p id="xp1">&nbsp;</p>
    <style><!--
    #xp1{width:8vw; height:4.5vw; background:green; border-radius:50%;}
    --></style>

    L'image rectangulaire devient ovale.

     

    <p id="xp1">&nbsp;</p>
    <style><!--
    #xp1{width:5vw; height:5vw; background:green; border-radius:50%;}
    --></style>

    L'image carrée devient ronde.

     

    <p id="xp3">&nbsp;</p>
    <style><!--
    #xp3{width:8vw; height:4.5vw; margin:1vw auto; background:green; border-radius:0% 10% 30% 50%;}
    --></style>

    Chaque arrondi peut recevoir une valeur particulière.

     

    L'écriture simplifiée est: border-radius:25%; (par exemple !): ainsi, chaque angle reçoit un arrondi de 25% mais chaque angle peut recevoir un arrondi d'une valeur différente:

    border-radius:0% 10% 30% 50%; par exemple, ce qui donne la dernière forme.

    Lorsque vous écrivez border-radius:20%; le programme va arrondir les angles selon la hauteur du côté soit 20% de la hauteur et 20% de la largeur; la hauteur étant plus petite que la largeur, dans le premier exemple, vous obtenez un ovale.

    Avec hauteur=largeur, vous obtenez un rond.

    Vous pouvez également obtenir un arrondi non régulier : Chaque valeur accepte un format liste valeurs X / liste valeurs Y. La première liste représente les rayons horizontaux des coins, la deuxième liste représente les rayons verticaux des coins.

     

    <p id="xp4">&nbsp;</p>
    <style><!--
    #xp4{width:8vw; height:4.5vw; margin:1vw auto; background:green; border-radius:10% 20%/ 30% 50%;}
    --></style>

    Hauteur et largeur n'ont pas le même arrondi.

    *****

    Ceci parle du principe et je reviens juste sur l'oeuf de Pâques:

     

    <p id="xp5">&nbsp;</p>
    <style><!--
    #xp5{width:4.5vw; height:8vw; margin:1vw auto; background:green; border-radius:50% 50% 40% 40%;}
    --></style>
    Ovale en haut et un peu aplati en bas.

    *****

    Je profite de cette page pour voir la différence entre donner un arrondi à l'image directement ou la placer dans un paragraphe à qui nous donnons un arrondi; l'avantage est que nous pouvons paramétrer la partie visible de l'image et si le sujet n'est pas centré, nous pourrons le présenter dans un rond, par exemple.
    Voilà l'image exemple, avec un arrondi à 50%:

    <img style="width: 32vw; border: 0.4vh ridge white; border-radius: 50%;" src="http://ekladata.com/HlJHJbAcgjJpnTN5Jdsojet1OQk.jpg" alt="" />

    Si je voulais centrer la fleur, je peux mettre l'image en fond de paragraphe et définir quelle partie je veux voir:

     

    <p id="xp6">&nbsp;</p>
    <style><!--
    #xp6{width:32vw; height:32vw; margin:1vh auto; border-radius:50%; border:0.6vh ridge white; box-shadow:0.4vh 0.4vh 0.8vh black;background:url('http://ekladata.com/HlJHJbAcgjJpnTN5Jdsojet1OQk.jpg'); background-position:-40vw 0vw;}
    --></style>

    Si votre sujet est déjà centré, vous pouvez ajouter une ombre 3D.

     

    <p id="xp7">&nbsp;</p>
    <style><!--
    #xp7{width:32vw; height:32vw; margin:1vh auto; border-radius:50%; border:0.6vh ridge white; box-shadow:0.4vh 0.4vh 0.8vh black, inset -1vh -1vh 2vh 1vh black, inset 1vh 1vh 2vh 1vh white;;background:url('http://ekladata.com/6lIR64-juaWiMgCMt-UH9tdLY48.jpg'); background-position:50% 50%;}
    --></style>