Quel meilleur moyen de lancer un projet communautaire de conception Web que sur CodePen? Pour ce qui est du premier de ces défis, je voudrais que vous consultiez notre exemple de stylo, le fourchiez et l’amélioriez. C'est tout ce que vous avez à faire. Les meilleurs exemples seront présentés dans une semaine environ!

Mise à jour: résultats!

Les inscriptions à ce défi sont maintenant closes. Jetez un coup d'œil à ce que vous avez tous imaginé!

Le défi

Il y a quelques semaines, Jonathan a écrit un tutoriel sur l'ajout de liens de sections dynamiques à une page Web. L’idée est qu’un extrait de code JavaScript traverse une page Web, trouve toutes les

 en-têtes de section, puis ajoute un lien à chacun d'eux permettant aux utilisateurs de partager ce lien.

Le lien lui-même est masqué jusqu'à ce que l'utilisateur survole le titre..

Voici la démo de Jonathan sur CodePen

Nous voulons que vous rendiez ce lien génial. Peut-être que vous changerez le texte pour une icône quelconque? Ou rendre le lien beaucoup plus petit et lui donner un arrière-plan? Peut-être que le changement d'opacité est un peu sûr pour vous: donnez-lui un peu de piquant et d'animation? Faites ce que vous voulez, tant que cela se passe dans les domaines de l'onglet CSS.

À vous

Voici ce que vous devez faire, en quelques étapes simples et faciles.

Étape 1

Tout d’abord, rendez-vous à la démonstration sur CodePen. Voici à quoi ça ressemble:

Étape 2

Frappé le Fourchette bouton pour créer votre propre copie, puis apportez autant de modifications que vous le souhaitez au CSS.

Étape 3 (facultatif)

Si vous êtes connecté à CodePen, vous pouvez modifier la description en appuyant sur le bouton Info bouton. Utilisez ceci pour donner aux gens une idée de ce que vous avez fait.

Étape 4

Frappé sauvegarder, vous avez terminé. Assurez-vous de nous le faire savoir dans les commentaires lorsque vous avez terminé et n'hésitez pas à nous le faire savoir en nous envoyant un tweet @wdtuts..

C'est tout! Toutes les entrées seront ajoutées à cette collection sur CodePen et les meilleurs exemples seront présentés sur Tuts + dans environ une semaine.!

Bonne chance et n'oubliez pas de suivre Tuts + sur Codepen!