Projet communautaire Créez un formulaire de recherche simple

Le dernier projet communautaire a été un tel succès que je pense que nous devrions en faire une chose régulière. Ce mois-ci, je veux voir ce que vous pouvez faire avec un simple formulaire de recherche! Envoyez votre CSS et dignes exemples seront publiés sur le site la semaine prochaine. Continuez de lire pour en savoir davantage!

Vous pouvez utiliser toutes les techniques que vous voulez, pourvu qu'elles se produisent grâce à la magie de CSS

C'est facile

Je vais vous donner un simple balisage (une entrée de recherche et un bouton) que vous êtes libre de styler à votre guise. Voici le balisage (téléchargez-le sous forme de fichier html si vous le souhaitez):

Les entrées de recherche et les boutons nous présentent des défis de taille, mais un grand potentiel. Que pensez-vous pouvoir faire avec eux, en utilisant la puissance de CSS? Voici deux vraiment basique exemples, juste pour que vous ayez une idée de ce que nous faisons ici.

Tout va

Vous ne pouvez pas toucher le code HTML, sans exception. Mais il y a beaucoup de choses que vous pourriez faire pour styler ce formulaire de recherche via CSS!

Jouer avec les couleurs
Modifiez les polices (utilisez @ font-face si vous le souhaitez)
Jouer avec le placeholder
Ajouter du contenu dynamique avec des pseudo-éléments
Allez bonkers avec le bouton
Soufflez-nous avec les transitions
Même utilisez des textures et des images si vous le souhaitez (assurez-vous simplement de compresser le tout lorsque vous l'envoyez)

La seule chose que vous devez garder à l'esprit est que la page de démonstration a déjà ses styles réinitialisés avec normalize.css.

Enregistre-moi!

Cela ne pourrait pas être plus simple:

Télécharger les fichiers de base
Modifiez le style comme vous le souhaitez
Inclure toutes les données personnelles et une description de ce que vous avez fait
Zip votre fichier (s) et les envoyer à moi!

Je publierai les meilleurs quand j'en aurai rassemblé quelques-uns. Cela peut être en cours aussi - il n'y a pas de délai.

J'ai hâte de voir ce que vous venez tous avec! Bonne chance!

Création de sites web