• Bordure image

    En préparant une page sur les bordures image, je m'aperçois que Firefox ne lit pas ce code (border-image:url(..) 10 10 10 10 round;).
    Il y a d'autres moyens de faire une bordure à motif, autour d'un texte ou autour d'une image, dont celui de placer texte ou image au dessus d'une image dont la partie visible fera le cadre.
    Avant toute chose: vous avez remarqué que Ekla vous propose d'enregistrer les images choisies avec leur adresses du net, afin de ne pas risquer de les perdre; dans cette optique, je me suis constitué, dans mes fichiers sur Ekla,, différents dossiers: un dossier "boutons", un dossier "textures", dans lequel j'ai placé différentes images de boutons ou de textures  et je vais en récupérer les adresses au fur et à mesure de mes besoins; je trouve ça pratique !
    On peut même créer ses propres images de texture, sur un logiciel de traitement d'images, pour les utiliser ensuite.


    Votre
    texte
    ou
    votre
    image.

    Code1
    <div id="bda">
    <p id="bdb">&nbsp;</p>
    </div>
    <style><!--
    #bda{width:300px; height:300px; border-radius:50%; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/dogplane.jpg');}
    #bdb{width:250px; height:250px; border-radius:50%; border:0px solid white; background-color:pink; position:relative; transform:translate(25px,25px);}
    --></style>
    Le rond rose (bdb) est positionné sur le fond (bda) texturé.

    Code2
    J'ai crée ce motif qui va remplir le fond et sur lequel je place mon image.
    <div id="bdc">
    <p id="bdd"><img src="http://ekladata.com/... alt="" /></p>
    </div>
    <style><!--
    #bdc{width:250px; height:250px; border:1px solid black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/carre.50x50.jpg'); background-size:cover; box-shadow:2px 2px 4px black;}
    #bdd{width:200px; height:200px; border:1px solid white;  position:relative; transform:translate(25px,25px); }
    --></style>

    Une fois le principe acquit, on peut remplir le fond d'une texture animée ou non, pour servir d'encadrement.

    Code 3 avec animation CSS sur le fond en gradient.
    <div id="bde">
    <p id="bdf"><img src="http://ekladata.com/..200x200.jpg" alt="" /></p>
    </div>
    <style><!--
    #bde{animation: anim 12s linear infinite; float:left; width:250px; height:250px; border:1px solid black; box-shadow:2px 2px 4px black;}
    #bdf{width:200px; height:200px; border:1px solid white; position:relative; transform:translate(25px,25px); }
    @keyframes anim {
    0% { background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); }
    25% { background: linear-gradient(to right, #cedce7 0%,#596a72 100%); }
    50% { background: linear-gradient(to top, #cedce7 0%,#596a72 100%); }
    75% { background: linear-gradient(to left, #cedce7 0%,#596a72 100%); }
    100% { background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); }}
    --></style>
    ...

     

    Code 4
    <div id="bdg">
    <p id="bdh">&nbsp;</p>
    </div>
    <style><!--
    #bdg{ width:250px; height:250px; border:1px solid black; box-shadow:2px 2px 4px black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/anime_344.gif');}
    #bdh{width:230px; height:230px; border:1px solid white; border-radius:50%; position:relative; transform:translate(10px,10px); box-shadow:2px 2px 4px black; background:url('http://ekladata.com/gfCpWxQ1lvKW9RlJuXq6yA0SJHk/200x200.jpg'); }
    --></style>
    ...

    Amusement: