Un tout petit code qui va vous permettre de mieux présenter les photos publiées dans vos billets. Ça affectera toutes les photos postés depuis que vous aillez publié depuis la création de votre blog/site sauf si vous les aviez stylisé autrement en insérant un inline style à chaque fois, mais je sais que ça n'a jamais été le cas :)
L'astuce consiste à créer une marge de chaque côté de la photo pour l'empêcher d'être chevauché par le texte qui doit l'envelopper normalement, puis créer une bordure d'une largeur d'un pixel de chaque côté aussi, enfin ajouter un espace entre bordures et bords de l'image, préférablement ne contenant aucun encadrement, sinon on aurait pas besoin de bordures supplémentaires. Tout celà va se faire à l'aide d'un petit code CSS qui pourrait tenir sur une seule ligne mais que je metterais sur cinq petite lignes pour que ce soit plus claire et meiux présenter.
img{
margin:8px;
border: 1px dashed #666666;
padding: 5px;
}
Décryptage :img : C'est pour dire que le code contenu entre les accolades '{' et '}' ne va affecter que les images insérées à l'aide de la balise/tag <img> et c'est généralement le cas lorsqu'on inclut une image dans un billet/poste/article, sauf spécification contraire avec du code inline.
margin : c'est la marge entre image et texte dont je parlais plus haut. Ici j'ai utilisé une marge de huit pixels, mais vous pouvez mettre une autre valeur de votre choix en fonction de vos préférences. Jouez avec!
padding : c'est l'espacement entre la bordure qu'on vient d'ajouter et les bords de l'image/photo. Encore vous pouvez changer la valeur du padding selon votre guise. Jouez encore!
border: c'est la bordure extérieure,
- 1px: c'est l'épaisseur de la bordure. Ajustez la comme vous le voulez.
- dashed: Indique le nom du style de la bordure. ça peut prendre d'autres valeurs( solid, dotted, double, groove, inset, outset,ridge ..). Testez chacune de ces valeurs pour voir lequel de ces styles vous préféreriez.
- #666666: C'est le code hexadécimal de la couleur grise utilisée pour les bordures de l'image de ce billet. Choisissez une autre couleur s'il y a lieu, en fonction de la couleur de fond sur lequel repose la photo et/ou selon votre propre goût.
Maintenant il ne vous reste plus que d'insérer le style/code - après y avoir introduit des changements selon vos propres inspirations/besoins - quelque part dans le code source de votre blog/site partie contenant le style
CSS ou bien directement dans la feuille de style CSS si celle-ci vient séparée du document
HTML, et ce juste après une accolade fermante '}'.
Nota Bene :- Le code doit être inscrit tout en lettres minuscules.
- N'oubliez surtout pas les point-virgule à la fin de chaque ligne comme dans l'exemple.
Astuce :Comme signalé précédemment en parlant du sélécteur 'img', ce style serait appliqué partout et affecterait toutes les images cependant et si l'on veut qu'il n'affecte que les images contenues dans un paragraphe ( cas des articles publiés dans un blog/site ) et ne pas toucher aux images figurant dans la sidebar ou le footer/pied de page par exemple, on ajoutra un simple p au début suivi d'un espace pour la séparer de 'img'. On écrirait ainsi:
p img{
margin:8px;
border: 1px dashed #666666;
padding: 5px;
}
Apprenez un peu plus :Pour en savoir plus sur CSS visiter ce
site, vous y apprendrait beaucoup si ça vous tente.
Voilà! J'espère avoir été suffisament explicite sinon vos questions/commentaires sont les bienvenus, je veuillerais à y répondre as soon as possible :)
Bon blogging à tous et à bientôt !
Grandiose!! Sublime!! Surprenant!!..., autant de termes qui me venaient à l'esprit en découvrant/dégustant la créativité des créateurs de ce site, japonais à ce qu'il paraît. Le site en lui même est très simpliste chromatiquement avec du noir/gris/blanc/rouge.. mais le contenu.. animations, son, 3D...est tout sauf simple quoique pas très accessible/usable mais bon..c'est pas le sujet now :) .Une fois sur le site cliquez sur l'un des liens "enter tokyoplastic archive" ou "enter tokyoplastic V2".
