• Drop-shadow

    J'ai déjà publié quelque chose là-dessus mais il me semble (?) que les navigateurs sont plus souples sur l'écriture du code.

    Créer une ombre, sur une image transparente, qui suit les contours de l'image.

    Nous connaissons l'attribut box-shadow (lien détails ici) qui crée une ombre sur les contours du cadre contenant l'image, transparente ou non.

    <p style="margin: 1vh auto; width: 10vw; height: 10vw; background: aqua; border: 0.3vh solid white; box-shadow: 0.4vh 0.4vh 0.6vh black;"><img src="http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA@180x180.gif" alt="" /></p>

    Nous pouvons donner une ombre uniquement sur l'image transparente par drop-shadow (détails ici):

    <p style="text-align:center;"><img style="filter: drop-shadow(0.5vw 0.5vw 0.5vw #000000);" src="http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA@180x180.gif"></p>

    Nous pouvons également cumuler ces deux ombres.

    <p style="margin:1vh auto; width:10vw; height:10vw; background:aqua; border:0.3vh solid white; box-shadow:0.4vh 0.4vh 0.7vh black;"><img style="filter: drop-shadow(0.5vw 0.5vw 0.5vw #000000);" src="http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA@180x180.gif"></p>

    *****

    Tout autre chose: le positionnement vertical: en commençant le premier montage, le chapeau de Jimmy Cricket touchait le bord haut du cadre.

    Pour le centrer dans le paragraphe de 10vw de haut, j'ai ajouté l'attribut: line-height:10vw; au paragraphe.

    L'image se centre sur une ligne de 10vw de haut mais ce n'est visible qu'en enregistrement.

    <p style="margin: 1vh auto; width: 10vw; height: 10vw; background: aqua; border: 0.3vh solid white; box-shadow: 0.4vh 0.4vh 0.6vh black; line-height: 10vw;"><img src="http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA@180x180.gif" alt="" /></p>