Le style de forme CSS3 pur est de plus en plus populaire. Il a ses inconvénients, mais le temps de chargement accru de la superposition JS traditionnelle est gaspillé dixièmes de secondes lorsque vous parlez d’optimiser pour maximiser pour l’ensemble de votre public. La plupart des formulaires sont assez simples et n’utilisent que des entrées et des zones de texte plutôt que des radios et des cases à cocher qui créent leur propre défi.
Le code d’exemple ci-dessous est juste un petit échantillon de ce que vous pourriez faire. N’ayez pas peur d’ajouter des dégradés d’arrière-plan ou de couleur à votre forme. Je me concentre sur un look gris standard pour la plupart des éléments, car il satisfait un public plus large que d’être spécifique à la couleur. Vous pouvez jouer avec l’ombre et la couleur de fond pour ajouter un look complètement différent à votre site Web. Si vous avez un site web sombre, je suggère d’échanger le code de formulaire CSS pour mélanger et pop sur un fond sombre. Il suffit d’ajouter ce CSS à votre feuille de style pour style instantanément n’importe quelle forme.
entrée {
rembourrage: 10px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
rayon de bordure : 4px ;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-shadow: 0 0 5px #444;
box-shadow: 0 0 3px #444;
bordure: 1px solide #fff;
}
textarea {
rembourrage: 15px;
bordure: 1px solide #fff;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
rayon de bordure : 4px ;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-shadow: 0 0 5px #444;
box-shadow: 0 0 10px #444;
}
entré[type="text"]e:hover, textarea:hover {
bordure: 1px solide #233567;
}
Formulaire par défaut sans CSS. Il ressemble à une forme assez ennuyeux pour moi!
Maintenant, si nous avons ajouté le CSS, nous pouvons vraiment améliorer l’apparence globale de la forme. Cette forme est beaucoup plus excitante! Il donne une sensation plus mise à jour et moderne avec les coins arrondis, l’ombre douce, et le rembourrage qui donne une plus grande impression. Ce style de forme s’adapte à beaucoup de sites Web, mais il ne convient certainement pas à tous les sites Web. J’espère que vous apprécierez la personnalisation de cette forme à votre goût.
Le CSS sur le formulaire a un grand impact sur votre apparence web. Si vous êtes intéressé à améliorer votre forme plus loin, vous pouvez personnaliser avec d’autres propriétés que vous trouverez dans les tutoriels sur ici: couleur de fond, gradient, rembourrage, ou même une image, mais je pense que vous serez satisfait juste en ajoutant un peu de CSS à votre feuille de style.
