Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient?

Utilisez intelligemment le masque CSS pour créer un effet d'écart de bon de carte de fond de gradient

Dans la conception, l'ajout d'effets d'encoche aux coupons de carte, en particulier les lacunes dans les milieux de gradient, est souvent un défi. Cet article présentera en détail comment utiliser l'attribut mask de CSS pour réaliser facilement cet effet.

Puzzle de conception: Écart de coupon de cartes sous fond de dégradé

Si l'arrière-plan du coupon de la carte est solide, vous pouvez facilement réaliser l'espace en le masquant directement avec une couleur unie. Mais le fond du gradient n'est pas le cas, et un masque simple détruira l'effet de gradient. Par conséquent, il est nécessaire qu'une méthode de «creuser» avec précision l'écart tout en conservant le gradient.

Solution: Propriétés du masque CSS

L'attribut CSS mask est la clé pour résoudre ce problème. Il nous permet de «bloquer» les éléments à l'aide d'images ou de gradients, créant ainsi une variété d'effets mates complexes qui sont parfaits pour les conceptions d'encoche en milieu de gradient.

L'extrait de code suivant montre comment créer un écart circulaire à l'aide d'un gradient radial:

 .carte {
  -Webkit-mask: gradient radial (cercle à 20px 20px, # 0000 20px, transparent 0); / * Safari et chrome * /
  Masque: gradient radial (cercle à 20px 20px, # 0000 20px, transparent 0); / * Firefox * /
}

Ce code crée un masque circulaire à travers un gradient radial. #0000 signifie noir opaque (zone d'occlusion), transparent signifie transparent (zone d'encoche). 20px 20px Spécifie la position centrale 20px contrôle le rayon d'encoche. En termes de compatibilité du navigateur, -webkit-mask a été ajouté pour prendre en charge Safari et Chrome.

Aperçu de l'effet

Après avoir appliqué le code ci-dessus, un espace circulaire apparaîtra dans le coin supérieur gauche du coupon, tandis que l'arrière-plan du gradient restera intact.

Outils auxiliaires

En plus d'écrire manuellement le code CSS, certains outils de conception en ligne peuvent également aider à la conception de coupons de cartes et à la génération d'écart. Par exemple, certains «concepteurs de coupons» ou «éditeurs graphiques» peuvent fournir des capacités de création d'encoche plus intuitives.

Résumer

En utilisant l'attribut CSS mask , nous pouvons ajouter efficacement des lacunes de différentes formes aux coupons de carte de fond de gradient pour améliorer l'effet de conception. Cette méthode est simple et facile à utiliser et peut maintenir l'apparence globale du coupon de la carte.

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!