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

Repost0
Published by Farfouille - dans Images

Recherche

test du compteur

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