Projet communautaire liste de styles et de descriptions

Style un quoi?! C'est vrai, dans ce projet communautaire, je veux que vous personnalisiez quelque chose que vous n'avez peut-être jamais utilisé auparavant; une liste de description… 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 (ish)

Je vais vous donner un simple élément de balisage (une liste de description) que vous êtes libre de styliser à votre guise. Voici le balisage (téléchargez-le sous forme de fichier html si vous le souhaitez):

  Psdtuts+
 Tutoriels Adobe Photoshop de débutant à avancé.
 Nettuts+
 Tutoriels de développement web, de débutant à avancé.
 Webdesigntuts+
 Didacticiels et articles approfondis sur la conception Web.
 Wptuts+
 Un site WordPress dédié à la formation, aux tutoriels et aux vidéos WordPress.

Description rapide des listes de description

Vous reconnaîtrez peut-être

comme un liste de définition, un élément qui existe depuis HTML4. Il a toutefois été réutilisé pour HTML5, car il était souvent mal compris et donc mal utilisé..

Une liste de description dans sa forme la plus simple comprend une liste

et description

. Il est possible d'avoir plusieurs termes pour une même description, tout comme plusieurs descriptions d'un même terme. Il existe également des bits supplémentaires de balisage tels que qui peut être jeté dans le mélange, mais nous nous en occuperons un autre jour :)

En savoir plus sur les spécifications du W3C si vous vous sentez curieux.

Que pensez-vous pouvoir faire avec cette liste, 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)
Le rendre sensible
Ajouter du contenu dynamique avec des pseudo-éléments
Focus sur la convivialité
Soufflez-nous avec des roulements et des 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