• Pour Yann

    Code html de mon article décoration du 26 décembre 2016.

    Je ne reprends pas résultat mais voici les codes dans l'ordre.

    Un seul souci, pour vous, je publie sous des codes adaptatifs, c'est à dire qui tiennent compte des dimensions de l'écran de lecture et les dimensions sont donc en vw/vh et non en pixel, qui est une valeur fixe.

    Je suis à votre disposition pour les adapter à vos dimensions.

    <div style="text-align: center; background: url('http://ekladata.com/m2d6s8ZGMhXJpRutC1PNKmCeZPA@1400x788.jpg'); background-size: cover; width: 80vw; height: 80vh; border: 0.3vw solid black; margin: 0vh auto;">
    <p style="width: 75vw; height: 70vh; margin: 3vh auto 0.4vh auto; border: 1vh solid white; box-shadow: 0.3vw 0.5vh 0.5vw black;">&nbsp;</p>
    </div>

    Dans ce code, l'image est placée en fond de cadre et un rectangle, avec bordure et ombre est placé dessus.

     


    <div style="width: 80vw; height: 80vh; border: 0.3vw solid black; margin: 0vh auto;">
    <p style="position: absolute; width: 80vw; height: 80vh; background: url('http://ekladata.com/jzcW_l-fga1k24o32BRWfbRcVuI.jpg'); background-size: 100%; opacity: 0.3;">&nbsp;</p>
    <p style="position: absolute; width: 60vw; height: 60vh; border-radius: 10vw; background: url('http://ekladata.com/jzcW_l-fga1k24o32BRWfbRcVuI.jpg'); background-size: 133%; background-position: 50% 40%; margin: 10vh 0 0 10vw; opacity: 1; border: 0.5vw solid rgba(255,255,255,0.7); box-sizing: border-box; box-shadow: 0.3vw 0.3vh 1vw black;">&nbsp;</p>
    </div>

    Dans ce code,  le cadre contient un bloc qui contient l'image atténuée (opacité) et dessus, un bloc qui contient une partie de l'image.

     

    <div style="width: 80vw; height: 80vh; border: 0.3vw solid black; margin: 0vh auto;">
    <p style="position: absolute; width: 80vw; height: 80vh; background: url('http://ekladata.com/byOmKBgMcEQc7UqmWZQSh-qxPzU.jpg'); background-size: 100%; opacity: 0.3; box-sizing: border-box; filter: grayscale(1); webkit-filter: grayscale(1);">&nbsp;</p>
    <p style="position: absolute; width: 70vw; height: 70vh; background: url('http://ekladata.com/byOmKBgMcEQc7UqmWZQSh-qxPzU'); background-size: 116%; background-position: 50% 30%; margin: 5vh 0 0 5vw; opacity: 1; border: 0.5vw solid rgba(255,255,255,1); box-sizing: border-box; box-shadow: 0.3vw 0.3vh 1vw black;">&nbsp;</p>
    </div>

    Dans ce code, même structure: un bloc avec l'image atténuée en noir et blanc et dessus, un bloc qui contient une partie de l'image, positionnée pour retrouver sa position sur l'image.