5 avril 2010 1 05 /04 /avril /2010 06:30

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  
  

 

 

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;

Partager cet article

Repost 0
Published by Farfouille - dans Images
commenter cet article

commentaires

Carmela 15/07/2016 12:57

Super ton article, Je note ton blog dans mes favoris

Batterie externe 04/09/2013 19:59

Merci pour ce bien bon tutoriel pour encadrer une image! Très bonne continuation

Lisa 09/01/2013 16:49

blog trés intéressant!

piscine en bois sunbay 10/11/2011 23:19


excellent ton billet je note immédiatement ton blog dans mes favoris


Hotel à Paris 27/10/2011 23:01


super ton article j'aime beaucoup ton site
Je le consulte regulierement. BOnne continuation


ANNIE 13/02/2011 17:11


bonjour bon j'ai bien réussi a faire le cadre mais pour la couleur ??????
merci


Mamancalins 30/07/2010 09:59


Merci pour tes astuces, tu es vraiment merveilleuse car tu donnes un bon coup de pouce ! Je voudrais mettre ton lien sur mon blog, tu es d'accord ? Gros bisous à toi.


domicuisine 24/02/2010 23:34


bjr, moi j'ai le soucis contraire, quand over m'a fait passer de 3 à 2 colonnes j'me suis retrouvées avec toutes mes images et gifs encadrés et j'aimerais retirer ce machin
voici la partie de mon CSS concernée (je crois) peut-tu me dire où je dois changer ??

body {margin:0px; padding:0px; background-color:#000000 ; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#FFF;}
h1 {color: #CCCCCC; font-size: 20px;}
h2 {color: #CCCCCC; font-size: 15px;}
h3 {color: #CCCCCC; font-size: 12px;}
a {text-decoration:none; color:#FFF; font-size:110%;}
a:hover {text-decoration:none; color:#FF6600;}
legend {color:#CCCCCC; padding-left:5px; padding-right:5px;}
li {list-style-type:none;}
img {border:0px none;}
input {border:solid 1px #666; font-size:100%; background-color:#FFF; color:#000000;}
#global {margin:auto;background-color:#333333; border:1px solid #666}

merci d'avance ;-)


Petit Poucet rêveur 30/07/2009 21:22

Bonsoir Farfouille,

J'essaie désespérément de trouver un moyen d'enlever la bordure noire autour d'une photo mais cela semble impossible...Y a-t-il un truc ?...Pour une blogueuse débutante pas du tout technique mais qui a envie d'y arriver...

catherine 21/05/2007 18:29

Dans la V2 La bordure et l'espacement restent blanc et grisé (donnant un effet 3D), seul le contour change de couleur grace à la colorisation du fond de la cellule. Quant à la bordure de la cellule elle est si fine qu'on la voit à peine.
Votre exemple rend bien parce que l'espacement est vert foncé entouré d'une bordure blanche et que par contraste la bordure de la cellule se voit mieux.
Comment puis-je arriver au même résultat. Je n'ose pas toucher au CSS parce que quand vous parlez de changer la bordure je ne sais pas s'il s'agit de celle du tableau ou de celle de la cellule.
Merci (j'espère avoir été suffisamment claire mais je n'en suis pas sûre).

Farfouille 21/05/2007 21:44

La V2 modifie beaucoup de choses, le mieux est de tester, retester et reretester jusqu'à trouver le modèle idéal.Via le CSS, ce n'est pas au niveau des tableaux mais autour des images elles même que l'on ajoute une bordure, mais je n'ai pas encore testé en V2Une possibilité est de créer les tableaux en mode source directement, sans utiliser l'outil de l'éditeur, c'est assez simple si l'on a quelques notions de HTML, le mieux est de chercher un tutoriel via google afin d'avoir toutes les informations correctes, en voilà un mais il en existe beaucoup d'autres : http://www.commentcamarche.net/html/htmltable.php3

stella 04/11/2006 20:59

Je viens de faire une petite visite d'info mais je reviendrai assurément car je suis tellement nulle que j'aurai besoin de tous ces précieux conseils. Merci pour ça,

Farfouille 04/11/2006 22:40

personne n'est "nul", il faut juste débuter  ;-)

Elivince 15/10/2006 23:48

GE-NIAL ! Aides très précieuses que tu nous offres. Merci

:0091: 21/07/2006 18:25

bordure et fond
de la cellule
colorisés

je n'y arrive pas...il me colorise que l'extérieur...alors voilà la question : comment fais-tu pour n'avoir que l'intérieur ?
Merci...je fais repasser....
c'est la fête nationale en Belgique le 21 ...non ?

Farfouille 21/07/2006 18:35

pour coloriser le fond, il faut une valeur de contour, cette valeur de contour sera autour de ton image, c'est la partie que tu verras du fond pour coloriser le fond, c'est après la création du tableau, tu vois le tableau formé dans la fenêtre de l'éditeur d'article, tu positionne ton curseur dessus, tu fais un clic droit et choisis "propriétés de la cellule", tu auras une fenêtre de travail qui s'ouvrira et tu pourras choisir la couleuret oui c'est la fête nationale en Belgique  ;-)

:0091: 21/07/2006 08:01

un cadre simple à mettre en couleur no prob...mais composé comme tel...il faut que je revoye....

:0091: 20/07/2006 08:23

à bientôt....j'ai appris quelque chose......encadrement ok...mais pas la suite...merci

Recherche

test du compteur

Il y a actuellement    personnes connectées à Over-Blog dont    sur ce blog