Je ne sais pas trop comment je suis tombé sur celui-ci. Mais quelque chose m'a conduit à ce tweet:
Quelqu'un a-t-il fait cette interaction du curseur d'éclairage directionnel avec CSS? pic.twitter.com/zll7sk6kw5
— Bridges Jed (@jedbridges) 1er juillet 2020
et, pour moi, c'est un défi.
La conception des bouton est soignée. Mais je ne voulais pas faire de copie directe. Au lieu de cela, nous avons décidé de faire un bouton «Twitter». L'idée est que nous créons un bouton presque transparent avec une icône sociale dessus. Et puis cette icône sociale jette une ombre ci-dessous. Déplacer notre souris à travers le bouton fait une lumière dessus. En appuyant sur le bouton, le pousse sur la surface. Voici le résultat final:
Bouton Twitter CSS Lighting 3D CSS?
— jhey ?? (@ jh3yy) 30 janvier 2021
? https://t.co/qpfzewumey via @codepen pic.twitter.com/zwfwtpaixo
Dans cet article, nous allons voir comment vous pouvez également le faire. Ce qui est cool, c'est que vous pouvez échanger l'icône à ce que vous voulez.
Ma première approche pour créer quelque chose comme ceci consiste à échafauner le balisage. À la première inspection, nous devrons dupliquer l'icône sociale utilisée. Et une façon intéressante de le faire est d'utiliser des mélanges de carlin et de levier:
<span><span>mixin icon()</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title Twitter icon </span> <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span> </span>
Ici, nous avons créé un mixin pour rendre un SVG de l'icône Twitter. Cela rendrait l'icône Twitter si nous l'invitons comme ça:
<span><span>+icon()</span> </span>
Le faire nous donnera une grande icône Twitter.
Voir le stylo 1. Rendez une icône par SitePoint (@SitePoint) sur codepen.
Parce que les ensembles d'icônes sociales ont tendance à utiliser la même boîte Viewbox «0 0 24 24», nous pourrions faire les arguments de titre et de chemin:
<span><span>mixin icon()</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title Twitter icon </span> <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span> </span>
Ensuite, notre icône Twitter devient
<span><span>+icon()</span> </span>
Mais, nous pourrions le transmettre une clé - puis avoir les chemins stockés dans un objet si nous avons de nombreuses icônes que nous voulions utiliser ou répéter:
<span><span>mixin icon(title, path)</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title= title </span> <span>path<span><span>(d=path)</span></span> </span>
Cela peut être un moyen intéressant de créer un mélange d'icônes à réutiliser. C'est un peu exagéré pour notre exemple, mais mérite d'être noté.
Maintenant, nous avons besoin de marquage pour notre bouton.
<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>Il est toujours bon d'être conscient de l'accessibilité. Nous pouvons vérifier ce que notre bouton dégage en vérifiant le panneau accessibilité dans les outils de développeur de votre navigateur.
Ce pourrait être une bonne idée de mettre une portée pour notre texte de bouton et de masquer les icônes avec Aria. Nous pouvons également masquer le texte Span tout en le rendant disponible pour filtrer les lecteurs:
<span><span>mixin icon(key)</span>
</span> <span>-
</span> <span>const PATH_MAP = {
</span> <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span> }
<span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span> <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span> <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>Nous avons différentes options pour appliquer ces attributs coiffés ARIA. Celui que nous utiliserons est de modifier le code de mixin pour appliquer Aria-Hidden:
<span><span>.scene</span>
</span> <span>button<span>.button</span>
</span> <span>span<span>.button__shadow</span>
</span> <span><span>+icon('Twitter')</span>
</span> <span>span<span>.button__content</span>
</span> <span><span>+icon('Twitter')</span>
</span> <span>span<span>.button__shine</span>
</span>Une autre manière intéressante avec PUG est de passer par tous les attributs à un mélange. Ceci est utile dans les scénarios où nous voulons seulement passer certains attributs:
<span><span>.scene</span>
</span> <span>button<span>.button</span>
</span> <span>span<span>.button__shadow</span>
</span> <span><span>+icon('Twitter')</span>
</span> <span>span<span>.button__content</span>
</span> <span>span<span>.button__text</span> Twitter
</span> <span><span>+icon('Twitter')</span>
</span> <span>span<span>.button__shine</span>
</span>Si nous vérifions à nouveau le panneau Accessibilité , notre bouton se lit uniquement «Twitter». Et c'est ce que nous voulons!
Voici la partie pour laquelle vous êtes venu - comment nous stylissons la chose. Pour commencer, nous avons laissé tomber cela:
<span><span>mixin icon(key)</span>
</span> <span>-
</span> <span>const PATH_MAP = {
</span> <span>Twitter<span>:</span> "...path code"
</span> }
<span>svg<span>.button__icon<span>(role=<span>'img' aria-hidden="true" xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span> <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span> <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>qui nous permet de créer les transformations 3D dont nous avons besoin pour notre bouton. Essayez de désactiver cela dans la démo finale et vous verrez que tout se casse.
Cacher le texte de la portée de nos yeux. Nous pouvons le faire à bien des égards. Une façon recommandée de cacher un élément de nos yeux, mais pas celles de ScreenReader, consiste à utiliser ces styles:
<span><span>mixin icon(key)</span>
</span> <span>-
</span> <span>const PATH_MAP = {
</span> <span>Twitter<span>:</span> "...path code"
</span> }
<span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span><span>&attributes(attributes)</span></span>
</span> <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span> <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>Avant de commencer à travailler sur notre bouton, nous allons incliner la scène. Nous pouvons le faire en utilisant une transformation. Ici, nous enchaînons la transformation pour le faire dans la position que nous voulons. J'ai passé un peu de temps à bricoler les valeurs ici sur le flux en direct pour le rapprocher de l'original:
<span>* {
</span> <span>transform-style: preserve-3d;
</span><span>}
</span>Vous remarquerez également une variable de taille. Nous allons conduire certaines choses pour notre bouton avec les variables CSS. Cela le rendra pratique pour bricoler les valeurs et l'effet. Habituellement, nous les mettons sous la portée dans laquelle ils sont nécessaires. Mais, pour des démos comme celle-ci, les mettre sous la: Root en haut de notre fichier nous permet de jouer plus facilement.
<span><span>.button__text</span> {
</span> <span>position: absolute;
</span> <span>width: 1px;
</span> <span>height: 1px;
</span> <span>padding: 0;
</span> <span>margin: -1px;
</span> <span>overflow: hidden;
</span> <span>clip: rect(0, 0, 0, 0);
</span> <span>white-space: nowrap;
</span> <span>border-width: 0;
</span><span>}
</span>Ce sont les variables avec lesquelles nous travaillons, et ils auront du sens alors que nous construisons notre bouton.
Passons au bouton! L'élément de bouton va remplir l'élément de scène. Nous aurions pu appliquer le dimensionnement et se transformer directement sur le bouton. Mais si nous devions introduire d'autres boutons et éléments, nous devons les transformer et les tailler tous. C'est quelque chose à être conscient avec CSS en général. Essayez de faire en sorte que vos éléments de conteneur dictent la disposition:
<span><span>mixin icon()</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title Twitter icon </span> <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span> </span>
Ici, nous supprimons les styles de bouton. Et cela nous donne cela.
Voir le stylo 9. Styles de bouton de bande par SitePoint (@SitePoint) sur codepen.
Ensuite, nous devons créer un point de départ commun pour le contenu du bouton et l'ombre. Nous pouvons le faire en donnant à chaque élément un positionnement absolu. Le contenu aura une traduire en 3D en fonction de la variable de profondeur que nous avons définie auparavant:
<span><span>+icon()</span> </span>
Notez comment nous utilisons également la variable - radius.
Voir le stylo 10. Donnez la profondeur du bouton par SitePoint (@SitePoint) sur codepen.
Il est difficile de faire la distinction entre les deux icônes à ce stade. Et c'est le bon moment pour les coiffer. Nous pouvons appliquer un style d'icône de base et utiliser un remplissage à portée pour chaque icône SVG:
<span><span>mixin icon(title, path)</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title= title </span> <span>path<span><span>(d=path)</span></span> </span>
ça y arrive! Cependant, les icônes ne sont pas de la même taille en ce moment. Nous y reviendrons.
Voir le stylo 11. Appliquer le remplissage dans la portée par SitePoint (@SitePoint) sur codepen.
Faisons en place le bouton en place. Cette partie est très rapide à intégrer:
<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>c'est tout! En utilisant des variables CSS dans les parasites, nous disons supprimer la traduction de l'axe Z sur: Active. L'ajout de transition à la transformation l'empêche d'être si instantané.
Voir le stylo 12. Appuyez sur: Active by SitePoint (@SitePoint) sur codepen.
Il ne reste plus qu'à styliser les calques de bouton et l'éclat. Commençons par l'ombre:
<span><span>mixin icon()</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title Twitter icon </span> <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span> </span>
Un autre style portée ici. Nous disons que lorsque nous appuyons sur le bouton, l'ombre n'est plus floue. Et pour brouiller l'ombre, nous utilisons la propriété du filtre CSS avec un filtre flou - dont nous avons défini dans nos variables CSS. Ayez un jeu avec la variable - BLUR et voyez ce qui se passe.
Voir le stylo 13. Réduisez le flou sur le plan de survol par SitePoint (@SitePoint) sur codepen.
Pour la couche de contenu, nous allons utiliser une couleur d'arrière-plan, puis appliquer un filtre en toile de fond. Tout comme le filtre, le filtre en toile de fond est un moyen pour nous d'appliquer des effets visuels aux éléments. Un cas d'utilisation courant consiste actuellement à utiliser un flou pour le «Glassmorphisme»:
<span><span>+icon()</span> </span>
Nous utilisons la valeur de --blur et appliquons une transition pour le filtre de fond. En raison de la façon dont nous avons parcouru notre variable BLUR sur: actif, nous obtenons la transition presque gratuitement. Pourquoi le débordement: caché? Nous prévoyons cet élément Shine qui se déplacera autour du bouton. Nous ne voulons pas qu'il erre à l'extérieur, cependant.
Voir le stylo 14. Styling Content Layer par SitePoint (@SitePoint) sur codepen.
Et maintenant, la dernière pièce du puzzle - cette lumière brille. C’est ce qui fait que les icônes sont une taille différente. Parce qu'il n'a pas de styles, cela affecte la mise en page. Donnons-lui quelques styles:
<span><span>mixin icon(title, path)</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title= title </span> <span>path<span><span>(d=path)</span></span> </span>
Ce positionnement absolu réglera le dimensionnement des icônes. L'application d'un rayon de bordure fera la lumière. Et nous utilisons à nouveau le filtre pour donner l'effet flou flous. Vous remarquerez que nous avons enchaîné un filtre de luminosité à la fin pour égayer un peu les choses après qu'ils soient floues.
Voir le stylo 15. Styling Shine by SitePoint (@SitePoint) sur codepen.
L'utilisation de la traduction 3D garantit que la brillance se situe au-dessus du bouton, ce qu'il ferait. De cette façon, il n'y a aucune chance de se faire couper par la lutte Z avec d'autres éléments.
C'est tout ce dont nous avons besoin pour les styles pour l'instant. Il est maintenant temps pour certains scripts.
Nous allons utiliser Greensock ici pour plus de commodité. Ils ont des services publics soignés pour ce que nous voulons. Mais, nous pourrions obtenir le même résultat avec Vanilla Javascript. Parce que nous utilisons des scripts avec un «module» de type, nous pouvons profiter de Skypack.
<span><span>mixin icon()</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title Twitter icon </span> <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span> </span>
Et maintenant, nous sommes prêts à commencer à bricoler. Nous voulons que notre bouton réponde au mouvement du pointeur. La première chose que nous voulons est de traduire la brillance comme si elle suivait notre pointeur. La seconde consiste à déplacer le bouton en fonction de l'endroit où se trouve notre pointeur.
Saisissons les éléments dont nous avons besoin et configurons certains auditeurs d'événements de base sur le document:
<span><span>+icon()</span> </span>
Essayez de déplacer votre pointeur dans cette démo pour voir les objets de valeur que nous sommes retournés pour x et y:
Voir le stylo 16. Saisir des éléments et créer des auditeurs d'événements par SitePoint (@SitePoint) sur codepen.
C'est le morceau le plus délicat. Nous avons besoin de mathématiques pour déterminer la position de brillance. Nous allons traduire la brillance après sa réinitialisation initiale. Nous devons d'abord mettre à jour les styles Shine pour s'adapter à cela. Nous utilisons les variables CSS dans les plans --x et --y. Nous leur donnons un secours de -150 afin qu'ils soient hors de tir lorsque la démo charge:
<span><span>mixin icon(title, path)</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title= title </span> <span>path<span><span>(d=path)</span></span> </span>
Ensuite, dans notre fonction de mise à jour, nous calculons la nouvelle position de l'éclat. Nous basons cela sur un pourcentage de la taille du bouton. Nous pouvons le calculer en soustrayant la position du bouton à partir de notre position de pointeur. Ensuite, nous divisons cela par la position. Pour terminer, multipliez par 200 pour obtenir un pourcentage:
<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>par exemple, pos_x:
Nous multiplions par 200 parce que la brillance a la moitié de la taille du bouton. Cette partie particulière est délicate parce que nous essayons de suivre le pointeur et de le cartographier dans l'espace 3D.
Pour appliquer cela au bouton, nous pouvons définir ces variables CSS à l'aide de gsap.set. C’est une méthode GSAP qui fonctionne comme une seconde Tween nul. Il est particulièrement utile pour définir des valeurs sur les éléments:
<span><span>mixin icon(key)</span>
</span> <span>-
</span> <span>const PATH_MAP = {
</span> <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span> }
<span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span> <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span> <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>Mais, si nous voulons aller plus loin, nous pouvons utiliser un saut rapide de GSAP, qui serait mieux pour les performances dans les scénarios du monde réel où nous faisons beaucoup de mises à jour:
<span><span>.scene</span>
</span> <span>button<span>.button</span>
</span> <span>span<span>.button__shadow</span>
</span> <span><span>+icon('Twitter')</span>
</span> <span>span<span>.button__content</span>
</span> <span><span>+icon('Twitter')</span>
</span> <span>span<span>.button__shine</span>
</span>Cela fait que notre fonction de mise à jour ressemble à ceci:
<span><span>mixin icon()</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title Twitter icon </span> <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span> </span>
La précision du suivi du pointeur aurait besoin de plus de calculs pour être précis. Faites un jeu avec cette démo où le débordement sur le bouton est visible et la brillance est plus importante. Vous pouvez voir comment l'élément Shine perd son suivi.
Voir le stylo 17. Traduction de la brillance de jeu par SitePoint (@SitePoint) sur codepen.
Cette démo met tout là où elle devrait être.
Voir le stylo 18. Traduction de la brillance par SitePoint (@SitePoint) sur codepen.
Dernière fonctionnalité. Détectons le bouton pour une touche supplémentaire. Ici, nous allons baser le décalage du bouton en position de pointeur. Mais nous allons limiter son mouvement. Pour ce faire, nous pouvons utiliser un autre utilitaire GSAP. Nous allons utiliser MapRange. Cela nous permet de cartographier un ensemble de valeurs à une autre. Nous pouvons ensuite transmettre une valeur et récupérer une valeur mappée.
Tout d'abord, nous définirons une limite de mouvement. Ce sera un pourcentage de la taille du bouton:
<span><span>+icon()</span> </span>
Maintenant, dans notre fonction de mise à jour, nous pouvons calculer le pourcentage de décalage. Nous le faisons en mappant la largeur de la fenêtre contre la limite. Et nous entrons notre position de pointeur pour récupérer le pourcentage cartographié:
<span><span>mixin icon(title, path)</span> </span> <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span> </span> <span>title= title </span> <span>path<span><span>(d=path)</span></span> </span>
Dans ce bloc, nous mappons la plage de 0 à la fenêtre. . Nous faisons de même pour le changement vertical et cela nous donne une fonction de mise à jour comme ce qui suit:
<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>C'est ainsi que vous créez un bouton 3D allumé directionnel avec CSS et un petit script. Ce qui est cool, c'est que nous pouvons apporter des modifications avec une relative facilité.
Pour la démo finale, j'ai ajouté quelques détails supplémentaires et modifié l'icône. Vous pourriez le reconnaître.
Voir le stylo 20. Bouton SitePoint par SitePoint (@SitePoint) sur codepen.
Comme toujours, merci pour la lecture. Tu veux en voir plus? Venez me trouver sur Twitter ou consultez le flux en direct!
Création d'un bouton 3D qui change lorsqu'il est cliqué implique l'utilisation de la pseudo-classe active dans CSS. Cette pseudo-classe est utilisée pour styliser un élément lorsqu'elle est activée par l'utilisateur. Par exemple, vous pouvez modifier la couleur, la taille ou la position du bouton lorsqu'elle est cliquée. Voici un exemple simple:
.button: actif {
background-Color: # 3E8E41;
box-shadow: 0 5px # 666;
transform: tradlatey (4px);
}
Dans cet exemple, la couleur d'arrière-plan du bouton se transforme en une autre teinte verte lors du clic. La propriété Box-Shadow ajoute un effet d'ombre, et la propriété Transform déplace légèrement le bouton en baisse.
Ajout d'un effet de volants à votre Le bouton 3D peut être réalisé en utilisant: Pseudo-classe de survol dans CSS. Cette pseudo-classe est utilisée pour styliser un élément lorsque le pointeur de la souris est au-dessus. Vous pouvez modifier la couleur, la taille ou ajouter une ombre sur le bouton lorsqu'elle est planée. Voici un exemple simple:
.Button: Hover {
Background-Color: # 3E8E41;
Box-shadow: 0 5px # 666;
}
Dans cet exemple, le, le La couleur d'arrière-arrière du bouton passe à une autre teinte verte lorsqu'elle est surbout, et un effet d'ombre est ajouté.
Rendre votre bouton 3D Responsable implique l'utilisation de supports Requêtes dans CSS. Les requêtes multimédias vous permettent d'appliquer différents styles pour différents appareils ou tailles d'écran. Par exemple, vous pouvez modifier la taille ou la position du bouton en fonction de la taille de l'écran. Voici un exemple simple:
@Media Screen et (max-width: 600px) {
.button {
width: 100%;
padding: 20px;
}
}
Dans cet exemple, la largeur du bouton est définie à 100% et le rembourrage est augmenté lorsque la taille de l'écran est de 600px ou moins.
L'ajout d'un effet de transition à votre bouton 3D peut être réalisé en utilisant la propriété de transition dans CSS. Cette propriété vous permet de spécifier la vitesse de l'effet. Par exemple, vous pouvez faire changer la couleur ou apparaître progressivement. Voici un exemple simple:
.Button {
Transition: Background-Color 0.5S Ease, Box-Shadow 0.5S Ease;
}
Dans cet exemple, la couleur d'arrière-plan et l'ombre et l'ombre changer progressivement sur une période de 0,5 seconde.
La création d'un bouton 3D avec des coins arrondis implique l'utilisation de la propriété Border-Radius dans CSS. Cette propriété vous permet d'ajouter des bordures arrondies à un élément. Par exemple, vous pouvez rendre les coins du bouton rond. Voici un exemple simple:
.Button {
Border-Radius: 12px;
}
Dans cet exemple, les coins du bouton sont arrondis d'un rayon de 12px.
La création d'un bouton 3D avec un arrière-plan de dégradé implique l'utilisation de la fonction linéaire dans le CSS. Cette fonction vous permet de créer un gradient qui transitions entre deux couleurs ou plus. Voici un exemple simple:
.Button {
Background: linéaire-gradient (à droite, # ff7f00, # ff5500);
}
Dans cet exemple, l'arrière-plan du bouton transitions à partir d'un Couleur orange légère à une couleur orange plus foncée.
Créer un bouton 3D avec un effet d'ombre implique l'utilisation de la propriété Box-Shadow dans CSS . Cette propriété vous permet d'ajouter une ombre à un élément. Par exemple, vous pouvez ajouter une ombre sur le bouton pour le faire paraître 3D. Voici un exemple simple:
.Button {
box-shadow: 0 5px 15px rgba (0,0,0,0.3);
}
Dans cet exemple, le bouton a un Shadow qui est à 5px sous le bouton et a un rayon flou de 15px. La couleur de l'ombre est un noir semi-transparent.
La création d'un bouton 3D avec une bordure implique l'utilisation de la propriété de la bordure dans CSS. Cette propriété vous permet d'ajouter une bordure à un élément. Par exemple, vous pouvez ajouter une bordure au bouton pour le faire ressortir. Voici un exemple simple:
.Button {
Border: 2px solide # ff5500;
}
Dans cet exemple, le bouton a une bordure solide 2px avec une couleur d'orange.
La création d'un bouton 3D avec du texte à l'intérieur implique l'utilisation des propriétés de texte dans CSS. Ces propriétés vous permettent de styliser le texte à l'intérieur d'un élément. Par exemple, vous pouvez modifier la couleur, la taille ou la police du texte à l'intérieur du bouton. Voici un exemple simple:
.Button {
Couleur: #fff;
Font-Size: 20px;
Font-Family: Arial, Sans-Serif;
}
Dans cet exemple, le texte à l'intérieur du bouton est blanc, a une taille de 20px et utilise la police Arial.
Création d'un bouton 3D compatible avec tous les navigateurs implique l'utilisation de préfixes de fournisseurs dans CSS. Ces préfixes vous permettent d'utiliser de nouvelles fonctionnalités CSS avant d'être entièrement prises en charge dans tous les navigateurs. Par exemple, vous pouvez utiliser le préfixe -webkit pour Chrome et Safari, le préfixe -moz- pour Firefox et le préfixe -ms- pour Internet Explorer. Voici un exemple simple:
.Button {
-Webkit-Transition: Background-Color 0.5S Ease, box-shadow 0.5s facilite;
-moz-transition: fond. , Box-Shadow 0,5S Facilité;
-ms-transition: Color de l'arrière-plan 0,5s facilité, facilité de box-shadow 0.5S;
Transition: Color de fond 0,5 s facilité, box-shadow 0,5S Ease;
}
Dans cet exemple, l'effet de transition est compatible avec Chrome, Safari, Firefox et Internet Explorer.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
