View Single Post
Old 06-14-2012, 04:22 AM   #152
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
Bonjour

Code pour les images

J'ai admiré dans le nouveau guide utilisateur de Sigil un code remarquablement compact et efficace pour les images. Il s'agit de l'image de couverture et des images standard centrées.

Spoiler:

Code:
1. - Insérer un container SVG (600x800)

<div class="coverimage">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="800" width="600" xlink:href="../Images/cover.png"></image>
    </svg>
  </div>

2. - Insérer une image centrée non pleine page

<div class="image"><img alt="" src="../Images/image001.png" /></div>

3. - Ce que vous devez rajouter sur votre feuille de style

div.coverimage {
	text-align: center;
}

div.image {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
	page-break-inside: avoid;
}

img {
	max-width: 100%;
}

Rajouter une ombre portée

L'auteur du guide a fait des copies d'écran au format png et a ensuite rajouté manuellement une ombre portée en utilisant Gimp. Il aurait été aussi possible d'utiliser un traitement par lot avec la commande suivante:
Code:
for file in *.png; do convert $file \( +clone -background black -shadow 40x2+10+15 \) +swap -background none -layers merge +repage shadow-$file; done
Ce code produit une image clonée nommée avec le préfixe "shadow". Elle utilise un arrière-plan transparent puisqu'il s'agit d'images png.
roger64 is offline   Reply With Quote