• Exemple 183

    Retour sur une décoration: le liseré intérieur.

     

    <p id="lis">&nbsp;</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">&nbsp;</p>
    <p id="col2">&nbsp;</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>