• Liseré 2

    J'ai publié un article, au 19 novembre 2015, en hébergeant une photo de 1600x1200px, par l'icône "image"; pour la décorer ensuite afin d'éviter, à certains de gérer leur fichier photo sur Ekla.

    J'ai parcouru mon dossier et envoyé l'image; j'ai redimensionné mon image en taille personnalisée de 800x600px; j'ai décoché l'option lien vers l'image originale et choisi positionnement: centre.

    L'image s'est bien affichée telle que ci-contre et, en ouvrant le code source, le code est:

    <p style="text-align: center;"><img src="http://ekladata.com/5jpL-YO9U1wTn0BTvOlsCeqqqB0@800x600.jpg" alt="Liser&eacute; 2" /></p>

    Liseré 2

     


     

    Je peux ajouter à ce code, les décorations que je veux: par exemple:  bordure,  liseré, ombre...

    bordure: border:4px solid white;

    liseré intérieur: outline:20px double white; outline-odffset:-100px;

    ombre: box-shadow:6px 6px 10px black;

    ce qui va s'écrire:

    <p style="text-align: center;"><img style="border:4px solid white; outline:20px double white; outline-offset:-50px; box-shadow:6px 6px 10px black;" src="http://ekladata.com/5jpL-YO9U1wTn0BTvOlsCeqqqB0@800x600.jpg" alt="Liser&eacute; 2" /></p>

    et le résultat sera:

     

    Liseré 2

     


     

    Comme déjà vu sur la page Liseré, les arrondis imposent une autre écriture pour mettre l'image en fond et le liseré par dessus.
    Je profite de cet exemple pour présenter les ombrages 3D, sur lesquels je vais revenir, sur une autre page.

     

     

     

    <div id="out1">
    <p id="lis">&nbsp;</p>
    </div>
    <style><!--
    #out1{position:relative; margin:10px auto; width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/5jpL-YO9U1wTn0BTvOlsCeqqqB0@800x600.jpg'); border-radius:50%;}
    #lis{ transform:translate(40px,40px); width:700px; height:500px; border:10px double white; border-radius:50%;}
    --></style>

     


     

    On peut filtrer l'extérieur du montage, pour masquer légèrement l'image de fond.
    <div id="out2">
    <p id="lis2">&nbsp;</p>
    </div>
    <style><!--

    #out2{position:relative; margin:10px auto; width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/5jpL-YO9U1wTn0BTvOlsCeqqqB0@800x600.jpg'); border-radius:50%;}
    #lis2{ transform:translate(40px,40px); width:700px; height:500px; border:10px double white; border-radius:50%; box-shadow:inset 10px 10px 20px white,inset -10px -10px 20px black, 0px 0px 150px 20px white;}
    --></style>