Créer des réflexions réalistes avec CSS

Dans la conception, les réflexions sont des images miroir stylisées d'objets. Même s'ils ne sont pas aussi populaires que les ombres, ils ont leurs moments - pensez à la première fois que vous avez exploré les différents formats de police dans MS Word ou PowerPoint: je parie que la réflexion était votre deuxième style, à côté de l'ombre, qui précède d'autres comme Outline and Glow. Ou peut-être que vous vous souvenez quand les réflexions étaient à la mode lorsque Apple les a utilisés sur à peu près tout.

Les réflexions sont toujours cool! Et contrairement aux années passées, nous pouvons réellement faire des réflexions avec CSS! Voici ce que nous ferons dans cet article:

Il y a deux étapes vers une conception de réflexion:

1. Créez une copie de la conception originale.
2. Style cette copie.

La façon la plus authentique et standardisée d'obtenir une image miroir dans CSS maintenant serait d'utiliser la propriété Element (). Mais il est toujours dans sa phase expérimentale et n'est soutenu que dans Firefox, au moment de la rédaction de cet article. Si vous êtes curieux, vous pouvez consulter cet article, j'ai écrit avec des expériences.

Ainsi, plutôt que l'élément (), je vais ajouter deux des mêmes conceptions et en utiliser une que la réflexion dans mes exemples. Vous pouvez coder cette pièce pour être dynamique à l'aide de JavaScript ou utiliser des pseudo-éléments, mais dans mes démos, j'utilise une paire d'éléments identiques par conception.

 <div>
  <div> TRINKET </div>
  <div> TRINKET </div>
</div>

 .units> * {
  Background-Image: url ('image.jpeg');
  Clip d'arrière-plan: texte;
  Couleur: transparent;
  /* etc. */
}

La conception d'origine est un graphique de texte à élimination directe créé à partir de la combinaison d'une image d'arrière-plan, d'une couleur de texte transparent et de la propriété de clip de fond avec sa valeur de texte.

L'élément inférieur de la paire est ensuite retourné à l'envers et se rapproche de la conception d'origine en utilisant la transformation. Ceci est la réflexion:

 .units>: dernier-enfant {
  Transform: Rotatex (180Deg) Translatey (15px); 
}

L'élément inférieur désormais renversé prendra certains styles pour créer des fonds et d'autres effets graphiques sur la réflexion. Une décoloration progressive de la réflexion peut être obtenue avec une image de gradient linéaire utilisée comme couche de masque sur l'élément renversé.

 .units>: dernier-enfant {
  Transform: Rotatex (180Deg) Translatey (15px); 
  Image de masque: gradient linéaire (transparent 50%, blanc 90%);
}

Par défaut, le mode masque de la propriété Mask-Image est alpha. Cela signifie que les parties transparentes d'une image, lorsque l'image est utilisée comme couche de masque pour un élément, tournez également leurs zones correspondantes de l'élément transparent. C'est pourquoi un gradient linéaire avec une gradation transparente au sommet s'estompe à la fin à la fin.

Nous pouvons également essayer d'autres styles de dégradé, avec ou sans les combiner. Prenez celui-ci avec des rayures, par exemple. J'ai ajouté le motif avec l'effet de fondu d'avant.

 .units>: dernier-enfant {
  / * ... * /
  Masque-Image: 
    Répéter-linéaire-gradient (transparent, transparent 3px, blanc 3px, blanc 4px),
    gradient linéaire (transparent 50%, blanc 90%);
}

Ou celui-ci avec un gradient radial:

 .units>: dernier-enfant {
  / * ... * /
  Masque-image: gradient radial (cercle au centre, blanc, transparent 50%);
}

Une autre idée est de transformer l'image miroir en ajoutant skew () à la propriété transform. Cela donne un peu de mouvement à la réflexion.

 .units>: dernier-enfant {
  / * ... * /
  Transform: Rotatex (180Deg) Translatey (15px) Skew (135DEG) Translatex (30px);
}

Lorsque vous avez besoin du reflet pour être subtil et plus comme une ombre, puis le brouiller, l'éclaircir ou réduire son opacité, peut faire l'affaire.

 .units>: dernier-enfant {
  / * ... * /
  Filtre: luminosité floue (4px) (1,5);
}

Parfois, une réflexion peut également être sombre elle-même, donc, au lieu d'utiliser l'image d'arrière-plan (à partir du design d'origine) ou une couleur de bloc pour le texte, j'ai essayé de donner à la réflexion une série d'ombres translucides de couleurs rouges, bleues et vertes qui vont bien avec le design original.

 .units>: dernier-enfant {
  / * ... * /
  Text-shadow: 
    0 0 8px RVB (255 0 0 / .4),
    -2px -2px 6px RGB (0 255 0 / .4),
    2px 2px 4px RGB (0 255 255 / .4);
}

Ces valeurs RVB () sont-elles bizarres? C'est une nouvelle syntaxe qui fait partie de nouvelles fonctionnalités de couleur CSS passionnantes.

Réunissons toutes ces approches dans une grande démo:

Emballage

La clé d'une bonne réflexion est d'aller avec des effets plus subtils que l'objet principal, mais pas si subtil qu'il est difficile de le remarquer. Ensuite, il y a d'autres considérations, y compris la couleur, la direction et la forme du reflet.

J'espère que vous en avez inspiré! Bien sûr, tout ce que nous avons regardé ici était du texte, mais les réflexions peuvent bien fonctionner pour tout élément frappant dans une conception qui a un espace suffisamment raisonnable autour de lui et peut bénéficier d'une réflexion pour s'élever sur la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!