Vos images en polaroïd grâce au CSS

Publié le par PêUR

Grâce à cet article vous allez pouvoir donner l'aspect d'un polaroïd à une photo classique en passant par le CSS.

Sommaire:

Exemple
Créer le style
Mieux comprendre pour adapter votre style
   >Ombre portée et border-width
Appliquer le style à vos images
   >L'appliquer par l'éditeur
   >L'appliquer par le code source HTML
Liens connexes

Imprimer l'article

Avant de commencer, sachez que vous obtiendrez un meilleur résultat avec des images carrées (avec le même rapport hauteur/largeur). Pensez aussi à lire l'article Vos premiers pas en CSS qui explique certaines notions abordées dans cet article.

 

Exemple

Avant
Avant

Après
Après
(Ctrl + F5 si l'image est identique à celle du dessus)

Pour obtenir ce résultat, nous allons créer une classe spécifique dans le CSS.

 

Créer le style

Vous pouvez rajouter le code ci-dessous dans votre CSS personnalisé au niveau des /*--- Elements principaux ---*/. Cliquez ici pour savoir comment accéder à votre CSS personnalisé.

 

CSS

img.polaroid {
    padding: 1% 1% 5%;
    background: #fff;
    border: 1px solid #555;
    border-width: 1px 2px 2px 1px;
}

 

Mieux comprendre pour adapter votre style

  • padding: 1% 1% 5%; correspond aux largeurs des bordures blanches du polaroïd, 1% pour le haut, 1% pour la droite et la gauche et 5% pour le bas. Vous pouvez aussi mettre les valeurs que vous souhaitez en px
  • background: #fff; couleur de fond du polaroid, dans mon exemple le fond est blanc
  • border: 1px solid #555; couleur d'encadrement du polaroid.
  • border-width: 1px 2px 2px 1px; largeur de trait des bordures d'encadrement du polaroid. Les valeurs après border qualifient, dans l'ordre, le haut, la droite, le bas et la gauche. Pour créer un effet d'ombre portée on joue sur les différentes valeurs possibles (voir ci-dessous)

Ombre portée et border-width


1px 2px 2px 1px


1px 1px 2px 2px


2px 1px 1px 2px


2px 2px 1px 1px

 

Appliquer le style à vos images

Pour appliquer votre style à vos images, vous avez 2 possibilités:

  • par l'éditeur pour ceux qui ne veulent pas entendre parler d'HTML
  • par le code source HTML.

 

L'appliquer par l'éditeur

Cliquez-droit sur l'image pour laquelle vous voulez appliquer votre style "polaroid", sélectionnez Propiété d'Image (Fig. 1)

Menu contextuel image
Fig.1

Séléctionnez le 4ème onglet "Avancé" de la fenêtre Propriétés d'Image (Fig.2)

Proprités d'Image - Avancé
Fig. 2

Dans le champs Classes de Feuilles de style, saisissez:

Classes de Feuilles de style
polaroid                        

Et cliquez sur le bouton "OK".

ATTENTION: le style n'apparait pas dans l'éditeur d'article, mais uniquement sur votre blog. Si ce n'est pas le cas, pensez à vider le cache de votre navigateur en faisant Ctrl + F5 sur une page de votre blog.

 

L'appliquer par le code source HTML

Pour les amoureux du HTML, vous pouvez appeller la classe "polaroid" de votre css en codant son appel directement dans le code source de votre article:

HTML

<img class="polaroid" src="Url-de-votre-image.jpg" />

 

Liens connexes

  • Polaroid-o-nizer  Pour créer des polaroïds à partir de vos images et les heberger directement sur ImageShack

 

 

A vous de jouer ;-)

 

 

Publié dans CSS

Commenter cet article

Nimo 11/06/2007 09:22

j'ai envoyer tout ca par mail que j'ai recuperer dans les contacts plus haut, j'espere que c'est la bonne adresse

PêUR 12/06/2007 12:22

Echange par mail. Pb réglé.

Nimo 08/06/2007 10:47

Je veux bien mais le problème c'est que je suis actuellement en stage et je dois faire une site web..et je l'ai pas encore mis en ligne pour le moment
je peu te l'envoyer par mail sinon ?

PêUR 09/06/2007 20:24

Le fichier HTML et la feuille de style associée alors.

Nimo 07/06/2007 11:34

Mmh veu pas afficher mon code, excuse moi pour ca, je sais pas si tu peu supprimer ou non mon poste précédent...

donc je vais tenter de ruser lol. Mon lien est encadré d'une balise div avec dans la balise : id="polaroid"

PêUR 08/06/2007 10:40

Peux-tu me donner l'url de la page où tu testes ton code.

Nimo 07/06/2007 11:32

(suite) et mon lien est le suivant :

Nimo 07/06/2007 11:30

Vraiment sympathique ce tuto et merci pour ca ;)
Par contre, j'ai un petit soucis pour appliquer cette effet de polaroid. En effet, le cadre blanc s'élargit sur toute la largeur de ma page et seulement sur le coté droit du cadre...
Pour info j'ai fait mon CSS comme ca :
#polaroid {
padding: 0.5% 0.5% 2%;
background: #fff;
border: 1px solid #555;
border-width: 1px 2px 2px 1px;
}
et mon lien est le suivant :


Merci d'y regarder un oeil ;)