Créer des bords déchiquetés à l'aide du masque CSS

J'ai récemment d? créer un bord de décha?nement soigné au bas de l'image de la bannière dans un projet.

Cela m'a fait réfléchir un moment et j'ai appris quelque chose dans le processus! Je pense que je peux écrire ma méthode afin que vous puissiez l'utiliser également dans votre propre projet.

Je commence par une image HTML normale et un élément de wrapper:

<div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174390595232013.jpg" class="lazy" alt="Utilisation de masques CSS pour créer des bords déchiquetés">
</div>

Ensuite, j'utilise son ::after un pseudo-élément pour placer une image d'arrière-plan en double:

 .jagged-wrapper :: After {
  contenu: "";
  Image d'arrière-plan: URL ('Données: image / svg xml; UTF-8, <svg preserveaspectratio="none" viewbox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><polygon points="1,0 1,1 0,1 " style="fill:white;"></polygon></svg> ');
  taille arrière: 30px 30px;
  Largeur: 100%;
  hauteur: 30px;
  Position: absolue;
  En bas: 0px;
  à droite: 0;
  Z-Index: 2;
}

Cette image d'arrière-plan? Il s'agit du code SVG converti en un URI de données. Il s'agit du code SVG d'origine. Chris a une belle vidéo expliquant le processus de conversion.

<svg preserveaspectratio="none" viewbox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
  <polygon points="1,0 1,1 0,1 " style="fill: white;"></polygon>
</svg>

"C'est fait!" Je pensais.

Bien que cela fonctionne, ma bonté, c'est tellement gênant. La lecture des balises SVG dans CSS comme celle-ci est difficile. De plus, se souvenir de les citer est ennuyeux (par exemple url('data:image/svg xml'...') ). Bien s?r, nous pouvons base64 encodant le SVG pour éviter cela, mais c'est encore plus ennuyeux. De plus, le SVG doit être rempli de la même couleur d'arrière-plan que l'image (ou partout où vous l'utilisez), sinon elle ne fonctionnera pas.

Attendez, n'est-ce pas la fonction d'un masque? Oui! Oui, c'est ce que fait le masque.

Cela m'amène à une nouvelle approche: utilisez une image comme celle-ci comme masque CSS afin que la partie "manquante" de l'image de la bannière soit réellement manquante . Au lieu de dessiner des triangles de couleur d'arrière-plan sur le dessus de la bannière, couvrez-les complètement de la bannière et laissez le véritable arrière-plan se montrer. De cette fa?on, cela peut fonctionner dans n'importe quel contexte!

Le masque est très favorable à presque tous les endroits - du moins dans l'approche simple dont j'ai discuté ici. Nous parlons également de quelque chose qui peut être mis en ?uvre avec une amélioration progressive; Si les masques ne sont pas pris en charge dans un navigateur donné, vous n'obtiendrez pas d'effets déchiquetés. Ce n'est certainement pas la fin du monde.

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard.

Bureau

Mobile / tablette

Une fa?on de travailler les masques CSS est de fournir une image avec un canal alpha en tant mask-image . L'élément sous-jacent - l'élément aveugle - détermine sa (semi) transparence basée sur le canal alpha de l'image masquée. Donc, si votre image de masque est une théière blanche sur un fond transparent, les éléments en aveugle seront coupés en forme de théière et tout à l'extérieur de la théière sera caché.

Les masques peuvent être un concept incompréhensible. Sarah Drasner a un article qui explore le masque en profondeur, y compris la fa?on dont il diffère de l'édition. Les masques peuvent faire bien plus que ce que nous discutons ici. Consultez les spécifications, Caniuse et MDN pour plus d'informations.

Ce dont nous avons besoin est une seule image "dentelée" similaire au SVG ci-dessus, où la moitié supérieure gauche est remplie de blanc et le coin inférieur gauche est translucide. Et, idéalement, l'image ne devrait pas être un SVG réel, car cela nous ramènera au chaos de données laides auparavant.

à ce stade, vous pensez peut-être: "Hé, intégrez le SVG directement dans le CSS, définissez un masque dedans et pointez le CSS vers l'ID de masque dans le SVG!"

Bonne idée! Si vous pouvez modifier HTML, cela est certainement possible. Cependant, pour mon projet spécifique, j'utilise WordPress, je veux vraiment limiter mes modifications à Pure CSS au lieu d'injecter les pièces supplémentaires en HTML. Ce serait plus de travail. Je ne pense pas que ce soit rare; Pour de tels changements de démonstration, il est utile de ne pas avoir à modifier HTML. Nous convenons principalement que d'éviter les éléments d'emballage sémantiquement inutiles est simplement de fournir des crochets de style, mais je pense que cela s'applique également à l'ajout de balises SVG entières au document ... même des modèles WordPress.

Nous pouvons utiliser les gradients linéaires CSS pour créer des triangles:

 .el {
  Image d'arrière-plan: gradient linéaire (
    en bas à droite,
    Blanc,
    Blanc 50%,
    transparent 50%,
    transparent
  ));
}

C'est l'effet sur un fond radial, vous pouvez donc voir qu'il est vraiment transparent:

merveilleux! Nous pouvons l'utiliser directement comme mask-image pour les bannières, non? Nous devons définir mask-size (similaire à background-size ) et mask-repeat (similaire à background-repeat ), et nous avons terminé?

Malheureusement, non. Pas si bon.

La première raison est qu'à moins que vous n'utilisiez Firefox, vous pouvez voir que l'exemple ci-dessus n'a aucun masque du tout. En effet, au moment de la rédaction, Blink et WebKit ne prennent toujours en charge les masques avec des préfixes de fournisseurs. Cela signifie que nous avons besoin de tout avec -webkit- préfixe.

Outre le préfixe du fournisseur, ce que nous faisons est conceptuellement mauvais. Si nous limitons le masque aux bandes inférieures de l'image, en utilisant mask-size , alors le reste de l'image n'a pas du tout mask-image , ce qui l'observera complètement. Par conséquent, nous ne pouvons pas utiliser de décha?nement comme masques seuls. Nous avons besoin d'une mask-image qui est un rectangle de la même taille que l'image, avec un seul dentelé en bas.

Comme ?a:

Nous le faisons en utilisant deux images dégradées. La première image est le même triangle dentelé ci-dessus, qui est réglé sur repeat-x et est situé en bas afin qu'il se répète le long du bord inférieur de l'image. La deuxième image est un autre gradient, avec le plus bas de 30px (pour éviter de déranger le landeur), l'opaque supérieur (du noir au blanc dans la démo) et occupant toute la taille de l'élément.

Nous avons donc maintenant ce bloc de coin avec une seule dentelle triangulaire en bas qui occupe toute la hauteur de l'image de la bannière en deux sections distinctes. Enfin, nous pouvons utiliser ces blocs comme mask-image en les répétant horizontalement, ce qui devrait avoir l'effet que nous voulons:

C'est ?a!

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!