SVG et CSS créent des effets de nuage réalistes

Dans la mythologie grecque, Zeus a créé le cloud fée. Comme les autres mythes grecs, cette histoire est assez bizarre. Voici une version courte et appropriée:

Selon la légende, Neferele a été créée par Zeus à l'image de sa belle femme. Un mortel a rencontré Nefere et est tombé amoureux d'elle. Ensemble, ils ... En fin de compte, incroyable que ce nuage ait donné naissance à un demi-homme et à moitié masculin Centaur.

Très étrange, non? Personnellement, je ne comprends pas. Heureusement, le processus de création de nuages ??dans un navigateur est beaucoup plus simple et plus sérieux.

Récemment, j'ai constaté que le développeur Yuan Chuan a implémenté un effet de cloud réaliste généré par le code. Pour moi, cet effet qui a été mis en ?uvre dans le navigateur était autrefois un mythe.

Parcourez simplement cet exemple de code et nous pouvons imaginer qu'en utilisant<filter></filter> CSS box-shadow des éléments (y compris deux filtres SVG) peut atteindre un effet de nuage unique convaincant.

L'effet réaliste que nous voulons est réalisé grace à la combinaison intelligente de feTurbulence et feDisplacementMap . Ces filtres SVG sont puissants, complexes et offrent des fonctionnalités très excitantes (y compris un algorithme oscarisé!). Cependant, sa complexité sous-jacente peut être intimidante.

Bien que la physique des filtres SVG dépasse le cadre de cet article, il y a beaucoup de documents disponibles sur MDN et W3.org. Des pages très utiles sur feTurbulence et feDisplacementMap sont disponibles gratuitement (et comme chapitre de ce merveilleux livre).

Dans cet article, nous nous concentrerons sur l'apprentissage de l'utilisation de ces filtres SVG pour obtenir des résultats incroyables. Nous n'avons pas besoin d'approfondir comment les algorithmes en coulisses fonctionnent, tout comme les artistes n'ont pas besoin de comprendre la structure moléculaire des pigments pour rendre des paysages incroyables.

Au lieu de cela, gardons un ?il sur plusieurs propriétés SVG qui sont cruciales pour attirer des nuages ??convaincants dans votre navigateur. En utilisant ces propriétés, nous pouvons utiliser ces filtres puissants avec facilité et apprendre à les personnaliser avec précision dans nos projets.

Commencez par les bases

Il y a cinq valeurs qui méritent d'être prêtées à l'attention dans l'attribut CSS box-shadow :

 <code>box-shadow:<offsetx><offsety><blurradius><spreadradius><color> ;</color></spreadradius></blurradius></offsety></offsetx></code>

Refléchissons ces valeurs (probablement plus élevées que n'importe quel développeur sensible ne l'utiliserait) afin que l'ombre elle-même devienne un personnage sur la scène.

 <code>#cloud-square { background: turquoise; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; } #cloud-circle { background: coral; border-radius: 50%; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; }</code>

Avez-vous déjà joué ou vu des drames d'ombre?

Tout comme changer la forme avec vos mains pour changer l'ombre, la "forme de source" dans notre HTML peut être déplacée et déformée pour se déplacer et changer la forme de l'ombre rendue dans le navigateur. box-shadow copie la taille d'origine et la fonctionnalité "transform" sur border-radius . Les filtres SVG sont appliqués aux éléments et à leurs ombres en même temps.

<code><svg height="0" width="0"><filter><feturbulence basefrequency=".01" numoctaves="10" type="fractalNoise"></feturbulence><fedisplacementmap in="SourceGraphic" scale="10"></fedisplacementmap></filter></svg></code>

Ceci est le balisage de notre SVG actuel. Il ne rendra pas parce que nous n'avons défini aucun visuel (sans parler de la largeur et de la hauteur zéro). Son seul but est de sauver un filtre, que nous fournissons à notre SourceGraphic (c'est-à-dire le n?tre<div> ). Notre source<code><div> Ses ombres sont déformées indépendamment par le filtre. Nous ajouterons les règles CSS nécessaires, reliant l'élément HTML ( <code>#cloud-circle ) au filtre SVG en utilisant son ID:

 <code>#cloud-circle { filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }</code>

Regarder!

OK, admettez-le, ajouter des filtres SVG est assez discret.

Ne vous inquiétez pas! Nous avons juste touché la surface et il y avait beaucoup de bonnes choses à voir.

Expérimentez la propriété scale feDisplacementMap

La réalisation de certaines expériences non scientifiques sur cet attribut peut produire des effets dramatiques. Pour le moment, gardons toutes les valeurs inchangées de feTurbulence , ajustez simplement scale DisplacementMap .

à mesure que scale augmente (en 30 incréments), notre source<div> Les distorsions se produisent et les ombres sont coulées pour refléter la forme aléatoire des nuages ??dans le ciel.<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;180&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/code&gt;</pre> <p> Ok, nous avons fait des progrès! Changeons un peu la couleur pour créer un effet de nuage plus convaincant et améliorons-le.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;body { background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%); } #cloud-circle { width: 180px; height: 180px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }&lt;/code&gt;</pre> <p> Maintenant, nous sommes plus proches de l'effet de nuage réaliste!</p> <h3> Modifier la valeur <code>blur de box-shadow

La série d'images suivantes montre l'effet de blur sur box-shadow . Ici, la valeur blur augmente par incréments de 10 pixels.

Pour donner à nos nuages ??un effet de type cumulus, nous pouvons élargir légèrement notre source<div> .<pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 60px 0px #fff; }&lt;/code&gt;</pre> <p> etc! Nous avons élargi l'élément source, et maintenant il bloque l'ombre blanche que nous appelons les nuages. ?Refonte" les ombres à une distance plus longue afin que nos nuages ??ne soient pas masqués par l'image source. (Imaginez enlever vos mains du mur pour ne pas bloquer la vue du drame de l'ombre.)</p> <p> Cela peut être facilement réalisé avec un certain positionnement CSS.<code><div> Il s'agit de l'élément parent du cloud et est positionné statiquement par défaut. Utilisons un positionnement absolu pour transférer notre source<code><div> "Tirez" et supprimez le flux de document. Initialement, cela repositionnera également nos ombres, nous devons donc également augmenter la distance entre les ombres et ajuster légèrement la position de l'élément.<pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 400px 400px 60px 0px #fff; /* 增加陰影偏移量*/ position: absolute; /* 將父元素移出文檔流*/ top: -320px; /* 向下移動*/ left: -320px; /* 向右移動*/ }&lt;/code&gt;</pre> <p> Oui! Nous avons déjà un nuage assez convaincant.</p> <p> Les images rendues dans le navigateur représentent assez bien les nuages ??- mais je ne suis pas s?r ... ce cloud peut-il vraiment refléter le cloud fée neferre? Je crois que nous pouvons faire mieux!</p> <h3 id="Exprimer-la-profondeur-à-l-aide-de-couches"> Exprimer la profondeur à l'aide de couches</h3> <p> C'est ce que nous voulons:</p> <p> à en juger par la profondeur, la texture et la richesse des nuages ??sur cette photo, une chose est claire: Zeus a fréquenté l'école d'art. Au moins, il doit avoir lu les principes universels du design, qui exposent un concept puissant et apparemment ordinaire:</p> <blockquote><p> […] L'écart d'éclairage joue un r?le important dans l'interprétation de la profondeur et du sens de la nature et peut être opéré de diverses manières par le concepteur… en utilisant le contraste entre les zones claires et sombres pour changer l'apparence de la profondeur.</p></blockquote> <p> Ce passage nous donne un indice sur la fa?on dont nous pouvons améliorer considérablement le code cloud que nous générons nous-mêmes. Nous pouvons rendre des nuages ??très similaires à ceux de l'image de référence en empilant des couches de différentes formes, tailles et couleurs ensemble. Cela nécessite simplement d'appeler notre filtre plusieurs fois au besoin. </p> <pre class="brush:php;toolbar:false">&lt;code&gt;&lt;svg height=&quot;0&quot; width=&quot;0&quot;&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;4&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;170&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;150&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;100&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;/svg&gt;&lt;/code&gt;</pre> <p> L'application de nos couches nous donnera la possibilité d'explorer <code>feTurbulence et d'atteindre sa polyvalence. Nous sélectionnerons le type plus lisse disponible: fractalNoise et transformer numOctaves à 6.

<code><feturbulence basefrequency="n" numoctaves="6" type="fractalNoise"></feturbulence></code>

qu'est-ce que cela signifie? Maintenant, concentrons-nous sur baseFrequency . Voici le résultat que nous obtenons lorsque nous augmentons la valeur de n:

Des mots tels que la turbulence , le bruit , la fréquence et l'octave peuvent appara?tre étranges ou même déroutants. Mais ne vous inquiétez pas! La comparaison de l'effet de ce filtre aux ondes sonores est en fait complètement précise. Nous pouvons associer les basses fréquences ( baseFrequency=0.001 ) à un bruit faible et à des fréquences élevées ( baseFrequency=0.1 ) avec des tons plus élevés et plus clairs.

Nous pouvons voir que pour les effets de type cumulus, la valeur de baseFrequency peut se situer confortablement dans les gammes de ~ 0,005 et ~ 0,01.

Ajouter des détails à l'aide numOctaves

L'incrémentation numOctaves nous permet de rendre des images avec des détails extrêmement fins. Cela nécessite beaucoup de calculs, alors sachez que les valeurs élevées peuvent sérieusement affecter les performances. Essayez d'éviter d'augmenter cette valeur à moins que votre navigateur ne porte un casque et des tampons de genoux.

La bonne nouvelle est que nous n'avons pas besoin d'ajuster cette valeur trop élevée pour produire des détails et de la finesse. Comme indiqué dans l'image ci-dessus, nous pouvons définir la valeur numOctaves sur 4 ou 5.

Les résultats sont les suivants

Utilisez seed pour réaliser des changements infinis

Il y a beaucoup à dire sur seed car il fait allusion à la magie qui se passe dans les coulisses. Cependant, à notre objectif, l'utilité des seed peut être résumé en quatre mots: "Valeurs différentes, différentes formes".

La fonction Perlin Noise (mentionnée précédemment) utilise cette valeur comme point de départ pour son générateur de nombres aléatoires. La sélection de ne pas inclure cette propriété sera par défaut seed à zéro. Cependant, si cette propriété est incluse, quelle que soit la valeur que nous attribuons aux seed , nous n'avons pas à nous soucier des problèmes de performance.

Le GIF ci-dessus représente certaines des caractéristiques fournies par seed . N'oubliez pas que chaque nuage est un nuage composite en couches. (Bien que j'aie ajusté les propriétés de chaque couche, je garde cohérente leurs seed respectives.)

Ici, en regardant soigneusement l'image de référence, j'ai déjà mis 3 nuages<div> (Différent l'opacité) Superposition à une base<code><div> supérieur. Par essais et erreurs et en entrant des valeurs <code>seed arbitraires, je me suis retrouvé avec une forme similaire à la forme d'un nuage sur la photo.

Un sauvage et imaginatif

Bien s?r, pensez que nous nous appuyons sur le navigateur<div> Neferele qui serait meilleure que Zeus serait arrogant. Cependant, plus nous pouvons fouiller de mystères à partir des filtres CSS et SVG, plus nous pouvons créer quelque chose de visuellement incroyable et très similaire à la création originale de Thor. Ensuite, nous pouvons continuer à mener d'autres expériences!<p> Brume réfléchie</p> <p> Nuage de cirrus de grande hauteur</p> <p> Dans cet article, nous ne tamponnons que dans une mer de puissance et de complexité. Les filtres SVG semblent généralement écrasants et inaccessibles.</p> <p> Cependant, comme les exemples du projet One Div ou des compétences de dessin de Diana Smith, une méthode d'expérience détendue et agréable apporte toujours des résultats incroyables!</p> <h4 id="Déblocage-de-réussite-Générateur-de-nuages-de-neferre"> Déblocage de réussite! Générateur de nuages ??de neferre</h4> <p> Je crois que beaucoup d'entre vous seraient heureux de creuser profondément dans tous les détails techniques nécessaires pour fabriquer des nuages, mais pourraient préférer des moyens plus pratiques d'utiliser des nuages ??dans votre projet. J'ai développé un gadget pour aider à générer des nuages ??et à expérimenter les formes et les changements.</p> <p> Générez des nuages!</p> <p> Vous avez des questions, des suggestions ou des commentaires? Veuillez me contacter sur Twitter ou laisser un commentaire dans ce post.</p> <p> <small>Merci beaucoup à Amelia Bellamy-Royds pour vos précieuses suggestions sur cet article.</small></p> </div>