La propriété box-reflect n'est qu'un des nombreux nouveaux effets CSS3 impressionnants que Webkit apporte à la table. Malheureusement, ce n'est pas le plus facile à utiliser. Il y a beaucoup de syntaxe qui peut prêter à confusion et aujourd'hui, nous allons le passer en revue et l'expliquer en détail afin que vous puissiez comprendre.
Il est important de noter que, à ce stade, Box-reflect est uniquement pris en charge par les navigateurs Webkit. C'est un effet visuel superflu que vous pouvez utiliser tant que vous acceptez qu'il ne restitue que dans Chrome et Safari.
Syntaxe de base: la direction est tout ce dont vous avez besoin
Malgré le fait que, dans la pratique, c'est si complexe, -webkit-box-reflect commence extrêmement facile à utiliser. Tout ce que vous devez faire pour ajouter une réflexion à un élément est de déclarer la propriété et de définir le direction valeur.
Dans l'exemple ci-dessus, je règle le direction valeur à au dessous de. 100% du temps ou plus, c'est la seule valeur dont vous aurez besoin. Mais au cas où vous deviendriez vraiment créatif, vous pouvez déclarer un reflet dans l’une des quatre directions suivantes:
Quelle que soit la direction que vous choisissiez, le navigateur le choisira comme point d’ancrage et inversera l’image. Ainsi, par exemple, si vous avez changé notre exemple initial en une valeur de droite, vous obtiendrez ce qui suit.
Décalage
Après le direction valeur, vous pouvez éventuellement définir un décalage valeur. C'est assez basique et met simplement la distance entre l'image et son reflet, presque comme si l'image flottait sur une surface en verre. Voici comment ça fonctionne:
Voici un aperçu de la différence entre une valeur de 0? et une valeur de? 20px ?.
Chose intéressante, vous n'êtes pas limité aux pixels en tant que mesure. Voici quelques autres valeurs qui fonctionnent également:
Gradients Webkit
Pourquoi parle-t-on de dégradés de Webkit, n'est-ce pas un article sur les réflexions? La réponse est que la troisième valeur, masque-boîte-image, utilise divers outils compliqués pour obtenir des effets avancés, le principal étant -webkit-gradient. Vous ne pouvez simplement pas comprendre le fonctionnement des réflexions CSS sans d'abord comprendre les gradients.
Il existe plusieurs types de dégradés et les navigateurs diffèrent par leur syntaxe, mais pour les besoins de cet article, nous nous en tiendrons aux gradients linéaires Webkit. Passons directement au problème et examinons le code d'un dégradé Webkit de base.
Ce code produit le dégradé suivant:
Ce code peut être déroutant alors décomposons-le. Il y a trois parties principales: le type, le point de départ / d’arrêt et de / à la couleur. Il existe deux types différents mais nous n'avons pas besoin d'entrer dans les dégradés linéaires, donc cette valeur restera la même.
Les points de départ et d’arrêt vous permettent d’incliner votre dégradé dans la direction que vous utilisez. Dans l'exemple ci-dessus, nous avons commencé en haut au centre et terminé en bas au centre, ce qui a permis d'obtenir une graduation de couleur parfaitement verticale. Cependant, si nous commençons à jouer avec ceux-ci, nous pouvons obtenir des résultats différents.
Cette fois, nous avons commencé en haut à gauche et nous avons terminé en bas à droite, ce qui donne un dégradé angulaire comme celui ci-dessous.
De même, le de et à les valeurs vous permettent de définir la couleur au début et à la fin du dégradé. Dans les exemples ci-dessus, nous sommes passés du noir au blanc, mais vous pouvez utiliser les couleurs de votre choix dans le format de couleur CSS souhaité.
Voici un autre exemple qui crée un joli dégradé rouge.
Arrêts de couleur
En plus des points de départ et d’arrêt, vous pouvez également déclarer divers arrêts de couleur en cours de route. En gros, vous dites au navigateur, au point x, rendre le dégradé de cette couleur.
Voici un exemple de dégradé allant du noir au noir, ce qui donnerait normalement une couleur unie. Cependant, nous avons ajouté une limite de couleur à 50% et l'avons définie en blanc, ce qui crée un dégradé qui commence au noir, passe au blanc à la moitié, puis revient au noir.
Masquer la réflexion
Maintenant que nous savons comment fonctionnent les gradients, nous avons le troisième élément de notre puzzle de réflexion Webkit. Après avoir déclaré le direction et décalage valeurs, votre reflet semble toujours ennuyeux, mais grâce à un masque de dégradé, nous avons tout à coup plus de contrôle.
Jetons dans la syntaxe du dégradé et voyons ce que nous proposons:
Comme vous pouvez le voir, ici nous sommes allés de haut en bas et avons lancé une balle courbe en déclarant le de couleur aussi transparente. Comme nous construisons essentiellement un masque, la couleur transparente permettra au dégradé de s’affaiblir sur n’importe quel fond. De même, le blanc du dégradé représente simplement une opacité totale pour la réflexion en ce point.
Ce code donne l'image suivante:
Comme vous pouvez le constater, l’effacement progressif de la réflexion avec le dégradé permet un certain niveau dynamique qui donne un indice plus réaliste que celui que nous avions atteint auparavant. Une des choses les plus déroutantes ici est que, même si nous avons déclaré transparent en haut du dégradé et complètement opaque en bas, on obtient exactement le contraire! En effet, notre reflet est une version à l'envers de l'image, donc tout est retourné.
Si cela vous rend confus, tout ce que vous avez à faire est d’inverser toutes les valeurs de dégradé. Le code suivant donnera le même dégradé et sera peut-être plus facile à comprendre car il commence par un blanc et se termine par un transparent, tout comme le résultat ci-dessus.
Raccourcir la réflexion
À ce stade, vous avez peut-être remarqué que notre réflexion est assez longue. Dans les cas où vous travaillez avec une grande image comme la nôtre, vous souhaiterez probablement raccourcir un peu le dégradé pour le rendre plus transparent.
Alors, comment cela fonctionne-t-il? C’est là que ces arrêts de couleur entrent en jeu. Ce que nous voudrons faire est de créer un dégradé de transparent à blanc, puis d'insérer un arrêt de couleur transparent quelque part sur le parcours, ce qui effacera effectivement le reflet plus tôt. Jetons un coup d'oeil au code.
Réduire l'opacité de la réflexion
Toutes les discussions que j'ai vues sur la boîte-réflexion s'arrêtent là. Malheureusement, je pense que notre gradient n'est toujours pas très crédible. Chaque fois que je crée des réflexions dans Photoshop, je réduis toujours l'opacité du calque de réflexion. Rarement, verriez-vous un vrai reflet aussi net que l'objet sur lequel il réfléchit!
Donc, à ce stade, notre réflexion semble absurde et nous avons besoin d’un moyen de réduire son opacité. La solution évidente que je pensais d'abord essayer était la bonne: rgba. Puisque les couleurs que nous déclarons dans le dégradé ne font que définir la transparence du dégradé, utiliser rgba au lieu du blanc pur nous permet de réduire l’opacité et de créer un résultat beaucoup plus crédible.
Dans le code ci-dessous, j'ai simplement échangé le mot? Blanc? pour son équivalent rgba à 20% (0,2).
Voici deux résultats différents avec seulement le alpha valeur de la propriété rgba en cours de manipulation. Comme vous pouvez le constater, le résultat est bien meilleur que celui obtenu avec du blanc uni!
Utiliser un masque d'image
Voici un petit truc que j'ai appris de Peter Gasston dans The Book of CSS3. Au lieu de construire votre masque à l'aide de dégradés CSS, vous pouvez simplement utiliser une image. En utilisant cette méthode, vous pouvez obtenir des résultats assez fous.
Tout ce que vous faites est de déclarer une URL source comme si vous définissiez une image d'arrière-plan sur un élément. Malgré l'inconvénient d'être obligé de charger une image, le code est en réalité beaucoup plus propre.
Pour tester cela, j'ai créé et enregistré deux fichiers PNG distincts avec des arrière-plans transparents. L'un ne contient que du noir uni tandis que l'autre utilise un dégradé radial.
Lorsque nous utilisons l'extrait ci-dessus pour appliquer ces images à notre réflexion, voici ce que nous obtenons:
Pendant toute ma vie, je ne peux pas penser à un usage pratique de cette technique, mais si vous y mettez une pensée créative, les possibilités sont infinies.
Implications de la mise en page
Quand vous utilisez -webkit-box-reflect, il est important de comprendre comment le reflet interagira avec votre mise en page. Curieusement, ce n'est pas le cas!
Le reflet est davantage une image d’arrière-plan qu’un élément qui affecte le déroulement du document. Pour voir comment cela fonctionne, voici deux exemples, le premier avec une réflexion et le second sans.
Comme effet secondaire étrange et inattendu, notez que, même si le reflet de gauche ne modifie pas la mise en page, il perturbe en quelque sorte la couleur du texte.
Combinaison avec d'autres effets CSS
Une dernière remarque sur les réflexions: vous pouvez les combiner avec d’autres effets CSS purs pour obtenir des résultats exceptionnels. Par exemple, voici un exemple d'image avec des coins arrondis et une autre avec une bordure appliquée. Les deux effets sont parfaitement représentés dans la réflexion.
Cependant, ce n'est pas le cas que tout Les effets CSS sont reproduits dans la réflexion. Par exemple, voici ce qui se passe si vous lancez un boîte ombre. Remarquez comment cela apparaît uniquement sur l'image d'origine et non dans le reflet.
Conclusion
Pour résumer, tout ce dont vous avez besoin pour créer une réflexion de travail est un direction valeur. Cependant, en utilisant direction, décalage et un pente ensemble, vous pouvez obtenir de bien meilleurs résultats et éliminer progressivement le gradient.
L'effet est grandement amélioré si vous utilisez rgba pour réduire l'opacité globale de la réflexion. Vous pouvez ensuite appliquer des bordures, des coins arrondis et divers autres effets, qui seront automatiquement appliqués au reflet.
Enfin, si vous voulez devenir vraiment fou, vous pouvez utiliser une image pour masquer le reflet. L'image est utilisée uniquement pour appliquer une transparence. Ainsi, lorsqu'il y a une couleur unie, votre reflet sera opaque et s'il y a une transparence, votre reflet sera transparent.