Solutionwebmarketing.frSolutionwebmarketing.fr
    Ce qui est chaud

    Nouvelles hebdomadaires pour les designers № 671

    December 4, 2022

    Comment configurer une boutique WooCommerce pour les achats au point de vente

    February 16, 2022

    “Comment puis-je résoudre un problème ‘impossible’?” | par Lisa Zane

    February 15, 2022
    Facebook Twitter Instagram
    Facebook Twitter Instagram
    Solutionwebmarketing.frSolutionwebmarketing.fr
    Tuesday, January 31
    • Home
    • Conception de sites Web
    • Conception Tendance
    • Disposition
    • UX
    Solutionwebmarketing.frSolutionwebmarketing.fr
    Home»Conception Tendance»8 extraits CSS et JavaScript pour créer des effets de curseur sympas
    Conception Tendance

    8 extraits CSS et JavaScript pour créer des effets de curseur sympas

    BjornBy BjornFebruary 15, 2022Updated:December 4, 2022No Comments4 Mins Read
    Facebook Twitter LinkedIn Telegram Pinterest Tumblr Reddit WhatsApp Email
    Share
    Facebook Twitter LinkedIn Pinterest Email

    Les curseurs personnalisés sont un excellent exemple d’amélioration progressive de la conception. Vous commencez avec une interface utilisateur (UI) simple pour les petits appareils tactiles. À partir de là, les appareils plus grands offrent la possibilité d’inclure plus de cloches et de sifflets.

    Pour les utilisateurs d’ordinateurs de bureau et d’ordinateurs portables, les effets de curseur peuvent ajouter un élément amusant. Ils peuvent également être liés à l’image de marque. Pensez à un site Web sur le thème de Star Wars qui utilise l’emblématique sabre laser comme curseur. Les possibilités sont pour le moins intrigantes.

    Heureusement, la création de ces effets ne nécessite aucune astuce mentale Jedi. Au lieu de cela, un peu de CSS et de JavaScript est tout ce dont vous avez besoin pour commencer.

    Nous avons parcouru l’univers de CodePen à la recherche d’effets de curseur sympas. Voici huit extraits de code qui mettent en valeur la créativité des concepteurs de sites Web.

    Les différents états du curseur par Zack Hoherchak

    Avant de créer des effets exceptionnels, c’est une bonne idée de vous familiariser avec les différents états du curseur. Survolez les exemples ici et voyez comment le CSS cursor travaux immobiliers. Cela seul peut aider à améliorer la convivialité des éléments cliquables.

    Sentiers de curseur au néon par Kévin Levron

    Peut-être que cette piste de curseur aux couleurs vives ne convient pas à tous les types de sites Web. Mais dans le bon cadre (par exemple, un portefeuille), cet effet pourrait fournir un plaisir high-tech. L’animation fluide et les transitions de couleurs ne manqueront pas d’attirer l’attention de l’utilisateur.

    Écran de texte du curseur Spotlight par Caroline Artz

    Les effets de curseur peuvent aller au-delà de cette petite flèche (ou point, dans ce cas) sur votre écran. Ici, il ajoute un effet de survol de projecteur à un texte de titre. Ce qui est vraiment étonnant, ce sont les bits relativement petits de CSS et de JavaScript requis pour créer la présentation.

    Cet effet témoigne du potentiel des curseurs pour améliorer l’image de marque. Imaginez que ce curseur à éclaboussures d’encre soit utilisé sur le portfolio d’un écrivain ou même dans une imprimerie. Il est également restreint par rapport à certains des effets les plus extravagants. Cela le rend plus adapté aux entreprises

    Curseur circulaire avec mode de fusion par Clément Girault

    Voici une implémentation intelligente de CSS qui améliore la convivialité. En utilisant le blend-mode , le curseur change de couleur en fonction du contenu de la page. Cela peut améliorer la visibilité de l’élément sur une variété d’arrière-plans.

    Curseur de la souris pointant vers CTA par Aaron Iker

    Est-ce que vous vraiment vous voulez attirer l’attention d’un utilisateur sur une zone spécifique ? Cet extrait comporte une flèche de curseur qui tourne pour pointer continuellement vers un bouton d’appel à l’action. C’est une petite astuce qui pourrait être juste la chose pour pimenter une zone de héros ou d’autres liens importants.

    Curseur personnalisé interactif par hb

    Et si un curseur pouvait s’adapter contextuellement en fonction du type de contenu sur lequel vous survolez ? C’est l’idée derrière cet extrait. Le pointeur est un cercle par défaut. Mais survolez un lien et il se transforme en un contour rectangulaire. Il “colle” également aux éléments de navigation dans l’en-tête de la page.

    CurseurGeist par Adam Kuhn

    Les fêtes de fin d’année sont une excellente excuse pour utiliser les effets de curseur. Par exemple, Halloween offre un éventail de possibilités – comme ce fantôme effrayant. C’est festif, mais la couleur translucide signifie qu’elle ne détournera pas trop du contenu de la page. Notez également comment il réagit à la vitesse des mouvements de votre curseur.

    Les effets de curseur peuvent être un puissant outil de conception

    Un curseur personnalisé peut avoir autant d’impact que n’importe quelle astuce dans la boîte à outils d’un concepteur. Les extraits ci-dessus ont le pouvoir de transformer un site Web et de créer une ambiance spécifique.

    Mais comme on dit, un grand pouvoir s’accompagne d’une grande responsabilité. Et il est tout à fait possible de pousser un effet de curseur trop loin. Cela nuit à la convivialité, sans parler de l’accessibilité. Par conséquent, il est sage d’être judicieux quant à où et comment nous les mettons en œuvre. Pourtant, le bon effet peut aller loin.

    Vous cherchez plus d’inspiration? Découvrez notre Collection CodePen pour une gamme complète d’effets de curseur.

    Share. Facebook Twitter Pinterest LinkedIn Tumblr Telegram Email
    Previous Article3 Subtle But Success-Stifling Mistakes All Freelance Designers Make (And How To Avoid Them!)
    Next Article “Comment puis-je résoudre un problème ‘impossible’?” | par Lisa Zane
    Bjorn
    • Website

    Related Posts

    Nouvelles hebdomadaires pour les designers № 671

    December 4, 2022

    10 modèles gratuits pour créer des introductions professionnelles dans After Effects

    January 13, 2022

    Dealing with people who don’t like web designers

    December 8, 2021
    Add A Comment

    Leave A Reply Cancel Reply

    Meilleurs messages

    Nouvelles hebdomadaires pour les designers № 671

    Conception Tendance December 4, 2022

    8 extraits CSS et JavaScript qui célèbrent l’informatique rétro – Revivez l’époque des Commodore 64…

    Comment configurer une boutique WooCommerce pour les achats au point de vente

    Conception de sites Web February 16, 2022

    Prendre des commandes au point de vente est une perspective passionnante. Imaginez ceci : les…

    “Comment puis-je résoudre un problème ‘impossible’?” | par Lisa Zane

    UX February 15, 2022

    Vous êtes-vous déjà senti incroyablement submergé lorsque vous avez été chargé ou forcé de faire…

    Abonnez-vous aux mises à jour

    Plus d’heures
    Plus d'heures

    « Laissez-nous vous emmener dans une expérience plus profonde, faire d'un moment un souvenir transmissible durable. Laissez-nous vous aider à construire votre tribu.

    Meilleures informations

    Nouvelles hebdomadaires pour les designers № 671

    December 4, 2022

    Comment configurer une boutique WooCommerce pour les achats au point de vente

    February 16, 2022
    Social
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • YouTube
    • LinkedIn
    2022 © Solutionwebmarketing.fr Tous droits réservés

    Type above and press Enter to search. Press Esc to cancel.