{Geek} Définir le cadre de ses photos

Parmi toutes les questions que je reçois dans ma boîte mail, entre les avis sur mes recettes (merci pour vos petits mots si gentils d’ailleurs) et les questions « tricot », il y en a vraiment beaucoup concernant les blogs et la mise en page (dont la fréquence est apparemment due à mes deux articles sur la migration de mon blog vers WordPress).

Du coup, aujourd’hui, (et puis n’ayant pas de cuisine jusqu’au 20 novembre à peu près, argh !) je commence une petite série concernant la définition des cadres autour des images. J’espère que ça vous plaira !

Juste un petit rappel de base en webdesign : il vaut toujours mieux utiliser une seule définition de largeur d’image dans les articles. Cela permet d’unifier une grosse partie des visuels du blog et c’est beaucoup plus agréable pour l’utilisateur. Pour unifier cette largeur automatiquement, par exemple sur 100% de la largeur des articles, il faut donc mettre :
img {
width:100%;
height:auto;
}


Pour moi, par exemple, je définis ça à l’intérieur de mes articles, pour la classe article, donc cela donne 
.article img {
width:100%;
height:auto;
}


Bref. Moi, j’ai décidé de ne pas définir de bordure donc mon code reste tel quel. Si vous voulez ajouter une bordure (pour l’instant, 1 pixel noir) il faut déjà définir l’espace qui va séparer cette bordure de l’image : le padding. On peut coller la bordure à la photo :

img {
padding:0;
border: solid 1px black;
width:100%;
height:auto;
}


Ou bien, on peut espacer légèrement la bordure de la photo :

img {
padding:10px;
border: solid 1px black;
width:100%;
height:auto;
}


On remarque que la taille de l’image s’adapte automatiquement.

Après, on peut définir la bordure elle-même (vous remarquerez que j’utilise la forme « courte »). D’abord la couleur : par exemple je vais prendre un gris clair.

img {
padding:10px;
border: solid 1px #ccc;
width:100%;
height:auto;
}


On peut aussi mettre la bordure à 2 pixels.

img {
padding:10px;
border: solid 2px #ccc;
width:100%;
height:auto;
}


Après, il existe plusieurs styles de bordure : dotted pour les pointillés (points), dashed pour les pointillés (traits), double pour une double bordure :

img {
padding:10px;
border: dotted 1px #ccc;
width:100%;
height:auto;
}



img {
padding:10px;
border: dashed 1px #ccc;
width:100%;
height:auto;
}



img {
padding:10px;
border: double 3px #ccc;
width:100%;
height:auto;
}


Il en existe d’autres, dont je suis moins fan :


img {
padding:0px;
border: groove 5px #ccc;
width:100%;
height:auto;
}



img {
padding:0px;
border: ridge 5px #ccc;
width:100%;
height:auto;
}



img {
padding:0px;
border: inset 5px #ccc;
width:100%;
height:auto;
}



img {
padding:0px;
border: outset 5px #ccc;
width:100%;
height:auto;
}


Voilà, j’espère que cela vous aura donné des idées. La prochaine fois, je parlerai de la personnalisation et des ombres.

Bonne semaine !