Catégories
Astuces et Design

Création de formes CSS avec Emoji

CSS Shapes est une norme qui nous permet de créer des formes géométriques sur des éléments flottants qui font que le contenu en ligne – généralement du texte – autour de ces éléments s'enroule le long des formes spécifiées.

Un tel flux de texte en forme semble bon dans les conceptions éditoriales ou les conceptions qui fonctionnent avec des contenus riches en texte pour ajouter un certain relief visuel aux morceaux de texte.

Voici un exemple de forme CSS utilisée:

le shape-outside propriété spécifie la forme d'une zone flottante en utilisant l'une des fonctions de forme de base – circle(), ellipse(), polygon() ou inset() – ou une image, comme celle-ci:

Le contenu en ligne s'enroule le long du côté droit d'un élément flottant à gauche et du côté gauche d'un élément flottant à droite.

Dans cet article, nous utiliserons le concept de formes CSS avec emoji pour créer des effets d'habillage de texte intéressants. Les images sont des rectangles. La plupart des formes que nous dessinons en CSS sont également rectangulaires ou du moins limitées à des formes standard. Emoji, en revanche, offre de belles opportunités de sortir de la boîte!

Voici comment procéder: nous allons d'abord créer une image à partir d'un emoji, puis la faire flotter et lui appliquer une forme CSS.

J'ai déjà abordé plusieurs façons de convertir des émojis en images dans cet article sur les motifs d'arrière-plan créatifs. En cela, j'ai dit que je n'étais pas en mesure de comprendre comment utiliser SVG pour faire la conversion, mais je l'ai compris maintenant et je vais vous montrer comment dans ce post. Vous n'avez pas besoin d'avoir lu cet article pour que celui-ci ait du sens, mais il est là si vous voulez le voir.

Créons une image emoji

Les trois étapes que nous utilisons pour créer une image emoji sont les suivantes:

  • Créer une découpe en forme d'emoji en SVG
  • Convertissez le code SVG en DataURL par encodage URL et en le préfixant avec data:image/svg+xml
  • Utilisez DataURL comme url() valeur d'un élément background-image.

Voici le code SVG qui crée la découpe en forme d'emoji:

 
   
    🦕 
   
  🦕

Ce qui se passe ici, c'est que nous fournissons un élément avec un caractère emoji pour un . Un chemin de clip est un contour d'une région à garder visible lorsque ce chemin de clip est appliqué à un élément. Dans notre code, ce contour est la forme du caractère emoji.

Ensuite, le chemin du clip de l'emoji est référencé par un élément portant le même caractère emoji, en utilisant son clip-path propriété, créant une découpe sous la forme de l'emoji.

Maintenant, nous convertissons le code SVG en DataURL. Vous pouvez l'encoder par URL à la main ou utiliser des outils en ligne (comme celui-ci!) Qui peuvent le faire pour vous.

Voici le DataURL obtenu, utilisé comme url() valeur de l'image d'arrière-plan d'un .emoji élément en CSS:

.emoji {
  background: url("data:image/svg+xml,  🦕  🦕");
}

Si nous devions nous arrêter ici et donner le .emoji dimensions de l'élément, nous verrions notre personnage affiché comme image d'arrière-plan:

Maintenant, transformons cela en une forme CSS

Nous pouvons le faire en deux étapes:

  • Faites flotter l'élément avec l'arrière-plan emoji
  • Utilisez DataURL comme url() valeur de l'élément shape-outside propriété
.emoji {
  --image-url: url("data:image/svg+xml,  🦕  🦕");
  background: var(--image-url);
  float: left;
  height: 150px;
  shape-outside: var(--image-url);
  width: 150px;
  margin-left: -6px; 
}

Nous avons placé le DataURL dans une propriété personnalisée, --image-url, nous pouvons donc facilement le référencer dans les deux background et le shape-outside propriétés sans répéter cette grande chaîne de SVG encodé plusieurs fois.

Désormais, tout contenu en ligne à proximité du flottant .emoji l'élément coulera sous la forme de l'emoji. Nous pouvons encore ajuster les choses avec margin ou shape-margin pour ajouter de l'espace autour de la forme.

Si vous voulez une forme d'emoji à couleur bloquée, vous pouvez le faire en appliquant le chemin du clip à un élément dans le SVG:

 
     
        🦕 
     
     

La même technique fonctionnera avec les lettres!

Notez simplement que Firefox ne rend pas toujours la forme de l'emoji. Nous pouvons contourner cela en mettant à jour le code SVG.


  
    
🧗

Cela crée une forme d'emoji de couleur bloc en rendant l'emoji transparent et en lui donnant text-shadow avec CSS en ligne. le

contenant l'emoji et le style CSS en ligne est ensuite inséré dans un élément de SVG donc le HTML

le code peut être utilisé dans l'espace de noms SVG. Le reste du code de cette technique est le même que le dernier.

Maintenant, nous devons centrer la forme

Étant donné que les formes CSS ne peuvent être appliquées qu’aux éléments flottants, le texte s’écoule vers la droite ou vers la gauche de l’élément en fonction de son côté flottant. Pour centrer l'élément et la forme, nous allons procéder comme suit:

  • Divisez l'emoji en deux
  • Faites flotter la moitié gauche de l'emoji vers la droite et la moitié droite vers la gauche
  • Mettez les deux côtés ensemble!

Une mise en garde à cette stratégie: si vous utilisez des phrases en cours d'exécution dans la conception, vous devrez aligner manuellement les lettres des deux côtés.

Voici ce que nous visons à faire:

Tout d'abord, nous voyons le HTML pour les côtés gauche et droit de la conception. Ils sont identiques.

A C G T A C G T A C G T A C G T A C G C G T

A C G T A C G T A C G T A C G T A C G C G T

p#leftSide et p#rightSide à l'intérieur #design sont disposés côte à côte dans une grille.

#design {
  border-radius: 50%; /* A circle */
  box-shadow: 6px 6px 20px silver;
  display: grid; 
  grid: "1fr 1fr"; /* A grid with two columns */
  overflow: hidden;
  width: 400px; height: 400px;
}

Voici le CSS pour l'emoji:

span.emoji {
  filter: drop-shadow(15px 15px 5px green);
  shape-margin: 10px;
  width: 75px; 
  height: 150px;
}

/* Left half of the emoji */
p#leftSide>span.emoji {
  --image-url:url("data:image/svg+xml,  🦎  ");
  background-image: var(--image-url);
  float: right;
  shape-outside: var(--image-url);
}

/* Right half of the emoji */
p#rightSide>span.emoji {
  --image-url:url("data:image/svg+xml,  🦎  ");
  background-image: var(--image-url);
  float: left;
  shape-outside: var(--image-url);
}

La largeur du éléments contenant les images emoji (span.emoji) est de 75 pixels, tandis que la largeur des images emoji SVG est de 150 pixels. Cela coupe automatiquement l'image en deux lorsqu'elle est affichée à l'intérieur des travées.

Sur le côté droit du motif, avec l'emoji flottant à gauche (p#rightSide>span.emoji), nous devons déplacer l'emoji à mi-chemin vers la gauche pour afficher la moitié droite, de sorte que le x valeur dans le dans le DataURL est changé en 75px. C’est la seule différence entre les DataURL des côtés gauche et droit de la conception.

Voici encore une fois ce résultat:


C'est tout! Vous pouvez essayer la méthode ci-dessus pour centrer n'importe quelle forme CSS tant que vous pouvez diviser l'élément en deux et remettre les moitiés avec CSS.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *