• Fleur base

    Ma proposition précédente n'était pas bien écrite car, en regardant avec un écran de moindre résolution que le mien, la fleur était décalée par rapport au cadre.

    En voulant trop bien faire, j'ai mal fait, oubliant que la page, si la largeur du blog est paramétrée à 100%, s'adapte automatiquement à la largeur de l'écran de lecture et donc pas besoin de % en dimension !

    Voici une fleur de base, sans image en fond; pour mettre une image dans chaque motif, remplacez: background:yellow; par background:url('http:/: ad de votre image'); background-size:cover;

    Survolez chaque partie pour l'agrandir.

     

     

     

     

     

     

     

    <div style="width: 800px; height: 800px; border: 1px solid black; margin: 0% auto; background: linear-gradient(to bottom, #cfe7fa 0%,#6393c1 100%);">
    <p id="s1">&nbsp;</p>
    <p id="s2">&nbsp;</p>
    <p id="s3">&nbsp;</p>
    <p id="s4">&nbsp;</p>
    <p id="s5">&nbsp;</p>
    <p id="s6">&nbsp;</p>
    <p id="s7">&nbsp;</p>
    </div>
    <style><!--
    #s1{position:absolute; z-index:1;width:200px; height:200px; border-radius:50%; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white; transform:translate(300px,300px); border:1px solid black; background:red;transition:all 1s linear;}
    #s2{position:absolute; z-index:1; width:200px; height:100px; border-radius:50%; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white; transform:translate(300px,148px)rotate(90deg); border:1px solid black; background:yellow;transition:all 1s linear;}
    #s3{position:absolute; z-index:1; width:200px; height:100px; border-radius:50%; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white; transform:translate(300px,552px)rotate(90deg); border:1px solid black; background:green;transition:all 1s linear;}
    #s4{position:absolute; z-index:1; width:200px; height:100px; border-radius:50%; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white; transform:translate(125px,250px)rotate(30deg); border:1px solid black; background:pink;transition:all 1s linear;}
    #s5{position:absolute; z-index:1; width:200px; height:100px; border-radius:50%; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white; transform:translate(125px,450px)rotate(-30deg); border:1px solid black; background:coral;transition:all 1s linear;}
    #s6{position:absolute; z-index:1; width:200px; height:100px; border-radius:50%; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white; transform:translate(475px,250px)rotate(-30deg); border:1px solid black; background:#F7BE81;transition:all 1s linear;}
    #s7{position:absolute; z-index:1; width:200px; height:100px; border-radius:50%; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white; transform:translate(475px,450px)rotate(30deg); border:1px solid black; background:lightgreen;transition:all 1s linear;}
    #s1:hover, #s2:hover, #s3:hover, #s4:hover, #s5:hover, #s6:hover, #s7:hover{z-index:20; width:800px; height:800px; border-radius:50%;box-shadow:inset 8px 8px 16px black, inset -8px -8px 16px white; transform:translate(0px,0px);}
    --></style>