Ajoutez une poussée d'objectif CSS sur des photos pour une touche brillante

JJ Abrams电影的忠实影迷一定对影片中精巧的剧情、妙语连珠的对话，以及标志性的变形镜头光晕印象深刻。 Les cinéastes tels que Abrams utilisent intelligemment les poussées d'objectifs pour ajouter une touche de réalisme "fait à la main" au film. Cette astuce est facilement copiée dans des outils comme Photoshop, puis ajouté à notre site Web en tant qu'image raster.

但如果我们想在无需使用图像编辑工具的情况下实现同样的镜头光晕效果呢？ Nous pouvons créer une poussée d'objectif CSS qui ajoute une texture cinématographique à nos images de galerie, aux photos d'arrière-plan ou aux avatars des utilisateurs.

Il existe différents types de fusées éclairantes sur la photographie. Ce que nous avons affaire, c'est un phénomène appelé artefacts qui laissent de petits endroits où la lumière entre et se reflète de la surface de l'objectif, en forme d'ouverture de la caméra.

Voici un excellent exemple de la poussée de l'objectif que nous sommes sur le point de faire, et naturellement, il est prélevé directement des images fixes du film JJ Abrams:

La fusée de lentille au-dessus contient plusieurs parties. Lisons-les afin que nous sachons ce que nous visons:

1. La source de lumière centrale apparaît comme une boule de lumière lumineuse.
2. Il existe des rayons elliptiques horizontaux - la lumière déformée et floue qui forment une forme elliptique allongée.
3. La lumière aléatoire émet de la source de lumière centrale à différents angles.

Commençons par l'élément HTML ci-dessous qui correspond au composant Halo. Il y a une source de lumière centrale et deux halos circulaires qui s'écartent de la diagonale, de trois éruptions de lentille horizontale et de trois halos coniques en forme de rayon.

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

Enfin, pour que notre poussée d'objectif soit vraiment superposée à l'image, sa source de lumière centrale doit être réglable. De cette façon, nous pouvons le placer sur une source de lumière existante de confiance sur l'image sans se chevaucher avec aucun visage.

Contexte et source lumineuse pour la poussée de l'objectif CSS

Commençons par l'arrière-plan noir et la source de lumière centrale de l'éclat de l'objectif CSS. La plupart des gradients du réseau sont des gradients linéaires avec des transitions de couleurs solides, mais nous pouvons leur appliquer des canaux alpha, ce qui est en fait un bon moyen de produire un effet lumineux. Le gradient radial circulaire avec plusieurs couches de couleurs translucides nous donne un bon effet central de caméra.

 Contexte: gradient radial (
  cercle le plus proche au centre,
  HSL (4 5% 100% / 100%) 0%,
  HSL (4 5% 100% / 100%) 15%,
  HSL (4 10% 70% / 70%) 30%,
  HSL (4 0% 50% / 30%) 55%,
  HSL (4 0% 10% / 5%) 75%,
  transparent 99%
));
Filtre: Blur (4px);

Curieux de la syntaxe HSL? Il est nouveau et semble être l'orientation future qui définit la transparence alpha dans toutes les fonctions de couleur CSS.

Notez que nous utilisons le filtre CSS Blur ici pour que le dégradé ressemble plus à une couche lumineuse dispersée.

Maintenant que nous savons comment ajouter un halo circulaire, nous ajouterons également un halo plus grand et diffus derrière la source lumineuse, ainsi que trois halos supplémentaires à un angle de 45 degrés au centre pour rendre l'effet plus réaliste.

Définir les rayures lumineuses horizontales

Commençons par un halo horizontal. Nous pouvons prendre certaines options et un gradient elliptique très mince serait le moyen le plus simple de le faire. Cependant, j'ai remarqué que les fusées éclairantes horizontales ne sont généralement pas aussi symétriques que dans mes photos de référence, donc je souhaite que mes poussées de lentilles soient également un peu asymétriques.

Heureusement, le gradient radial a un paramètre de position optionnel dans CSS. Nous pouvons créer deux moitié gauche et droite avec des tailles légèrement différentes du même halo horizontal et utiliser des couleurs légèrement différentes. Nous pouvons également ajouter un filtre d'opacité pour rendre la zone où le halo horizontal se connecte au centre est moins abrupte.

 Contexte: gradient radial (
  cercle le plus proche au centre,
  transparent 50%,
  HSL (4 10% 70% / 40%) 90%,
  transparent 100%
));
Filtre: flou (5px);

Soit dit en passant, ajoutons également un halo de base ovale complet et mince à trois quarts sous la fenêtre pour ajouter une autre "réalité".

Créer des rayons diffus

Avec un halo radial et un halo horizontal, il ne reste que la lumière en pente émise par la source de lumière. Nous pouvons ajouter un gradient radial elliptique supplémentaire, puis incliner et traduire le conteneur pour obtenir une approximation.但我们还有一个已经为这项工作准备好的CSS渐变，即锥形渐变。 Voici un exemple qui nous donne un gradient effilé à 7 degrés qui est décalé de 5 degrés du coin inférieur droit de son conteneur.

 Contexte: gradient conique (
  à partir de 5deg à 0% à 100%,
  transparent 0deg,
  HSL (4 10% 70% / 30%) 7deg,
  15deg transparent
));
Transform-Origin: en bas à gauche;
transformée: rotation (-45deg);

Nous ajouterons des gradients effilés centrés sur le centre de notre halo avec des angles de gradient dans diverses couleurs translucides. Étant donné que le gradient effilé peut montrer l'angle de sa div de récipient, nous le ferons à l'aide de notre source lumineuse comme origine, résultant en un effet de filtre lumineux diffusé décalé.

Créer des fusées d'objectif plus flexibles avec des propriétés personnalisées CSS

Jusqu'à présent, nous avons créé un effet de poussée de lentille réactive mais statiquement positionné qui se trouve en position fixe. Il est difficile d'ajuster le centre de la rampe de lentille sans détruire les halos horizontaux et coniques environnants.

Pour faire évaser l'objectif CSS à la fois réglable et moins fragile, nous exposerons la position, la taille et la teinte de la source lumineuse à travers un ensemble de propriétés personnalisées.

 :racine {
  - Hue: 4;
  --Lens-Center-Size: 40%;
  --Lens-Spread-Size: 80%;
  - Lens-Left: 55%;
  --lens-top: 15%;
}

Soit dit en passant, nous ajusterons également la tonalité du halo et la hauteur halo horizontale. Pour la largeur de halo horizontale, nous utilisons un rechargement variable CSS pour le rendre réglable individuellement;

 .left-flare {
  Largeur: var (- largeur de la fiche gauche, var (- lens-left, 50%));
}

Il s'agit de l'effet d'évasion de l'objectif CSS effectué en utilisant le fond photo et la rampe de lentille en mouvement vers le haut pour rendre la position de la source lumineuse crédible. Allez-y et ajoutez vos propres photos pour voir comment cela fonctionne dans différents environnements!

Autres exemples CSS et non CSS

Bien sûr, ce n'est qu'une façon de créer une poussée d'objectif CSS. J'aime cette approche car elle est flexible dans la couleur, la taille et la position du halo et de ses pièces. Cela le fait plus comme un composant réutilisable qui peut être utilisé dans de nombreux environnements.

Keith Grant a un exemple d'utilisation de gradients linéaires ainsi que des propriétés personnalisées pour CSS. Ensuite, il y ajoute un JavaScript pour randomiser les valeurs HSLA.

Nicholas Guest a également une évolution de l'objectif CSS, qui applique une ombre de boîte sur le :: avant et :: après des pseudo-éléments de l'élément.

Ceci est fabriqué avec une toile, qui montre intelligemment comment la source de lumière suit la souris lors du plan en planant, tout en montrant comment l'artefact évasé de l'objectif change la position à mesure que la position de la source de lumière change.

La même idée ici:

Il existe également un exemple intéressant, qui utilise GSAP, Canvas et une bibliothèque appelée JS.Lensflare:

Comment gérerez-vous les effets CSS de l'objectif CSS? Partagez vos pensées dans les commentaires!

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!