[Réunion de lecture du matin] Shanghai @ 瑞 心扉 雪 Notes "CSS Revealed"
Préface
Cette note est tirée des notes de Shanghai @ 瑞 心扉 雪 sur le chapitre 4 de "CSS Revealed".
Le texte commence ici ~
1. Projection unilatérale
1. La syntaxe d'implémentation standard box-shadow n'est pas écrite.
2. Projection unilatérale
L'utilisation d'un rayon de flou de 4 px pour l'élément signifie que la taille projetée sera environ 8 px plus grande que la taille de l'élément lui-même. Comment résoudre ça?
La solution finale vient du quatrième paramètre de longueur peu connu de box-shadow. Il vient après le paramètre de rayon de flou et s'appelle le rayon d'expansion.
Ce paramètre augmentera ou (lors de la spécification d'une valeur négative) réduira la taille de la projection en fonction de la valeur que vous spécifiez.
Par exemple, un rayon d'expansion de -5px réduira la largeur et la hauteur de la projection de 10px (c'est-à-dire 5px de chaque côté). Tels que la figure de démonstration 1.
Désolé, si le rayon d'expansion est défini sur une valeur de flou négative, la projection ne sera pas visible. Ensuite, utilisez le décalage pour vous déplacer, ou il formera une projection unilatérale.
3. Projection voisine
Astuce 1: Nous ne devons pas réduire la projection trop petite, mais simplement cacher l'ombre d'un côté et exposer l'autre côté naturellement. Par conséquent, le rayon de dilatation ne doit pas être défini sur la valeur opposée du rayon de flou, mais doit être la moitié de cette valeur opposée.
Astuce 2: Vous devez spécifier deux décalages, car nous voulons que la projection se déplace dans les directions horizontale et verticale en même temps. Leur valeur doit être supérieure ou égale à la moitié du rayon de flou, car nous voulons masquer la projection dans les deux autres côtés.
4. Projection recto-verso
Étant donné que le rayon d'expansion a le même effet dans les quatre directions (c'est-à-dire que nous ne pouvons pas spécifier que la projection est agrandie dans la direction horizontale et réduite dans la direction verticale). La seule façon est d'utiliser deux projections (une de chaque côté). Atteindre leurs objectifs. Ensuite, utilisez la technique en "projection unilatérale" deux fois.
2. Projection irrégulière
1. Box-shadow ne prend pas en charge la projection irrégulière.
(Après avoir ajouté des pseudo-éléments ou une décoration translucide à l'élément) La situation spécifique est la suivante:
Images translucides, images d'arrière-plan ou images de bordure (comme des cadres photo dorés à l'ancienne);
L'élément a une bordure en pointillé, en pointillés ou semi-transparente, mais pas d'arrière-plan (ou lorsque le clip d'arrière-plan n'est pas un cadre de bordure);
La bulle de dialogue, sa petite queue est généralement générée avec des pseudo éléments;
La forme chanfreinée que nous avons vue dans la section "Effet de chanfreinage";
Presque tous les effets de chanfreinage d'angle, y compris les exemples mentionnés dans la section "Effets de chanfreinage d'angle";
Formes générées par clip-path, telles que l'image de diamant mentionnée dans la section "image de diamant".
2. Solution (en utilisant des filtres CSS)
Par exemple, les paramètres acceptables du filtre drop-shadow () sont fondamentalement les mêmes que l'attribut box-shadow, mais il n'inclut pas le rayon d'expansion, n'inclut pas le mot clé inset et ne prend pas en charge la syntaxe de projection multicouche séparée par des virgules.
Par exemple, box-shadow: 2px 2px 10px rgba (0,0,0, .5); Vous pouvez écrire filter: drop-shadow (2px 2px 10px rgba (0,0,0, .5));
Le plus gros avantage des filtres CSS: ils peuvent se dégrader en douceur: lorsque le navigateur ne le supporte pas, il n'y aura aucun problème, mais aucun effet.
Si vous avez vraiment besoin que cet effet soit affiché dans autant de navigateurs que possible, vous pouvez attacher un filtre SVG en même temps pour obtenir une meilleure prise en charge du navigateur.
3. Effet de teinture
1. Utilisez des filtres
sépia () ajoutera un effet de coloration orange-jaune de désaturation à l'image, et la valeur de teinte de presque tous les pixels sera convergée à 35 ~ 40.
Si nous voulons que la saturation de la teinte principale soit plus élevée que cela, nous pouvons utiliser le filtre saturate () pour augmenter la saturation de chaque pixel.
Le filtre hue-roatate () décale la teinte de chaque pixel d'un degré spécifié. Afin de changer la valeur de teinte d'origine de 40 à 335, il est nécessaire d'augmenter d'environ 295 degrés (335-40).
2. Solution basée sur le mode mixte
Le "mode de mélange" contrôle la manière dont les couleurs de l'élément supérieur sont mélangées avec les couleurs du calque inférieur.
Lorsque vous l'utilisez pour obtenir un effet de teinture, le mode de fusion qui doit être utilisé est la luminosité.
Ce mode de fusion de luminosité conserve les informations de luminosité TSL de l'élément supérieur et absorbe les informations de teinte et de saturation de sa couche inférieure.
Pour définir le mode de fusion sur un élément, deux propriétés peuvent être utiles:
mix-blend-mode peut définir le mode de fusion pour tout l'élément
background-blend-mode peut spécifier le mode de fusion séparément pour chaque couche d'arrière-plan
Il existe deux options pour utiliser cette stratégie:
La première option: nous devons envelopper l'image dans un conteneur et définir la couleur d'arrière-plan du conteneur sur la couleur principale souhaitée.
La deuxième option: au lieu d'utiliser un élément d'image, utilisez un élément div: définissez l'arrière-plan du premier calque de cet élément sur l'image à teindre, et définissez l'arrière-plan du deuxième calque sur la couleur principale souhaitée.
Enfin, le lien Démo impliqué dans l'article
http://runjs.cn/code/h7z1dee8
http://runjs.cn/code/rwlu3nsx
http://runjs.cn/code/6iynubsr