CSS offre une variété de frameworks permettant aux programmeurs de concevoir des pages Web dynamiques. Il est plus convivial car il fournit toutes les fonctionnalités et outils importants en un seul endroit. Vous n’êtes donc pas obligé d’utiliser d’autres frameworks. Le framework Tailwind en CSS est le plus largement utilisé car il fait gagner du temps à l'utilisateur pour écrire du CSS excessif.
Ce guide explique l'utilisation du survol, de la mise au point et d'autres états dans Tailwind.
Comment utiliser le survol, la mise au point et d'autres états dans Tailwind ?
Lors de la conception de pages Web, il est nécessaire d’ajouter des éléments dynamiques et attractifs pour maintenir l’interactivité avec les utilisateurs. Les fonctionnalités de Tailwind peuvent être utilisées pour créer des pages interactives et dynamiques sans écrire de CSS personnalisé supplémentaire. Certaines fonctionnalités sont « survol », « concentration » et « active », ce qui contribue à ajouter de l'attrait aux conceptions.
Utilisation de la variante de survol en HTML
La propriété hover est utilisée pour styliser un élément HTML lorsque l'utilisateur déplace le curseur de la souris sur un élément spécifique. Cela aide à présenter une expérience fluide.
Étape 1 : appliquer la propriété « hover » en HTML
Créez un fichier HTML et appliquez la propriété hover à certains éléments du code. Pour avoir une idée, jetez un œil au code ci-dessous :
< corps >
< div classe = 'centre' >
< bouton classe = 'bg-green-500 survol : bg-blue-500 texte-blanc police-gras arrondi' >
Survolez-moi !
< / bouton >
< / div >
< / corps >
Dans ce code :
- Un bouton nommé « Survolez-moi ! » est créé par la balise bouton.
- ' bg-vert-500 ' définit la couleur d'arrière-plan du bouton sur vert.
- ' survol : bg-blue-500 'change la couleur du bouton du vert au bleu lorsque la souris est déplacée dessus.
- Le texte dans le bouton est de couleur blanche ' texte-blanc ' et ' Caractères gras ' rend la police en gras.
- La forme du bouton est arrondie par « arrondi ».
Étape 2 : prévisualiser la sortie
Après avoir exécuté le code ci-dessus, la vue finale ressemble à ceci :
On peut voir que le bouton change de couleur lorsque le curseur de la souris est déplacé dessus.
Utilisation de la variante Focus en HTML
La propriété focus est utilisée pour styliser les éléments HTML de telle sorte que lorsque l'utilisateur clique sur l'élément, il est mis en surbrillance pour attirer son attention.
Étape 1 : appliquer la propriété Focus dans le code HTML
Créez un fichier HTML et appliquez la propriété focus à un élément souhaité. Pour avoir une impression, considérez le code ci-dessous :
< div >
< / div >
< / corps >
Dans ce code :
- Le ' fléchir ' La classe crée un flex.
- Le ' justifier-centre » justifie l’alignement du contenu au centre.
- Le ' centre d'articles ' La classe ajuste les objets au centre de l'écran.
- Le ' écran h » définit la taille de l'écran en fonction de la fenêtre d'affichage.
- ' bg-bleu-200 ' définit la couleur d'arrière-plan sur bleu.
- Une zone de saisie de type texte est créée.
- Le ' mise au point : bg-green-300 'change la couleur de la zone de saisie en vert lorsque l'utilisateur clique dessus.
- ' w-64 ' définit la largeur à 64 px.
- ' h-10 ' définit la hauteur à 10px.
- ' px-4 ' ajoute un remplissage de 4px en haut et sur le côté gauche.
- ' py-2 ' ajoute un remplissage de 2px en haut et en bas.
Étape 2 : prévisualiser la propriété Focus
Enregistrez le code HTML et ouvrez la page Web créée par celui-ci. Déplacez ensuite le curseur sur la zone de saisie et cliquez dessus et le changement ci-dessous se produira :
Utilisation de la variante active en HTML
Cette propriété est utilisée pour styliser les éléments de la condition lorsque l'utilisateur appuie dynamiquement sur l'élément. L'état actif est la période de temps entre la phase d'activation du curseur et son état relâché.
Syntaxe
actif: { propriété }La propriété CSS spécifique est appliquée à l'élément sélectionné.
Étape 1 : appliquer la variante active dans le code HTML
Créez un fichier HTML et appliquez la propriété active à un élément qui dans le cas ci-dessous est un bouton :
< div classe = 'flex justifier-centrer les éléments-centre h-écran' >
< bouton classe = 'bg-green-600 p-4 arrondi-md transition-transformation durée-400 transformation active : échelle-110' >
Cliquez sur MOI !
< / bouton >
< / div >
< / corps >
Dans ce code :
- ' bg-vert-600 ' définit la couleur d'arrière-plan sur vert.
- ' p-4 » ajoute un remplissage de 4px.
- ' arrondi-md » rend la forme du bouton arrondie.
- ' transition-transformation » permet de transformer le bouton pour une petite durée qui est fixée par « transformation durée-400 ».
- Le ' actif : échelle-110 » transforme le bouton en une taille plus grande.
Étape 2 : prévisualiser la sortie
Enregistrez le code ci-dessus dans un fichier HTML et prévisualisez la page Web créée par celui-ci. La page Web ressemblera à :
On constate que la taille du bouton augmente lorsque la souris le maintient et dès qu'il est relâché, il revient à son état initial.
Conclusion
Pour utiliser le survol, la mise au point et d'autres états dans Tailwind, utilisez les classes d'état prédéfinies telles que « survol » et appliquez-leur certaines propriétés de style telles que le changement de couleur, la création d'une bague de mise au point, etc. Les utilitaires d'affichage sont utilisés pour présenter une sortie évolutive. Cet article a démontré la méthode pour utiliser le survol, la mise au point et d'autres états dans Tailwind.