Ci-dessous, vous trouverez quelques discussions sur les moyens de personnaliser certains éléments HTML. Beaucoup des éléments que vous devez concevoir pour votre application partagent les propriétés décrites ci-dessous. Gardez à l'esprit que ce ne sont là que des examples.
Au lieu d'utiliser les examples de code ci-dessous tel qu'ils sont, concevez vos propres widgets ou contrôles. Il m'est difficile de vous donner des points pour mon propre design et mon propre code.
Ici, nous allons jouer avec un champ d'entrée de texte simple. Il y en a aussi plusieurs dans l'application. Pour commencer, une entrée de texte ressemble à ceci.
<form action="#" autocomplete="off" id="textInput">
<fieldset>
<input id="first" type="text" name="first" required>
<label for="first">First Name</label>
</fieldset>
</form>
Notez que j'ai inclus une balise <form> et une balise <fieldset>. Elles ne sont pas absolument nécessaires pour notre example, mais si le champ devait être utilisé, il devrait être à l'intérieur d'un formulaire complet. Vous le savez déjà. Aussi, nous utiliserons le fieldset pour certaines transitions fantaisistes plus tard. Restez à l'écoute.
Le code ci-dessus, par défaut, ressemble à ceci.
Maintenant, nous pouvons personnaliser. Commençons par de simples modifications. La balise <input> n'est qu'un conteneur de texte. Vous pouvez lui appliquer n'importe quelle propriété qui affecte la typographie: font-family, size, color, etc. La zone de texte elle-même, le champ, est un élément de type bloc, elle a les propriétés: border, background, box-shadow, etc. Notez que la balise <label> se trouve après l’input. Ce sera pratique plus tard dans cet example. Vous pouvez faire autrement.
Donc, rendons le label bleu (ma couleur de texte par défaut sur cette page est grise). Et nous allons le placer juste en dessous du champ plutôt que sur sa droite. Aussi, faisons la bordure du champ qu'une simple ligne au bas du champ au lieu d'une boîte. Comme un formulaire imprimé.
Notez que je n'ai pas modifié la largeur du champ. Il est un peu trop petit pour un champ de texte réel. Dans votre application, vous devez tenir compte de la taille des champs. Mais cela n'a pas d'importance ici.
#textInput fieldset {
border: none;
}
#textInput label {
color: #339;
display: block;
}
#first {
outline: none;
border: none;
border-bottom: solid #339 2px;
}
Avec le code ci-dessus appliqué, ça ressemble à ça.
Maintenant, essayez de cliquer sur le champ pour taper dedans. Vous voyez comment la couleur, la bordure, etc. changent ? Cela se fait avec une transition entre les états dans le CSS. Le code pour la transition ressemble à ça.
#first {
outline: none;
border: none;
border-bottom: solid #339 2px;
transition: all 0.5s;
}
#first:focus { /*this is the focus state*/
border-bottom: solid green 2px;
background: lightgreen;
}
Laissons nous essayer quelque chose de plus fantaisiste. Nous mettrons le label à l'intérieur du champ. Et quand vous donnez le focus au champ, le label se déplace, et vous permet d'écrire ce que vous voulez.
Cela semble compliqué, mais ce n'est pas si mal. Le CSS est un peu plus élaboré. Le voici. Je vais l'expliquer plus bas.
#textInput fieldset {
border: none;
position: relative;
}
#textInput label {
position: absolute;
top: 1em;
color: #339;
display: block;
transform-origin: left;
transition: all 0.5s ease;
}
#first {
outline: none;
border: none;
border-bottom: solid #339 2px;
margin-top: 1em;
transition: all 0.5s;
}
#first:focus, #first:valid {
border-bottom: solid green 2px;
background: lightgreen;
}
#first:focus ~ label, #first:valid ~ label {
top: 0px;
transform: scale(0.8, 0.8);
color: green;
}
La première chose étrange que vous remarquerez ici est que nous fixons la position: relative; pour le fieldset. Cela permet de préciser ensuite la position absolue du label afin que nous puissions animer sa position.
Ensuite, nous avons position: obsolute; pour le label, comme je viens de mentionner. Ensuite, nous le positionnons de sorte qu'il apparaît à l'intérieur du champ: top est la propriété qui positionne un élément à partir du haut. Nous avons également défini transform-origin qui détermine de quel côté elle va s'étendre (nous y arriverons). Et bien sûr, nous devons fixer une propriété transition pour qu'elle anime la transition entre les états.
Vous remarquerez que j'ai ajouté un deuxième sélecteur: #first:valid à la règle. Ceci détermine les propriétés du champ lorsqu'il contient une valeur. Nous ne voulons pas que le label revienne dans le champ après que l'utilisateur a entré sa valeur.
La dernière règle utilise probablement un sélecteur que vous n'avez jamais utilisé. Le connecteur ~ sélectionne les éléments qui ont le même parent. C'est pourquoi nous avons besoin de mettre le <label> après le <input> dans le HTML. Comme ça nous pouvons le sélectionner en utilisant ce type de sélecteur ~. Donc, #first:focus ~ label signifie: obtenir l'élément label (sélecteur de balise) qui a le même parent que #first, quand celui-ci a le :focus (lorsque le point d'insertion du clavier est dedans). Qu'advient-il du label lorsque le champ reçoit le focus ? Il se déplace vers le top:0px; (à l'extérieur du champ, au-dessus). Nous le rendons aussi un peu plus petit. Et on le met vert, comme la couleur du fond du champ.
Je veux que vous remarquiez comment les couleurs dans les examples que je vous donne sont similaires et uniformes. Remarquez comment les états de base utilisent tous le même bleu, 339. Remarquez comment les états actifs utilisent le vert, 393. Et la plupart des gris sont ccc. Ce n'est pas par hazard. C'est une décision, c'est du design. Cela fait en sorte que les champs de texte et les boutons font partie de la même famille graphique, ils engagent le même langage visuel.
J'aurais pu utiliser d'autres caractéristiques pour souligner davantage ce langage visuel: l'épaisseur du trait, la forme de la boîte, le style de la ligne, les tailles relatives, etc. Cela fait partie de votre mandat de concevoir chaque élément de l'interface comme des membres d'un système. J'ai utilisé la couleur pour ça ici.
Parlons donc de couleur. Comment déterminez-vous combien de couleurs votre projet à-t-il besoin? Quel est le but de la couleur? Je ne parle pas de la couleur à choisir, je parle de l'utilisation des couleurs dans un produit. La couleur que vous utilisez dépend de différentes choses : l'humeur, le public, la marque, etc. Mais le nombre de couleurs et la façon dont vous utilisez la couleur est déterminée par certains besoins très spécifiques du produit.
Nous utilisons des couleurs pour une seule raison dans le design: pour distinguer/isoler/séparer. Ou si vous voulez, pour créer du contraste.
Vous avez besoin de couleurs différentes pour classer le contenu. Donc le nombre de couleurs que vous utilisez dans un produit est déterminé par le nombre de catégories de choses que vous avez. C'est tout.
Disons que vous voulez concevoir une lettre. Une lettre sera une feuille de papier et certains caractères imprimés ou écrits dessus. 2 choses : 2 couleurs. Typiquement, ceux-ci seront blancs (pour le papier), et noirs (pour l'encre). Mais, si vous avez de la fantaisie, ils pourraient être du beige clair (pour le papier) et du bleu foncé (pour l'encre). Mais c’est toujours deux catégories de choses, donc deux couleurs. Contraste. C'est vrai pour tous les produits que vous concevez.
Il y a d'autres façons de créer du contraste (forme, texture, taille, etc.), de sorte que vous n'avez pas nécessairement besoin d'une couleur pour chaque catégorie de choses. Mais c’est important de toujours utiliser les couleurs dans un but fonctionnel.
Or, pour déterminer les couleurs que vous utiliserez pour ce projet, identifiez les catégories de choses pour lesquelles vous devrez utiliser les couleurs: différents types de boutons, une hiérarchie des balises, des champs de différentes fonctions, etc. Une fois que vous savez comment vous avez l'intention d'utiliser les couleurs, vous pouvez décider des couleurs que vous utiliserez.