/image%2F0011258%2F201307%2Fob_06c393213d1364cc674717ab41ca870b_01-7-13-004.jpg "Bordure image")
On peut utiliser une texture pour faire un encadrement par le code: border-image.
code exemple ci-contre:
<div style="float: left; width: 570px; height: 380px;"><img class="bord1" src="http://looneyart.com/img01/beautiful-sacred01.jpg" />
</div>
<style type="text/css"><!--
.bord1 {
border-width: 20px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_231.gif) 20 round;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_231.gif) 20 round;
-o-border-image: url(http://fonds.toutimages.com/fo_anime/anime_231.gif) 20 round;
border-image: url(http://fonds.toutimages.com/fo_anime/anime_231.gif) 20 round;
}
--></style>
/http%3A%2F%2Flooneyart.com%2Fimg01%2Fbeautiful-sacred01.jpg)
/http%3A%2F%2Flooneyart.com%2Fimg01%2Fbeautiful-sacred02.jpg)
/http%3A%2F%2Flooneyart.com%2Fimg01%2Fbeautiful-sacred03.jpg)
/http%3A%2F%2Flooneyart.com%2Fimg01%2Fbeautiful-sacred04.jpg)
/http%3A%2F%2Flooneyart.com%2Fimg01%2Fbeautiful-sacred05.jpg)
/http%3A%2F%2Flooneyart.com%2Fimg01%2Fbeautiful-sacred06.jpg)
code exemple ci-contre:
<div style="float: left; width: 570px; height: 380px;"><img class="bord1" src="http://looneyart.com/img01/beautiful-sacred01.jpg" />
</div>
<style type="text/css"><!--
.bord1 {
border-width: 20px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_231.gif) 20 round;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_231.gif) 20 round;
-o-border-image: url(http://fonds.toutimages.com/fo_anime/anime_231.gif) 20 round;
border-image: url(http://fonds.toutimages.com/fo_anime/anime_231.gif) 20 round;
}
--></style>
les paramètres
Le code ci-dessus comporte 4 lignes pour 4 navigateurs; je vais ne garder que les lignes pour Firefox (-moz-) et Chrome/Safari (-webkit-) pour simplifier.
code montage ci-contre:
<div style="float: left; width: 570px; height: 380px; ">
<img class="bord2" src="http://looneyart.com/img01/beautiful-sacred02.jpg" />
</div>
<style type="text/css"><!--
.bord2 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 20 round;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 20 round;
}
--></style>
Le code ci-dessus comporte 4 lignes pour 4 navigateurs; je vais ne garder que les lignes pour Firefox (-moz-) et Chrome/Safari (-webkit-) pour simplifier.
code montage ci-contre:
<div style="float: left; width: 570px; height: 380px; ">
<img class="bord2" src="http://looneyart.com/img01/beautiful-sacred02.jpg" />
</div>
<style type="text/css"><!--
.bord2 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 20 round;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 20 round;
}
--></style>
Je ne recopie pas l'affichage de l'image mais juste les paramètres CSS.
La texture est la même sur tout les exemples suivant.
<style type="text/css"><!--
.bord3 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 30 stretch;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 30 stretch;
}
--></style>
La texture est la même sur tout les exemples suivant.
<style type="text/css"><!--
.bord3 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 30 stretch;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 30 stretch;
}
--></style>
Je ne recopie pas l'affichage de l'image mais juste les paramètres CSS.
<style type="text/css"><!--
.bord4 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 40 round;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 40 round;
}
--></style>
<style type="text/css"><!--
.bord4 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 40 round;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 40 round;
}
--></style>
Je ne recopie pas l'affichage de l'image mais juste les paramètres CSS.
<style type="text/css"><!--
.bord5 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 40 10 40 10 round;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 40 10 40 10 round;
}
--></style>
Dans les codes précédents, nous avons considéré les cotés d'une même largeur d'image:40 mais nous pouvons donner une largeur différente à chaque coté: haut/droit/ bas et gauche dans l'ordre.
Ici: 40 10 40 10
...et deux modes d'étirement central: Etiré (stretch), ou répété (round).
<style type="text/css"><!--
.bord5 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 40 10 40 10 round;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 40 10 40 10 round;
}
--></style>
Dans les codes précédents, nous avons considéré les cotés d'une même largeur d'image:40 mais nous pouvons donner une largeur différente à chaque coté: haut/droit/ bas et gauche dans l'ordre.
Ici: 40 10 40 10
...et deux modes d'étirement central: Etiré (stretch), ou répété (round).
Je ne recopie pas l'affichage de l'image mais juste les paramètres CSS.
<style type="text/css"><!--
.bord6 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 5 25 50 75 stretch;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 5 25 50 75 stretch;
}
--></style>
Pour avoir une idée des affichages avec un autre réglage: image: 5 25 50 75 et mode étiré (stretch).
La texture choisie n'est peut-être pas très sympa mais donne une bonne idée des variantes.
<style type="text/css"><!--
.bord6 {
border-width: 30px;
-moz-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 5 25 50 75 stretch;
-webkit-border-image: url(http://fonds.toutimages.com/fo_anime/anime_453.gif) 5 25 50 75 stretch;
}
--></style>
Pour avoir une idée des affichages avec un autre réglage: image: 5 25 50 75 et mode étiré (stretch).
La texture choisie n'est peut-être pas très sympa mais donne une bonne idée des variantes.