Encadrer une image

   
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 V1 Over-blog 
 

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

Vous devez être en "mode avancé", fonction à activer dans l'accueil de votre administration, à droite, cliquez "changer de mode".

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

• 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, espacement et contour
  (ce sont elles qui sont intéressantes dans le cas d'un encadrement d'image)
• Lorsque votre tableau sera créé, vous pourrez faire un clic droit et choisir "propriété de la cellule" dans la liste afin de coloriser le fond et le contour.

	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 V1   
  

Vous pouvez, via le CSS, pré-programmer un contour qui sera automatiquement ajouté à toutes vos images dans vos articles, la ligne à modifier est la suivante :

• img     { border:0px solid #FFFFFF;  } /* image */
     

Pour les images des albums, la ligne à modifier est la suivante :

• #photo img {}
    

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 :

• Choisir vos couleurs chez Francisek 
• Choisir vos couleurs harmonisées à l'aide du cercle chromatique chez Francisek
• 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;