Récemment, j'ai cherché l'inspiration en codage, manquant de talent artistique. Mon approche? Reproduire les créations visuellement attrayantes par d'autres, en se concentrant sur le code propre et concis. Ces boutons fantômes de bonbons ont attiré mon attention!

Ils semblaient parfaits pour un projet rapide. En quinze minutes, je l'ai réalisé dans Chromium:

Cette technique mérite le partage. Cet article détaille mon processus et explore d'autres approches.

Configuration initiale

Un élément de bouton simple forme la base, incorporant un attribut data-ico pour l'insertion emoji et une propriété CSS personnalisée, - slist , pour la liste d'arrêt dans l'attribut de style.

boo!

Achèvement post-article, j'ai découvert les limitations de découpage significatives de Safari. Il échoue sur les éléments des bouton, affichez: flex (et éventuellement grid) et le texte de l'élément enfant. Par conséquent, les techniques décrites ici sont incompatibles avec safari. La solution de contournement consiste à nicher un dans le bouton, en appliquant tous les styles de bouton au , et en s'assurant qu'il couvre la boîte de bordure du parent. Pour les utilisateurs de Linux dépourvus d'accès à l'appareil Apple physique, je recommande l'épiphanie (merci, Brian!).

Le CSS utilise un :: après pseudo-élément pour l'icône et une mise en page de grille pour l'alignement texte / icône. Border, rembourrage, frontture-radius, le - Slist Stop List pour le gradient diagonal, et le style de police est également appliqué.

button {
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5em;
  border: solid .25em transparent;
  padding: 1em 1.5em;
  border-radius: 9em;
  background: 
    linear-gradient(to right bottom, var(--slist)) 
      border-box;
  font: 700 1.5em/ 1.25 ubuntu, sans-serif;
  text-transform: uppercase;

  &::after { content: attr(data-ico) }
}

Clarification sur le code ci-dessus: background-original et background-cllip sont définis sur border-box . background-original positionne le point background position 0,0 en haut à gauche de la boîte spécifiée, déterminant la référence pour background-size . border-box s'assure que le gradient s'étend sur toute la boîte de bordure. La valeur par défaut padding-box entraînerait le gradient uniquement couvrant la zone de rembourrage.

Solution spécifique au chrome (non standard)

Cette méthode utilise trois couches de masque et composition. Un rafraîchissement sur le compositing du masque peut être trouvé dans [Link to Crash Course]. Seul le canal alpha est important dans les couches de masque CSS; Les canaux RGB n'affectent pas le résultat.

Nous commençons par deux couches: une couche entièrement opaque couvrant la boîte de bordure (alpha = 1 partout) et une seconde, également entièrement opaque, la couche limitée à la boîte de padding (alpha = 1 dans la boîte à padding, 0 à l'extérieur).

visualisez les boîtes de mise en page comme des rectangles imbriqués. La couche inférieure est entièrement opaque à travers la boîte de bordure. La couche supérieure est opaque dans la boîte de rembourrage et transparente dans la zone de la frontière. L'arrondissement du coin est déterminé par border-radius (et border-width pour la boîte de padding).

Ces couches sont composées à l'aide de l'opération excluez (ou xor dans webkit). Le résultat: alpha = 0 dans la boîte de rembourrage (les deux couches ont alpha = 1), et alpha = 1 dans la zone de la bordure (première couche alpha = 1, deuxième couche alpha = 0).

le code:

button {
  /* same base styles */
  --full: linear-gradient(red 0 0);
  -webkit-mask: var(--full) padding-box, var(--full);
  -webkit-mask-composite: xor;
  mask: var(--full) padding-box exclude, var(--full);
}

Détails: les gradients rouges sont utilisés pour la concision. Les gradients sont utilisés pour les deux couches en raison des limitations du clip de fond. Le standard masque-composite est inclus, avec la version non standard remplacée.

Cela produit une bordure de dégradé mais manque de texte. L'ajout d'une troisième couche de masque, limitée au texte (avec du texte transparent), et le Xoring avec le résultat précédent ajoute le texte. Cependant, ceci est spécifique au chrome en raison de la valeur de texte non standard pour mask-clip . Un @ prend en charge Block assure la compatibilité des navigateurs (sans masquage de texte dans des navigateurs non soutenus).

button {
  /* same base styles */

  @supports (-webkit-mask-clip: text) {
    -webkit-text-fill-color: transparent;
    --full: linear-gradient(red 0 0);
    -webkit-mask: var(--full) text, var(--full) padding-box, var(--full);
    -webkit-mask-composite: xor;
  }
}

Il s'agit d'une approche simple, mais sa dépendance à l'égard des caractéristiques non standard limite sa compatibilité du navigateur. Explorons des méthodes alternatives, plus largement prises en charge.

Approches alternatives: solutions pseudo-élémentaires et à l'image de bordure

La solution de pseudo-élément supplémentaire évite le masquage en découpant l'arrière-plan vers la zone de texte et en ajoutant une bordure de dégradé à l'aide d'un pseudo-élément :: avant . La solution d'image de bordure, bien que plus simple, a des limitations avec border-radius . Ces méthodes offrent une meilleure compatibilité entre les navigateurs que la solution spécifique au chrome. De plus amples détails et des exemples de code pour ces méthodes sont fournis dans l'article d'origine. La solution de mélange, également décrite dans l'article d'origine, offre une autre approche mais avec des limites concernant l'interaction en arrière-plan. Chaque méthode a ses forces et ses faiblesses en fonction du niveau souhaité de support croisé et d'exigences de conception spécifiques.