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 | ||
| Bordure 3 Espacement 10 Contour 10 |
| bordure et fond | ||
| Bordure 1 Espacement 0 Contour 10 |
| bordure et fond | ||
| Bordure 0 Espacement 0 Contour 10 |
| bordure et fond |
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
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 :
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;
