ajouter du relief aux images

obtenir ces boutons

Ajouter du relief aux images

Cette première image n'est pas en relief :


Un relief a été ajouté à cette image (une ombre apparait à droite et en bas):


Remarque : le cadre blanc est facultatif : pour l'enlever, remplacer dans le code "padding:5px;" par "padding:0px;" (ou le modifier).

POUR AJOUTER UN EFFET DE RELIEF À TOUTES LES IMAGES dans les messages, coller le code suivant dans un gadget HTML/JavaScript :
<style type="text/css">.post-body img
{padding: 5px;background-color: white;
border: 1px solid #ccc;
-moz-box-shadow: 1px 1px 5px #aaa;
-webkit-box-shadow: 1px 1px 5px #aaa;
box-shadow: 1px 1px 5px #555;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa',Direction=135,Strength=4);zoom: 1;}</style>
Cela fonctionne avec Firefox ET avec Internet explorer.

POUR AJOUTER UN EFFET DE RELIEF À CERTAINES IMAGES
,

1) coller le code suivant dans un gadget HTML/JavaScript :
<style type="text/css">.relief
{padding: 5px;background-color: white;
border: 1px solid #ccc;
-moz-box-shadow: 1px 1px 5px #aaa;
-webkit-box-shadow: 1px 1px 5px #aaa;
box-shadow: 1px 1px 5px #555;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa',Direction=135,Strength=4);zoom: 1;}</style>
2) Pour chaque image à mettre en relief, changer <img par : <img class="relief"

Cela fonctionne avec Firefox ET avec Internet explorer.

Rappel : comment ajouter un gadget HTML/JavaScript sur un blog : cliquer ici.

6 commentaires:

Dan a dit…

Magnifique !

Merci pour cette info.

Cordialement

D'ranner Andolsheim a dit…

Génial , en 5 secondes...ça marche !!!

said hamoutii a dit…

thank you

philo a dit…

Est-ce possible pour du text ??? merci d'avance ! très bon blog !

Meiser a dit…

Bonjour.

Je ne connais pas de code pour cela.

Il faudrait choisir une autre police de caractères avec relief, mais c'est peu utile dans la mesure où les visiteurs qui ne l'utilisent pas verront les caractères sans relief avec une police par défaut : arial, ...


Chris Pixl a dit…
Ce commentaire a été supprimé par l'auteur.