-
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"> </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"> </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: