Des cadres pour ses photos de vacances

Un cadre semi-transparent


En jouant sur l'opacité et la transparence, d'un bloc div, nous allons créer un cadre semi-transparent.

Un bloc extérieur va recevoir la photo comme image de fond et le bloc intérieur, sans contenu, servira à définir la bordure.

<div style="width: 320px; height: 210px;
margin: auto; padding: 0;
background-image: url(URL de l'image);
border: 1px solid #000;"><div style="width: 300px; height: 190px;
border: 10px solid #fff;
filter:alpha opacity=50);
-moz-opacity:.50;opacity:.50;
-khtml-opacity: 0.5;"> </div> </div>

Important

La saisie des 2 blocs doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 10.
Le bloc interne fait donc 320 - 2 * 10 = 300 par 210 - 2 * 10 = 190.

Chardonne - Mont-Pélerin : La carte

Un cadre doré


Un seul bloc div contenant l'image. Le cadre est réalisé par la propriété bordure. La couleur dorée, gold correspond au code couleur #ffd700.

<div style="margin: auto; width: 332px; height: 222px; border:1px solid #000; background: #ffd700;"><a href="URL du lien" target="_blank"
title="titre du lien"
style="background-color: transparent;
border: 0 none; text-decoration: none;"><img src="URL de l'image" style="width: 320px; height: 210px; border: 6px solid #ffd700;" title="titre de l'image" alt="texte alternatif image" /></a></div>

Important

La saisie du bloc doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 6.
Le bloc fait donc 320 + 2 * 6 = 332 par 210 + 2 * 6 = 222.
Pour certain template de Blogger, ajouter margin 0; et padding: 0; dans le style de l'image (*).

Chardonne - Mont-Pélerin : La carte

Un cadre façon Polaroid


Un bloc div externe contenant la photo et un bloc div pour le bas, simulant la bande papier du polaroid.

<div style="width: 320px; margin: auto; padding: 15px;
background-color: #eeeecc; border: 1px solid black;
text-align: center; font-size: 0.75em;"><a href="URL lien sur l'image" title="titre du lien dur l'image" target="_blank"
style="border: 0 none; text-decoration: none; background-">
<img style="width: 320px; height: 210px; border: 1px solid black;"
src="URL image" title="titre image" alt="texte alternatif image" /></a><div style="margin: 10px auto 10px auto; ">
<a href="URL titre" target="_blank" title="titre"
style="border: 0 none ; text-decoration: none;">Titre</a></div></div>

Important

La saisie des 2 blocs doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 15. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).

Chardonne - Mont-Pélerin - La carte

Un cadre double


Un seul bloc div contenant la photo.
C'est la bordure du bloc qui fait office de cadre.

<div style="border: medium double #558866; padding: 6px; background: #eeeecc;
width: 320px; margin: auto; text-align: center; font-size:11px; font-weight: bold; color: #a90707;">Titre de l'image<br/><br/><a href="URL lien sur l'image" title="titre du lien sur l'image" style="border: 0 none; text-decoration: none;" target="_blank"><img src="URL image" style="border: 1px solid #000; width: 320px; height: 210px; margin: 3px 0;" title="titre image" alt="texte alternatif image" /></a><br/><br/><a href="URL lien" title="titre du lien" target="_blank" style="border: 0 none ; text-decoration: none;">Lien</a></div>

Important

La saisie du bloc doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure latérale de 6. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).

Château de Chardonne

Chardonne - Mont-Pélerin - La carte

(*) : Les corrections spécifiques, selon le template de Blogger utilisé


Il s'agit de corriger le style du message qui spécifie le style par défaut d'une image, par exemple pour ce blog :

.post img
{
margin-top:0;
margin-right:0;
margin-bottom:5px;
margin-left:0;
padding:4px;
border:1px solid #bbbbbb;
}

Afficher ses photos sur Blogger

Le gadget (widget) Diaporama de Blogger et les Flux Media RSS

Une ligthbox (slimbox) pour afficher ses images

Encadrer ses textes

Un article du Blog d'Aide pour Blogger

En savoir plus

Utiliser box-shadow pour ombrer ses blocs

Crédit

Photos, Regis Colombo et Clos Domaines et Châteaux