Depuis quelques temps, je me demandais si un code (reflection) permettant la réflexion était accepté par Firefox,  jusqu'à ce que je trouve, sur un site, un code qui contournait la difficulté en  retournant l'image par le code de la taille image (scale).

Une fois cette image retournée, il restait à lui donner la forme biseautée pour faire "reflet": pour cela, le code "skew", accepté par FF était parfait.

Touche finale, le dégradé sur l'image, lui aussi accepté par FF, avec les "gradients".

Je vais donc essayer d'apprendre à manipuler ces codes et partager mes "bricolages " avec vous, si cela peut en intéresser quelques un(e)s.

Comme je n'ai aucune formation dans ce domaine, ne m'en veuillez pas si j'écris des bétises... merci d'avance !

Tout d'abord, le site d'où proviennent ces belles photos ICI.

 

Même principe mais copie à gauche au lieu de dessous.
Je rajouterai en fin d'article, le code du montage: ces codes sont longs, à force de rajouter un positionnement ou un paragraphe et c'est pourquoi je voudrais commencer par expliquer la façon dont j'ai avancé dans  ce bricolage, ayant d'ailleurs modifié certaines façons d'aborder mes animations au fur et à mesure.
Une adresse de petite image puis recopiage de cette image identifiée (class=".."), en lui attribuant les critères de retournement symétrique (scale(-0.5), de déformation (skew(30deg)) puis de dégradé couleur (-moz-linear-gradient).
Le dégradé couleur s'applique sur le fond (background) et oblige donc à compliquer le code de base mais on peut ne pas l'utiliser.
Cet article m'a permis de reprendre un peu les couleurs en codes RGBA, plutôt que le RGB, le hexadécimal ou les noms: fort simple !

le code du premier montage (reflet vertical)
<p style="margin: 0px 0px 0px 100px; width: 204px;">
      <img src="http://www.terragalleria.com/images/studio/stud50666.small.jpeg" />
    </p>
<p class="orch" style="width: 204px; height: 153px; clear: both; background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)), url(http://www.terragalleria.com/images/studio/stud50666.small.jpeg); margin: -47px 0px 0px 56px;">&nbsp;</p>
<style type="text/css"><!--
.orch {
   -moz-transform: scaleY(-0.5) skew(30deg);
}
--></style>

Le code du second montage (reflet horizontal)
<p class="orchi" style="width: 149px; height: 192px; float: left; box-shadow: 4px -4px 8px; border: 4px ridge black; background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://www.terragalleria.com/images/studio/stud11288.small.jpeg); ">&nbsp;</p>
<p style=" width: 300px; float: left;">
      <img src="http://www.terragalleria.com/images/studio/stud11288.small.jpeg" width="149" height="204" />
    </p>
<style type="text/css"><!--
.orchi {
   -moz-transform-origin: top right;
   -moz-transform: translate(-130px,28px) scalex(-0.8) skew(0deg,10deg);
}
--></style>

Voilà le premier code sans le dégradé sur l'ombre mais avec une opacité moitié: la petite difficulté pour moi est de maitriser le positionnement car les affichages création et publication sont différents...pourquoi ? Autre paramètre: scaleY ou scaleX selon la position de l'ombre.

<p style="margin: 0px 0px 0px 100px; width: 77px; float: left;"><img src="http://www.decomania.org/gifomania/personnages/majo.gif" /></p>
<p class="pom" style="width: 77px; height: 136px; float: left; clear: both; margin: -45px 0px 0px 65px;"><img src="http://www.decomania.org/gifomania/personnages/majo.gif" /></p>
<style type="text/css"><!--
.pom {
   -moz-transform: scaleY(-0.5) skew(30deg);
   opacity:0.5;
}
--></style>