-
Exemple 183
Retour sur une décoration: le liseré intérieur.
<p id="lis"> </p>
<style><!--
#lis{width: 1000px; height: 562px; margin: 5px auto; border: 1px solid black; background:url('http://ekladata.com/7msCyXsejj4iZ6y4zvd2A9iI6m4.jpg'); background-size:cover; outline: solid 5px white; outline-offset: -25px;}
--></style>Les paramètres du liséré sont donnés par outline: solid 5px white; style, épaisseur et couleur sont à votre convenance.
La position intérieure du liseré est donnée par: outline-offset: -25px; distance à régler selon votre convenance.
**************
Ce qui me fait revenir sur une autre décoration: un image en noir et blanc en fond et une partie de cette image en couleur, par dessus:
<div style="width: 1000px; height: 562px; margin: 5px auto; border: 1px solid black;">
<p id="col1"> </p>
<p id="col2"> </p>
</div>
<style><!--
#col1{position:absolute; width:1000px; height:562px; background:url('http://ekladata.com/jlJDGOhwLtlioEcEWGmr28jjQMk.jpg'); background-size:cover; filter:grayscale(1); opacity:0.6;}
#col2{width:800px; height:360px; border-radius:100px; box-shadow:inset 6px 6px 10px black, inset -6px -6px 10px white; background:url('http://ekladata.com/jlJDGOhwLtlioEcEWGmr28jjQMk.jpg'); background-size:1000px 562px; background-position:-100px -100px; transform:translate(100px,100px);}--></style>