Effet CSS Blurry Shimmer —

Imaginer box-shadow mais pour un effet de flou, où l’arrière-plan d’un élément est flou autour de cet élément, diminuant progressivement la force du flou. J’ai eu l’idée en essayant d’améliorer le contraste d’une popup sur une zone sombre où un box-shadow car le popup n’aura pas beaucoup de sens, du point de vue du design. J’ai alors pensé : quelles autres manières pourraient créer un bon effet de contraste ? Et soudain, l’idée d’un effet de flou progressif autour de l’objet m’est venue.

Ce serait génial si nous avions un box-blur propriété ou peut-être une sorte de blur mot-clé que nous pourrions définir box-shadow comme nous le faisons pour inset ombres. Malheureusement, CSS n’a pas une telle propriété. Mais comme CSS est génial et flexible, nous pouvons toujours obtenir l’effet en combinant quelques fonctionnalités CSS et en les piratant.

Ce que je vais vous montrer à partir de maintenant, c’est le processus de réflexion que j’ai suivi pour créer l’effet. Parfois, je trouve plus facile de savoir ce qui s’en vient plutôt que de me promener dans un récit plein de rebondissements. Donc, pour ceux d’entre vous qui sont comme moi et qui souhaitent se lancer directement dans le processus, c’était mon approche.

Commencez par le balisage

L’effet est abordé de manière à être appliqué au ::before pseudo-élément d’un élément, disons un popup/dialog/popover/tooltip. Ce sont les « cibles » courantes de ce type d’effet. Je pense que l’utilisation d’un pseudo-élément est une bonne approche ici car cela signifie que nous pourrions techniquement étendre les styles au pseudo-élément et réutiliser l’effet sur d’autres éléments sans aucune modification HTML.

<!-- This is literally it for this demo -->
<div></div>

Vous pouvez attribuer à l’élément une classe, quelles que soient les dimensions souhaitées, y insérer du contenu et d’autres éléments enfants, ou utiliser un élément complètement différent. Le HTML n’est pas l’ingrédient principal de la sauce secrète que nous préparons.

Positionner le pseudo-élément

Nous voulons le ::before pseudo-élément pour occuper toute la surface du <div> élément que nous utilisons pour cette démo spécifique. Non seulement nous voulons qu’il couvre toute la zone, mais même débordement car cela établit la zone visible, qui contient l’effet de flou, donc elle s’étendra vers l’extérieur.

::before {  
  content: '';

  /* Make sure the parent element is at least relatively positioned to contain the pseudo-element. */
  position: absolute;
  
  /* The blur size should be anything below `0` so it will extend to the outside. */
  inset: -100px;

  /* This layer is positioned between the parent element and page background. */
  /* Make sure this value is one below the `z-index` of the parent element. */
  z-index: -1;
}

Les commentaires du code précisent les éléments clés. Une chaîne vide doit être définie pour le content propriété afin que le ::before sera rendu, puis nous le retirons du flux de documents en lui donnant un positionnement absolu. Cela nous permet de inset la position de l’élément et définit finalement les directions de l’effet de flou comme nous le ferions sur le box-shadow propriété – seulement nous utilisons inset pour contrôler sa taille. Nous voulons un négatif inset valeur, où l’effet s’étend d’autant plus que la valeur diminue.

Jusqu’à présent, nous avons posé les bases de l’effet. Il n’y a vraiment rien à voir pour l’instant. Maintenant, le plaisir commence !

Masquage avec des dégradés transparents

Les dégradés sont techniquement images — généré par le navigateur — qui peut être utilisé comme masques CSS pour masquer des parties d’un élément afin de créer diverses formes. Vous avez peut-être vu quelques articles du Smashing Magazine dans lesquels le masquage CSS a été présenté, tels que celui-ci par Temani Afif.

La transparence est l’élément clé lorsqu’il s’agit de masquage avec des dégradés. La transparence nous permet de masquer progressivement des parties d’un élément de manière à créer l’illusion d’un fondu entrant ou sortant.

C’est parfait dans ce cas car nous voulons que l’effet soit plus fort, plus proche de l’objet, et que son intensité s’atténue à mesure qu’il s’éloigne.

Nous utiliserons deux dégradés : un qui va horizontalement et un autre qui va verticalement. J’ai choisi cette voie car elle imite une forme de rectangle approximatif qui s’estompe vers les bords.

Comme je l’ai dit, la transparence est la clé. Les deux dégradés commencent transparentpuis passez à black jusqu’à juste avant la fin, où ils retournent à transparent pour faire disparaître les choses. N’oubliez pas que ces dégradés sont masques plutôt que des images d’arrière-plan, elles sont donc déclarées sur le mask propriété, qui contrôle quels pixels doivent être rendus et leur opacité.

mask:
  linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
  linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);

• Le gradient vertical (to top) crée un fondu du transparent en bas au noir au milieu, puis revient au transparent en haut.
• Le dégradé horizontal (to left) produit un fondu du transparent à droite au noir au milieu, puis de nouveau au transparent à gauche.

Cette approche à double dégradé positionne les régions noires afin qu’elles fusionnent, créant ainsi la ligne de base approximative d’une forme rectangulaire qui sera affinée à l’étape suivante. Le mask Il est préférable de déclarer la propriété comme étant d’abord préfixée, puis sans préfixe pour couvrir la prise en charge d’un plus grand nombre de navigateurs :

-webkit-mask:
  linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
  linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
mask:
  linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
  linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);

Raffinage à l’aide du mask-composite Propriété

Le mask-composite La propriété fait partie du module de masquage CSS et permet un contrôle par pixel sur le mélange du contenu masqué, permettant des compositions complexes.

Le source-in La valeur de cette propriété est très utile pour l’effet recherché car elle indique au navigateur de conserver uniquement les zones qui se chevauchent du masque, de sorte que seuls les pixels contenant les deux dégradés (mentionnés ci-dessus) seront rendus. Cela verrouille une forme de rectangle, qui peut ensuite être appliquée sur n’importe quel élément DOM comportant des coins peu ou pas courbés (border-radius).

Brouiller progressivement la toile de fond

Maintenant que nous avons un masque avec lequel travailler, il ne nous reste plus qu’à l’utiliser. Le backdrop-filter La propriété CSS peut brouiller tout ce qui est rendu « derrière » un élément à l’aide de l’attribut blur() fonction:

::before {
  /* etc. */

  backdrop-filter: blur(10px);
}

Plus la valeur est élevée, plus le flou est intense. j’utilise 10px arbitrairement. En fait, nous pouvons varier ces éléments ultérieurement pour rendre l’implémentation encore plus flexible et facilement configurable.

Mais attendez! Il s’avère que Safari nécessite une version préfixée par le fournisseur de backdrop-filter pour que ça marche là-bas :

::before {
  /* etc. */

  -webkit-backdrop-filter: blur(10px); /* Required for Safari */
  backdrop-filter: blur(10px);
}

Note: Il est préférable de déclarer des propriétés préfixées avant la variante sans préfixe afin qu’elles servent de solution de repli pour les navigateurs qui ne les prennent pas (encore) en charge ou dont la mise en œuvre est différente.

Une touche d’ombre synergique

Je pense ajouter un léger noir semi-opaque box-shadow qui couvre la zone de flou donne à l’effet un peu plus de profondeur. La seule chose est que vous souhaiterez l’ajouter à l’élément lui-même plutôt qu’à lui. ::before pseudo:

div {
  box-shadow: 0 0 40px #00000099;
}

Mais c’est totalement facultatif.

Rassembler tout

Voici comment le CSS apparaît lorsque nous combinons tout ensemble.

/* This can be set on the ::before pseudo of the element it is applied to. */
::before {    
  content: '';

  /* This layer is positioned between some element and its background. */
  position: absolute;
  
  /* This should not affect the contents of the container. */
  z-index: -1;
  
  /* The blur size should be anything below `0` so it will extend to the outside. */
  inset: -100px;
  
  /* The blur effect */
  -webkit-backdrop-filter: blur(10px); /* Required for safari */
  backdrop-filter: blur(10px);
  
  /* A mask fades the blur effect, so it gets weaker. */
  /* towards the edges, further from the container box. */
  /* (The fill color is irrelevant, so "red" is used as it's the shortest color name.) */
  mask: 
    linear-gradient(
      to top, 
      transparent 0%,
      red 100px calc(100% - 100px),
      transparent 100%), 
    linear-gradient(
      to left,
      transparent 0%,
      red 100px calc(100% - 100px),
      transparent 100%);
  
  /* This merges the masks above so only the overlapping pixels are rendered. */
  /* This creates the illusion of a fade-out mask. */
  mask-composite: intersect;
  -webkit-mask-composite: source-in; /* Required for Safari */
}

La démo finale, encore une fois

J’ai également préparé un version simplifiée avec un minimum de code et aucune variable CSS, plus facile à lire et à réutiliser.

(gg, ouais)