Boutons fantômes de bonbons CSS-ing

Récemment, j'ai cherché une 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é en chrome:

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 des emoji et une propriété CSS personnalisée, --slist , pour la liste d'arrêt dans l'attribut de style.

 <code>boo!</code>

Achèvement post-article, j'ai découvert les limitations de découpage significatives de Safari. Il échoue sur les éléments des bouton, display: flex (et éventuellement grille) et texte de l'élément enfant. Par conséquent, les techniques décrites ici sont incompatibles avec safari. La solution de contournement implique de nicher un<span></span> Dans le bouton, en appliquant tous les styles de bouton au<span></span> et en s'assurant qu'il couvre la boîte à 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 ::after un pseudo-élément pour l'icône et une disposition de grille pour l'alignement texte / icône. Border, rembourrage, frontière-radius, liste d'arrêt de --slist pour le gradient diagonal et le style de police sont également appliqués.

 <code>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) } }</code>

La clarification sur le code ci-dessus: background-origin et background-clip sont définies sur border-box . background-origin positionne le point 0,0 de la background-position au niveau supérieur gauche de la boîte spécifiée, déterminant la référence pour background-size . border-box garantit que le gradient s'étend sur toute la boîte à bordure. La padding-box par défaut entraînerait le gradient qui couvre uniquement 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 RVB 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 rembourrage (alpha = 1 dans la boîte de 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'arrondi d'angle est déterminé par border-radius (et border-width pour la boîte de rembourrage).

Ces couches sont composées à l'aide de l'opération exclude (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 bordure (première couche alpha = 1, deuxième couche alpha = 0).

Le code:

 <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); }</code>

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

Cela produit une frontière 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, cela est spécifique au chrome en raison de la valeur text non standard pour mask-clip . Un bloc @supports garantit la compatibilité des navigateurs croisés (sans masquage de texte dans les navigateurs non soutenus).

 <code>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; } }</code>

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 et plus largement soutenues.

Approches alternatives: solutions pseudo-élémentaires et à l'image des frontières

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 gradient en utilisant un absolument positionné ::before pseudo-élément. La solution d'image de bordure, bien que plus simple, a des limites 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 entre le navigateur et des exigences de conception spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!