CSS3 Image Reflection [Conseils CSS3]
Jusqu'à présent, nous avons discuté de nombreuses nouvelles propriétés dans CSS3. Au-delà de cela, il existe quelques autres propriétés qui ne figurent pas actuellement dans les spécifications officielles CSS3 et qui valent la peine d’être testées. boîte-réflexion propriété initiée par Kit Web. Cette propriété peut refléter les objets spécifiés.
Réflexion de base
L'implémentation de base est assez intuitive. Disons que nous voulons la réflexion en dessous de l'objet réel. Nous pouvons écrire:
img -webkit-box-reflect: ci-dessous;
Cet exemple montre comment on réfléchit une image au dessous de (la position) l'objet. Mais, dans ce cas, nous pouvons également porter la réflexion à la droite, la gauche, et au dessus de.
Décalage de réflexion
Décalage est utilisé pour définir le décalage entre la réflexion et l'objet réel réfléchi. Voyons l'extrait de code ci-dessous;
img -webkit-box-reflect: moins de 10 pixels;
Dans le code ci-dessus, nous avons séparé le reflet de l'objet réel en 10px;
- Voir la démo
Masquage avec dégradés
L'effet de réflexion que nous voyons couramment est le fondu au fond et n'affiche que la moitié ou moins de l'objet réel. Pour reproduire ce genre d’effet, on peut appliquer Gradients CSS3 masquer l'objet, comme tel;
-webkit-box-reflect: au-dessous de 0px -webkit-gradient (linéaire, gauche, supérieur, inférieur gauche, de (transparent) à (rgba (250, 250, 250, 0,1));
Ce code donnera la présentation suivante.
Nous pouvons aussi utiliser arrêt de la couleur pour contrôler les transitions et rendre la réflexion plus agréable:
img -webkit-box-reflect: au-dessous de 0px -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (transparent), couleur-stop (70%, transparent), à (rgba (250, 250, 250, 0,1 )));
- Voir la démo
Alternatives pour Firefox
Cette propriété ne fonctionne toutefois que dans les navigateurs Webkit (ce qui signifie Safari et Chrome) pour le moment. Pour obtenir le même effet dans Firefox, vous avez besoin d’une autre route: utiliser -moz-element () une fonction. Cette fonction va essentiellement générer ou reproduire le contenu d’éléments HTML spécifiques. Jetons un coup d'oeil à l'exemple suivant;
Nous avons une image enveloppée dans un Et, pour tenir la réflexion, nous allons utiliser le Malheureusement, il n’existe toujours pas de moyen facile de créer un agréable effet de réflexion dans Firefox en utilisant cette pratique. Le code ci-dessus créera simplement le reflet, sans effet de fondu.réfléchir au moz id;
:après pseudo-élément, comme suit; # moz-reflect: after content: ""; bloc de visualisation; arrière-plan: -moz-element (# moz-reflect) no-repeat; largeur: auto; hauteur: 375px; marge inférieure: 100 px; -moz-transform: scaleY (-1);
-transformation de moz avec une échelle négative est utilisé pour retourner l’objet généré à l’envers. Assurez-vous également que la taille est assez précis pour l'objet réel la taille éviter les lignes inutiles pour positionner le reflet.Références supplémentaires
