Ombre image html
Fermé
fhav
Messages postés
252
Date d'inscription
mercredi 11 mars 2009
Statut
Membre
Dernière intervention
25 novembre 2009
-
10 avril 2009 à 17:04
michoko - 1 mai 2020 à 23:57
michoko - 1 mai 2020 à 23:57
A voir également:
- Ombre image html
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Acronis true image - Télécharger - Sauvegarde
- Google recherche par image - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
4 réponses
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
23 janv. 2011 à 11:38
23 janv. 2011 à 11:38
Bonjour,
Voici le code pour rajouter une ombre à un élément (div, paragraphe, image, etc), à mettre dans le fichier de style CSS:
img#IDIMAGE{
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#c8c5c5')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#c8c5c5');
}
remplacer IDIMAGE par l'identifiant donné à l'image. Ou la classe, si y'a plus qu'une image (<img src="...." id="IDIMAGE">).
Et remplacer les valeurs en pixel et autre pour modifier la taille, opacité, couleur et position de l'ombre.
Normalement ça marche pour la plupart des navigateurs, un exemple en action ici:
http://www.pitance-construction.fr/
(en bas, dans le bloc "nos réalisations")
Olivier
Voici le code pour rajouter une ombre à un élément (div, paragraphe, image, etc), à mettre dans le fichier de style CSS:
img#IDIMAGE{
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#c8c5c5')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#c8c5c5');
}
remplacer IDIMAGE par l'identifiant donné à l'image. Ou la classe, si y'a plus qu'une image (<img src="...." id="IDIMAGE">).
Et remplacer les valeurs en pixel et autre pour modifier la taille, opacité, couleur et position de l'ombre.
Normalement ça marche pour la plupart des navigateurs, un exemple en action ici:
http://www.pitance-construction.fr/
(en bas, dans le bloc "nos réalisations")
Olivier
fhav
Messages postés
252
Date d'inscription
mercredi 11 mars 2009
Statut
Membre
Dernière intervention
25 novembre 2009
5
10 avril 2009 à 17:09
10 avril 2009 à 17:09
je l'ai, mais je voudrai le programmer , c'est mieux, lol
carlejack
Messages postés
27
Date d'inscription
vendredi 29 janvier 2010
Statut
Membre
Dernière intervention
2 mars 2014
1
23 janv. 2011 à 10:36
23 janv. 2011 à 10:36
le lien est brisé
Sinon tu peux aller sur ce site, tu pourra modifier tes images et photos, et y ajouter des ombres ou tout autre chose ;-)
Voici la liste des outils disponibles :
- Redimensionnement des images avec taille personnalisée et conservation des proportions
- Ajout d'un label ou texte sur l'image
- Réalisation de coins arrondis avec taille définie en pixels
- Réalisation d'un cadre autour de l'image avec l'ajout possible d'un label en bas du cadre
- Faire une rotation de l'image en degrees
- Création d'une ombre sur la photo
http://www.hebergement-photo.fr
Voici la liste des outils disponibles :
- Redimensionnement des images avec taille personnalisée et conservation des proportions
- Ajout d'un label ou texte sur l'image
- Réalisation de coins arrondis avec taille définie en pixels
- Réalisation d'un cadre autour de l'image avec l'ajout possible d'un label en bas du cadre
- Faire une rotation de l'image en degrees
- Création d'une ombre sur la photo
http://www.hebergement-photo.fr
23 janv. 2011 à 13:00
1 mai 2020 à 23:57
simple ! concret ! efficace ! et ça marche... What Else...
et encore merci...
Michoko (un débutant de 66ans qui s'éclate à découvrir comment marche un site...