4 novembre 2013

{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;
}

frivolite-1000

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;
}

frivolite-1000

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

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

frivolite-1000

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;
}

frivolite-1000

On peut aussi mettre la bordure à 2 pixels.

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

frivolite-1000

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;
}

frivolite-1000


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

frivolite-1000


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

frivolite-1000

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


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

frivolite-1000


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

frivolite-1000


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

frivolite-1000


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

frivolite-1000

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 !

Catégorie : DIY et geekeries | Tags :
3 commentaires

Commentaires

Vous pouvez poster un commentaire ou laisser un trackback à cette adresse.

    leblogfemme | Posté le 11 décembre 2013

    Trés artistique la photo 🙂

    permalink | Posté le 11 décembre 2013

    Jaime beaucoup ^^

    Audrey | Posté le 10 février 2014

    Merci pour cet article, auriez-vous une recette originale et compatible avec le régime kousmine, sans gluten ni produits laitiers (plus d’infos ici : http://regime-kousmine.fr/regime-kousmine-seignalet.html) pour la Saint Valentin.
    Je trouve rien sur la toile et je commence à désespérer ! Merci d’avance.
    Audrey

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Dans votre commentaire vous pouvez utiliser ces balises : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Tous les textes et les photos présents sur ce blog m'appartiennent, sauf mention contraire. Merci de ne pas les utiliser sans mon autorisation.
Copyright © 2008-2016 Delphine Anquetil. All rights reserved. | Design & thème par Delphine Anquetil.