• Bordure image 2

    La plupart d'entre nous savent, mieux que moi, utiliser les logiciels de traitement d'image et peuvent créer des images de fond, avec les motifs de leur choix, qu'il peuvent placer en bordure ou en fond, comme dans mes 2 derniers exemples.

    Pour les plus téméraires, on peut également positionner des images, animées ou non, sur la bordure.

    Cette écriture, pas plus simple, certes, permet d'agir sur chaque élément indépendamment pour le décorer.


    En reprenant une image de bleulezard.

    <div style="box-sizing: border-box; width: 60vw; height: 25vw; border-radius: 5vw; margin: 1vh auto; text-align: left; border: 2vw solid yellow; background: pink; border-image: url(' http://ekladata.com/Uw2PdXNqGdp40QQDf5HsS5z03po.png')40/2.5vw/0.5vw round; padding: 1vw;"></div>

    Il faut malgré tout ajuster la taille de l'image et sa position afin que la bordure cache bien le cadre en dessous.


    En utilsant une autre façon de coder:
    <div style="box-sizing: border-box; width: 60vw; height: 25vw; border-radius: 5vw; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/uReCxkJnv46giiBtS-c6ovfN6CY/img728.gif');">
    <p style="box-sizing: border-box; width: 56vw; height: 20vw; padding: 0.5vw; border-radius: 4vw; transform: translate(2vw,2.5vw); background: linear-gradient(to bottom, #DEB887 0%, #FAEBD7 100%); text-align: center; box-shadow: inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white;">En utilsant une autre fa&ccedil;on de coder:</p>
    </div>

    Une difficulté est que pour sauter de ligne, il faut le faire dans le code source, comme dans le cas précédent.

    <div style="box-sizing: border-box; width: 60vw; height: 25vw; border-radius: 5vw; box-shadow: inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/G-QbwvgXZWKDJ_ugOtF1WYD8Dnc/marble6.jpg');">
    <p style="box-sizing: border-box; width: 56vw; height: 20vw; padding: 1.5vw; border-radius: 4vw; transform: translate(2vw,2.5vw); background: linear-gradient(to bottom, #DEB887 0%, #FAEBD7 100%); text-align: center; box-shadow: inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white;">En utilsant une autre fa&ccedil;on de coder:</p>
    </div>

    <div style="box-sizing: border-box; width: 60vw; height: 25vw; border-radius: 5vw; box-shadow: inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; margin: 1vh auto; text-align: left; background: url('http://gif.toutimages.com/images/ani_divers/hamsters/hamster_016.gif') no-repeat 2vw 1vw, url('http://gif.toutimages.com/images/ani_divers/hamsters/hamster_017.gif') no-repeat 56vw 1vw, url('http://gif.toutimages.com/images/ani_divers/hamsters/hamster_018.gif') no-repeat 2vw 22vw, url('http://gif.toutimages.com/images/ani_divers/hamsters/hamster_019.gif') no-repeat 56vw 22vw, url('http://gif.toutimages.com/images/ani_divers/hamsters/hamster_036.gif') no-repeat 28vw 0.5vw, url('http://ekladata.com/_WyYeIH4z6MER08Z-l9oYhlLuZ4/satin4.jpg');">
    <p style="box-sizing: border-box; width: 56vw; height: 20vw; padding: 1.5vw; border-radius: 4vw; transform: translate(2vw,2.5vw); background: linear-gradient(to bottom,#48D1CC 0%, #AFEEEE 100%); text-align: center; box-shadow: inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white;">votre article</p>
    </div>