Projet communautaire Style une liste non ordonnée

Nous allons essayer quelque chose de nouveau aujourd'hui, quelque chose auquel j'espère que vous vous impliquerez tous: je veux que vous vous montriez! Je vais vous donner un simple élément de balisage (une liste non ordonnée) que vous êtes libre de styler à votre guise. Envoyez votre CSS et dignes exemples seront publiés sur le site la semaine prochaine. Continuez de lire pour en savoir davantage!

Mettre à jour!

Vous pouvez maintenant consulter les résultats si vous le souhaitez :)

C'est facile

Voici le balisage (téléchargez-le sous forme de fichier html si vous le souhaitez):

  Sandwich au fromage
 Mélamine
 Intrigue
 Arbustes
 Bavarder

Que pensez-vous pouvoir en faire, 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 cette liste via CSS!

Jouer avec les couleurs
Modifiez les polices (utilisez @ font-face si vous le souhaitez)
Structure comme un menu
Ajouter du contenu dynamique avec des pseudo-éléments
Devenir fou de dégradés
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. Si c'est un succès (laissez-moi savoir ce que vous pensez dans les commentaires), nous organiserons des projets communautaires de plus en plus ambitieux plus loin dans la suite…

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

Création de sites web