Share
L'un des sélecteurs CSS les plus puissants et sous-utilisés est le combinateur général: ~. Dans les prochains tutoriels, je passerai en revue différentes manières d'utiliser ~ créer des composants non seulement visuellement attrayants, mais aussi fonctionnels et utiles. Ce tutoriel couvrira les éléments de formulaire; radio, case à cocher et entrées régulières.
Nous allons beaucoup apprendre: les sélecteurs CSS modernes, le changera propriété, SVG accident vasculaire cérébral propriétés, états d'entrée et beaucoup plus!
Avertissement: ces effets CSS peuvent ou non fonctionner dans les navigateurs plus anciens. Je les ai testés dans les dernières versions de Chrome, Firefox et Safari..
J'utiliserai Haml (un compilateur HTML) et Sass (un préprocesseur CSS) pour accélérer le processus de codage! Les démos utiliseront Haml, tandis que tout code en ligne utilisera du code HTML classique..
J'utiliserai également l'incroyable AutoPrefixer au lieu des préfixes de fournisseur. Si vous utilisez CodePen, assurez-vous de bien accéder aux paramètres de votre stylet, cliquez sur CSS et sélectionnez AutoPrefixer..
Sélectionnez AutoPrefixer dans les paramètres de votre styloNous allons commencer par l’un des éléments de base les plus élémentaires: l’entrée radio. Il y a deux états visuels principaux (coché et non coché) ainsi que deux états intermédiaires (survol et clic / clic actif est similaire en apparence à coché).
La première étape consiste à configurer notre code HTML. Vous aurez besoin d’un conteneur externe principal et d’un conteneur interne avec deux enfants: un div contenant les éléments d'entrée et visuels et un étiquette pour l'entrée. J'aime utiliser un champs pour le conteneur externe. Assurez-vous d’ajouter un identifiant pour l’entrée correspondant à la pour attribut sur l'étiquette.
L'étape suivante consiste à masquer l'entrée par défaut, à ajouter un style visuel de base et à masquer les éléments supplémentaires qui n'apparaîtront que lorsque l'entrée radio sera sélectionnée. L'idée est de rendre l'entrée invisible, mais de la positionner sur Haut des éléments visuels, de sorte que cliquer sur l'entrée radio ressemble à cliquer sur l'option radio visuelle. Nous pouvons le faire en mettant position: relative à .svg et position: absolue à l'entrée, puis cacher l'entrée.
Remarque: vous pouvez le formater comme bon vous semble. J'ai choisi un style de cercle de base qui imite la radio par défaut, sauf qu'il est plus plat.
Nous allons définir des variables de couleur en utilisant Sass; un couple de couleurs grises et un bleu vif pour la radio sélectionnée. Nous allons également définir une variable $ p pour notre valeur par défaut, unit-12px est un bon nombre car il est divisible par un large éventail de nombres différents (1, 2, 3, 4, 6).
Je mets directement les variables principales dans l’incorporation, mais un style supplémentaire peut être trouvé ici ou en cliquant sur la page CodePen, en cliquant sur Réglages en haut à droite et en cliquant sur le bouton CSS onglet pour afficher des feuilles de style supplémentaires.
Nous avons fait le premier cercle gris clair et le second bleu vif, puis caché le second en plaçant transformer: échelle (0). Plus tard, nous animerons le cercle, il est donc important de régler l'échelle maintenant.
Après avoir défini tout cela, nous devons décider des styles visuels pour chaque état. Pour cet exemple, j'ai décidé qu'en vol stationnaire, le cercle gris clair devait virer au bleu clair; au clic, le cercle bleu se met à l'échelle et le fond gris devient blanc, puis reste tel quel pour l'état coché. La seule façon de supprimer l'état sélectionné d'une radio est de cliquer sur une autre radio. Dans ce cas, le bleu et le blanc devraient tout simplement disparaître..
Nous allons d'abord définir les couleurs, puis animer une fois que tous les états auront des couleurs. C'est ici que le tilde ~ est très pratique. Ce sélecteur général de fratrie (le combinateur de fratrie) sélectionnera le deuxième élément tant qu'il est précédé du premier élément quelque part et partage un parent commun. Nous utilisons entrée: hover ~ div pour sélectionner l'élément visuel lorsque l'entrée est survolée.
Essayez de cliquer sur la première radio, puis sur la seconde. Vous devriez clairement pouvoir voir les états de survol et actifs / cochés..
La dernière étape consiste à configurer les animations pour chaque état. La clé pour animer tous ces différents états consiste à définir les transitions non contrôlées par défaut et à définir les transitions cochées lorsque l'utilisateur clique sur l'entrée. J'utilise une nouvelle propriété CSS appelée changera de laisser le navigateur savoir quelles propriétés je vais animer.
Vous pouvez également créer cette entrée radio personnalisée sans utiliser de fichier SVG. La configuration est similaire:
Le CSS est presque exactement le même, excepté avec un peu plus de style pour les deux div éléments qui ont remplacé les cercles SVG. Dans ce cas, nous utilisons nième de type (n) pour sélectionner les différents éléments div afin que nous n'ayons pas à leur donner une classe dans le code HTML.
Avec la version SVG, il y a plus de balisage mais moins de style; avec la version HTML, c'est l'inverse. Les résultats semblent identiques, alors essayez celui qui convient à vos préférences de codage.!
Le prochain élément de formulaire que nous allons personnaliser est l’entrée de case à cocher. Ses états sont similaires à ceux de l'entrée radio: deux états visuels principaux (cochés et cochés) et deux états intermédiaires (survolé et cliqué / actif)..
La configuration ressemble beaucoup à l'entrée radio, mais utilise des lignes pour former la coche au lieu de cercles.
Les lignes du premier groupe auront une couleur gris clair et ne seront pas animées. les lignes du second groupe s'animeront lorsque l'utilisateur cliquera sur l'entrée.
Il y a aussi un supplémentaire div élément; nous allons utiliser cela pour créer un effet de clic où le bleu vif se développe dans l'arrière-plan. Pour que l'effet fonctionne, la division doit être un cercle bleu avec une largeur et une hauteur supérieures à celles de la case à cocher réelle, et le conteneur extérieur doit avoir débordement caché; régler de manière à ce que les bords du cercle n'apparaissent pas. La ronde devrait avoir transformer: échelle (0) ensemble, semblable à la radio.
Dimensions de la case à cocher (à gauche) et dimensions du cercle (à droite)Encore une fois, formatez-le selon vos préférences. J'ai décidé d'arrondir les bords de la coche ainsi que tous les coins.
La prochaine étape consiste à préparer les animations. Les effets sont similaires à ceux de la radio, sauf qu'au lieu d'un cercle en expansion, la coche se dessine. Pour cette animation, nous devons utiliser accident vasculaire cérébral sur les lignes SVG.
Pour animer accident vasculaire cérébral, nous aurons besoin de la longueur de chaque ligne. J'ai créé un outil sur CodePen pour calculer les longueurs, mais si vous utilisez la coche que j'ai déjà créée, la longueur de la ligne la plus courte est 6.708 et le plus long est 14.873. Nous allons utiliser cette valeur pour définir les deux accident vasculaire cérébral et accident vasculaire cérébral. Ceci n'est nécessaire que pour la première coche (le deuxième ensemble de lignes est affiché par défaut à l'état non vérifié)..
Lorsque vous cliquez sur l'entrée, nous allons définir la accident vasculaire cérébral à 0, qui (avec une transition) ressemblera à la ligne est "dessinée". Nous devons également ajouter les autres changements d'état de la radio personnalisée, y compris les changements d'arrière-plan en survol et l'échelle du cercle au clic..
La dernière étape consiste à ajouter toutes les transitions. Encore une fois, nous allons définir les transitions non contrôlées par défaut et définir les transitions cochées au clic. De la même façon que le cercle s'estompe pour la radio, la coche disparaîtra lorsqu'elle sera décochée..
Vous pouvez également obtenir le même effet avec quelques éléments div au lieu d'utiliser un SVG; le balisage est plus simple, mais pas aussi clairement défini. La première division vide est le cercle bleu en expansion, la seconde est la coche par défaut et la troisième est la coche qui s'anime lorsque vous cliquez dessus..
Nous allons utiliser :avant et :après comme chaque partie de la coche, ce qui simplifie le balisage, sinon vous auriez besoin de quatre éléments vides ou plus pour créer les deux coches. Nous devons positionner les lignes manuellement et les faire pivoter, mais vous pouvez utiliser une seule transformation pour les faire pivoter et les dessiner..
Vous pouvez également utiliser un symbole de coche au lieu de faire pivoter des éléments div! Ce n'est pas tout à fait la même chose que les deux autres visuellement, mais ça marche aussi bien.
Remarque: vous n'avez besoin que du symbole HTML dans les deux derniers éléments div, mais dans la démo ci-dessous, je l'ai inclus dans les trois div afin de pouvoir l'inclure dans la boucle répétée.
Comme nous ne pouvons pas insérer le symbole, la version blanche apparaît en fondu. Découvrez les trois versions ci-dessous!
La dernière partie de ce tutoriel est la saisie de texte normale. Je me suis inspiré des entrées de la ligne Matériau de Google. Ces entrées ont plusieurs états différents: par défaut, actif / focus (lorsque le curseur clignotant est visible) et un survol subtil.
La configuration est encore plus minimale que les deux styles d’entrée précédents. Nous avons un ensemble de champs, l'entrée, une étiquette et un élément div pour la bordure.
L'étape suivante consiste à styler l'entrée. Nous ne cacherons pas l'entrée cette fois car nous en avons besoin pour montrer la valeur. Nous allons également créer une étiquette qui se déplace de haut en bas lorsque nous nous concentrons sur l'entrée. Pour que cela fonctionne, nous devrons positionner l'étiquette exactement au-dessus de l'entrée. La frontière div aura un :après pseudo-élément qui dessine au-dessus de la bordure lorsque l'utilisateur clique sur l'entrée; nous allons mettre un échelle (0) sur le pseudo élément pour le préparer à l'animation.
Si vous essayez de cliquer sur l'entrée de démonstration ci-dessus et commencez à taper, vous remarquerez que le texte est placé en haut de l'étiquette. Nous allons animer le libellé pour le réduire et le traduire au clic. Vous pouvez utiliser entièrement les transformations pour éviter de repeindre, au lieu d'utiliser taille de police comme je l’ai fait, mais j’ai trouvé que l’utiliser aussi bien que traduction m'a donné une animation beaucoup plus précise. Nous allons également supprimer l'échelle sur la div :après faire l'animation de dessin.
Maintenant, si vous essayez de cliquer sur l'entrée de démo ci-dessus et recommencez à taper, le libellé se réduit et se déplace sans à-coups, mais si vous laissez le texte saisi dans l'entrée et que vous cliquez à l'extérieur, le libellé s'abaisse à nouveau, obstruant l'entrée. Nous pourrions utiliser JavaScript pour empêcher ce problème, mais nous pouvons également utiliser un état d'entrée CSS appelé :valide.
Nous pouvons soit ajouter Champs obligatoires comme un attribut vide à notre entrée en HTML ou ajouter : requis => vrai à nos attributs d'entrée dans Haml. Puis on ajoute :valide au :concentrer propriétés dans notre Sass / CSS. Cela ajoute un état visuel supplémentaire à notre entrée et, comme il s'agit d'une simple saisie de texte, le seul état valide est celui où du texte est entré..
Remarque: l'utilisation d'un type d'entrée différent, tel qu'une entrée de courrier électronique, entraînera la rupture de ce comportement.
Si vous souhaitez créer vos propres entrées à l'aide de ces techniques, mais que vous avez besoin de plus d'inspiration visuelle, consultez les kits d'interface utilisateur disponibles avec un abonnement Envato Elements:
Kits d'interface utilisateur sur Envato ElementsIl existe des dizaines de façons différentes d'utiliser le sélecteur de frères et soeurs: visuel, fonctionnel ou les deux. Il fournit un moyen puissant de personnaliser les composants sans avoir à utiliser plus que CSS et HTML. Nous avons couvert trois types d'éléments de formulaire dans ce didacticiel. dans le prochain, nous explorerons les menus et la navigation. N'hésitez pas à laisser un commentaire ci-dessous si vous avez des questions ou des commentaires!
Accentsconagua