• art.09.5.21

    Pas d'idée pour un montage original alors, un retour à des bases.

    Je constate que beaucoup de blogs sont constitués par des images saisies par l'icône "Image" de la barre d'outils; c'est bien sûr fait pour ça mais ne propose que des paramètres limités (dimension, lien et positionnement) mais rien pour la décoration.

    Pour cela, il faut ouvrir le cadre "code source" (<>) et écrire manuellement ce que l'on souhaite: on n'a rien sans rien !

    Les décorations les plus simples sont les bordures, les arrondis, les ombres...

    Je vais commencer par saisir une image par l'icône "Image" puis ouvrir le code source <>.

    Le choix de mon image dans mes dossiers et sa taille sont des choses que vous connaissez mieux que moi.

    art.09.5.21

    J'ai choisi une image, une taille de 1200px par 675px (le ratio est défini automatiquement par le programme), pas de lien vers l'image d'origine et une position centrée.

    En ouvrant le code source, je trouve ce qu'a écrit le programme, en fonction de mes choix.

    <p style="text-align: center;"><img src="http://ekladata.com/J6fDOARcoMiXhd6KcpnbYQJwMXg@1200x675.jpg" alt="art.09.5.21" /></p>

    L'inconvénient de cette méthode est que l'adresse attribuée à cette image  n'est utilisée que pour cet article; si je veux utiliser cette même image pour un autre article, il lui sera attribuée une autre adresse.

    A partir de là, il faut mettre les mains dans le cambouis !

    Dans le code source, je vais ajouter une bordure unie:

    <p style="text-align: center;"><img style="border:6px ridge white;" src="http://ekladata.com/J6fDOARcoMiXhd6KcpnbYQJwMXg@1200x675.jpg" alt="art.09.5.21" /></p>

    Ce qui va donner:

    art.09.5.21

    Si je veux ajouter une ombre extérieure à cette bordure:

    <p style="text-align: center;"><img style="border:6px ridge white; box-shadow:6px 6px 8px black;" src="http://ekladata.com/J6fDOARcoMiXhd6KcpnbYQJwMXg@1200x675.jpg" alt="art.09.5.21" /></p>

    art.09.5.21

     

    Si je veux ajouter un arrondi aux angles de cette image, en plus, je vais écrire:

    <p style="text-align: center;"><img style="border:6px ridge white; box-shadow:6px 6px 8px black; border-radius:200px;" src="http://ekladata.com/J6fDOARcoMiXhd6KcpnbYQJwMXg@1200x675.jpg" alt="art.09.5.21" /></p>

    art.09.5.21

    Remarque: pour ajouter une ombre intérieure afin de faire, par exemple, un effet 3D, il faut placer l'image en fond de paragraphe: juste un exemple:

    <p style="margin:20px auto; width:1200px; height:675px; box-shadow:6px 6px 8px black, inset -8px -8px 12px black, inset 8px 8px 12px white; background:url('http://ekladata.com/J6fDOARcoMiXhd6KcpnbYQJwMXg@1200x675.jpg'); background-size:cover;" />&nbsp;</p>

    margin:20px auto; indique au paragraphe de laisser un espace de 20px au dessus et en dessous et de se center dans la zone article.

    Pour que l'effet 3D soit correct, il faut retirer la bordure du paragraphe.