Encadrer une image

Mise à jour le 05/04/2010

   
Mettre en valeur une image avec un cadre peut se faire de diverses façons, soit avec un logiciel de travail d'image, soit directement dans vos articles, en créant un contour ou un tableau autour de votre image, soit via le CSS.  

Créer un cadre-tableau via l'éditeur d'articles Over-blog 
 

Pour tous niveaux (confiance, privilège et premium)

Vous devez être en "édition avancée" dans l'éditeur d'articles.

L'icone de tableaux se trouve dans votre barre d'outils inférieure, c'est une petite représentation de tableau (cela ressemble à un calendrier avec un crayon), positionnez votre curseur à l'endroit désiré dans votre article et ensuite cliquez sur cette icône, une pop-up de travail s'ouvre, vous aurez plusieurs valeurs à y spécifier.

• Les nombres de lignes et colonnes.
  (1 seule de chaque si c'est un encadrement pour une image)
• Les dimensions du tableau
  (vous pouvez laisser les cases vides, le tableau s'adaptera à l'image)
• L'alignement.
  (gauche, droite ou centré)
• Les valeurs en pixel de bordure, d'espacement dans et entre les cellules.
  (ce sont elles qui sont intéressantes dans le cas d'un encadrement d'image)

Si vous cliquez sur l'onglet "avancé", vous pourrez également spécifier une couleur de fond et une couleur de bordure.

	Bordure 10 Espacement 10 Contour 10		bordure et fond de la cellule colorisés
	Bordure 3 Espacement 10 Contour 10		bordure et fond de la cellule colorisés
	Bordure 1 Espacement 0 Contour 10		bordure et fond de la cellule colorisés
	Bordure 0 Espacement 0 Contour 10		bordure et fond de la cellule colorisés

 Note :
Le résultat obtenu est différent selon le navigateur utilisé pour regarder le blog,
le rendu est très différent entre Internet Explorer et Firefox.

A vous de tester à présent ...

Créer un tableau à l'aide de Photoshop  
  

• Tutoriel "Encadrer une photo" sur BlogTrotter
• Tutoriel "Cadre" sur PHOTOSHOP 7.0 / CS - PUBLISHER  

Créer un contour personnalisé via le CSS - Over-Blog  
  

Vous pouvez, via le CSS, programmer un contour qui sera automatiquement ajouté à toutes vos images sur le blog, ou seulement dans vos articles, ou encore dans une colonne bien précise, c'est vous qui choisissez l'endroit où ajouter les informations. 

3 choses sont modifiables :

• La taille de la bordure en nombre de pixels : img { border:0px solid #FFFFFF;  } 
• La couleur de la bordure par son code : img { border:0px solid #FFFFFF;  }
• La forme de la bordure : img { border:0px solid #FFFFFF;  }
    

Comment trouver les codes de couleurs :

• Sélecteur de couleurs  de  yoyodesign 
    

Les différents modèles de bordures :

• solid pour un contour plein
• dotted pour un effet de pointillés
• dashed pour des tirets
• groove ou ridge pour des effets 3D
• double pour une double ligne,
  en ajoutant une valeur totale (2 lignes et espace) par : border-width: 0px;
  ce qui donne par exemple : border:1px double #D2A770; border-width:4px;