Création d'une forme de nuage réactive

J'ai essayé de créer une forme de nuage sensible en CSS pour un projet. J'essaie de ne pas le faire avec des images, CSS ou SVG en ligne en raison des requêtes HTTP et de l'exigence de réactivité.

La forme en question serait la suivante: (mais peut être similaire - de légères variations/améliorations seraient cool):

Cloud Shape

J'ai trouvé ces deux questions mais elles ne semblent pas correspondre à mes besoins précis:

J'ai tenté (et échoué) de créer un nuage avec un border ou un box-shadow et j'ai besoin de savoir si cela est possible avec CSS ou SVG en ligne alternatif. J'ai aussi vu Canvas est une option aussi, mais je préfère rester loin de cela, car il peut être assez compliqué.

C'est ma tentative pauvre

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

body {
  background: skyblue;
}

.cloud {
  width: 15%;
  height: 10vh;
  background: white;
  position: relative;
  margin: 100px 100px;
  border-radius: 65px;
  box-shadow: black 0 0 10px 10px;
}
.cloud:after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  top: -60px;
  left: 100px;
  border-radius: 75px;
  background: white;
}
.cloud:before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  background: white;
  left: 50px;
  top: -30px;
  border-radius: 35px;
}
<div class="cloud"></div>
</div> </div>

Comme vous pouvez le voir, j'ai du mal avec la réactivité et je calcule exactement quelles hauteurs/largeurs tout doit être.

J'essaie également de réduire au minimum la quantité de HTML, et je préférerais donc utiliser un div simple ou un code SVG court.

0

2 Réponses

La forme du nuage peut être créée en utilisant SVG avec un seul élément path dans SVG. Les SVG par nature sont évolutifs sans causer de distorsions à la forme. Le support de navigateur pour SVG est très bon et le repli pour IE8 et inférieur (si nécessaire) peut être fourni en utilisant VML.

Création de forme

Les commandes utilisées pour dessiner la forme et leur signification sont les suivantes:

  • M 25,60 - This command moves the pen to a point which is 25px ahead of the origin (0,0) on X-axis and 60px ahead of the origin on Y-axis. (Note: The command is written in uppercase which indicates that it is absolute movement and not relative movement).
  • a 20,20 1 0,0 0,40 - This command creates an arc whose X and Y radii are 20px. The arcs starting point is at (25,60) and the end point is (25,100) (that is, 0px away in X-axis and 40px away in Y-axis).
  • h 50 - This command draws a horizontal line that is 50px ahead in relation to the starting point. Since it is relative, the end point would be at (75,100).
  • a 20,20 1 0,0 0,-40 - Similar to the second command, this creates another arc whose radii are 20px on either axis and its end point is 40px before in relation to the previous point. So in essence this would create an arc from (75,100) to (75,60). This and the second command together form the arcs on the two sides of the cloud.
  • a 10,10 1 0,0 -15,-10 - Another arc command to create one portion of the curved top of the cloud. The radii are 10px and the arc would be from (75,60) to (60,50).
  • a 15,15 1 0,0 -35,10 - The final arc to complete the cloud. Radii are 15px and the arc would be from (60,50) to (25,60). (25,60) was the original starting point and thus completes the shape.
  • z - Closes the path.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

svg {
  height: 50%;
  width: 50%;
}
path {
  fill: white;
  stroke: black;
  stroke-width: 2;
  stroke-linejoin: round;
}
path:hover {
  fill: aliceblue;
  stroke: lightskyblue;
}
 
 
</div> </div>

Avantages de l'utilisation de SVG

  • Ils sont faciles à créer et à maintenir
  • Les commandes sont assez simples à comprendre et ne nécessitent aucun positionnement ou piratage complexe
  • Ils sont évolutifs (responsive) par défaut
  • Il n'y a pas de requêtes HTTP supplémentaires requises tant que le SVG est en ligne
  • Mieux contrôler les arcs, leurs rayons etc.
  • Les effets de survol (comme indiqué dans l'extrait ci-dessous) peuvent être limités au déclenchement uniquement lorsque la souris se trouve dans les limites de la forme.
  • Des effets supplémentaires peuvent être ajoutés sans problème. Autrement dit, vous pouvez imiter le comportement de la forme dessinée à l'écran, etc.

Effets spéciaux - Animation de dessin de nuages

Vous trouverez ci-dessous un exemple d'animation avec une animation de dessin où le tracé est tracé en décrémentant la propriété stroke-dashoffset du chemin jusqu'à ce qu'il devienne 0. La valeur de décalage initiale est égale à la longueur totale chemin qui est calculé en utilisant la méthode getTotalLength() . La forme de nuage a également une ombre floue ajoutée.

L'animation est réalisée en utilisant le window.requestAnimationFrame méthode

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

window.onload = function() {
  var offset;
  var path = document.getElementsByTagName('path')[0];
  var len = path.getTotalLength();

  function paint() {
    path.style.strokeDashoffset = len;
    path.style.strokeDasharray = len + ',' + len;
    animate();
  }

  function animate() {
    if (!offset) offset = len;
    offset -= 0.5;
    path.style.strokeDashoffset = offset;
    if (offset < 0)
      window.cancelAnimationFrame(anim);
    else anim = window.requestAnimationFrame(function() {
      animate();
    });
  }

  paint();
};
svg {
  height: 40%;
  width: 40%;
}
path {
  fill: white;
  stroke: black;
  stroke-width: 2;
  stroke-linejoin: round;
}
path:hover {
  fill: aliceblue;
  stroke: lightskyblue;
}
 
 
 
 
 
 
 
 
 
 
</div> </div>
0
ajouté

Nuages ​​gonflés et arcs-en-ciel.

Avertissement: Il n'y a pas d'arc-en-ciel ici

Cependant, ci-dessous est un 'nuage' basique, fait avec un seul élément, et, puisqu'il utilise des unités vw , il est également assez réactif.

Il utilise deux pseudo éléments, en forme de cercles, pour créer les bouffées de nuages ​​sur le dessus. Cela permet également d'utiliser une bordure car vous pouvez faire pivoter les cercles et appliquer une couleur de bordure à deux des côtés.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.cloud {
  height: 30vw;
  width: 90vw;
  background: lightgray;
  border-radius: 40vw;
  border: 5px solid black;
  position: relative;
  margin-top: 20vw;
}
.cloud:before {
  content: "";
  position: absolute;
  top: -10vw;
  box-sizing: border-box;
  height: 20vw;
  width: 20vw;
  left: 15vw;
  border-radius: 50%;
  border: 5px solid black;
  border-bottom-color: transparent;
  border-right-color: transparent;
  background: lightgray;
  transform: rotate(40deg);
}
.cloud:after {
  content: "";
  position: absolute;
  height: 40vw;
  width: 40vw;
  top: -20vw;
  left: 32vw;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid black;
  border-bottom-color: transparent;
  background: lightgray;
  border-right-color: transparent;
  transform: rotate(55deg);
}
<div class="cloud"></div>
</div> </div>

Alors que cette réponse utilise CSS, il peut être plus bénéfique d'utiliser un   SVG si vous avez besoin de plus de contrôle sur la sortie de la forme du nuage.


Alternativement, un SVG pourrait aussi obtenir une telle forme en utilisant la déclaration path ( veuillez noter que ceci a été généré, pas créé manuellement et donc je ne le reconnais pas :

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

 
 

 
 
</div> </div>
0
ajouté