CodePen Challenge # 6 Capsules décoratives

Il est temps pour un autre défi CodePen! Nous voulons que vous preniez un paragraphe simple et que vous appliquiez une lettrine décorative à la lettre initiale. Les meilleurs exemples seront présentés dans une semaine environ.!

Le défi

Récemment, nous avons publié un tutoriel sur lettre initiale, une propriété CSS émergente en cours de discussion au W3C. Si vous êtes novice en lettrine, regardez:

Que vous utilisiez cette nouvelle technique ou une approche CSS plus établie, nous souhaitons que vous nous montriez les possibilités offertes par les lettrines CSS. Soyez créatif, soyez décoratif, utilisez votre sensibilité typographique et l’imagination de votre designer pour épater nos chaussettes. Vous pouvez utiliser les polices Web, les couleurs, le positionnement, les arrière-plans, les transformations, les dégradés, les masques, tout ce que vous trouvez possible.. 

Habituellement, avec ces défis, nous vous demandons de ne pas toucher au balisage, mais dans ce cas, vous pouvez modifier le passage utilisé afin de vous donner la lettre initiale que vous préférez (par exemple: un «O» peut convenir à ce que vous concevez “P” pourrait bien correspondre à la police que vous utilisez). 

Remarque: assurez-vous de donner crédit si nécessaire.

À vous

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

Étape 1

Tout d'abord, rendez-vous sur la démo de CodePen. 

Étape 2

Frappé le Fourchette bouton pour créer votre propre copie, ajouter un passage de texte différent si vous le souhaitez, 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 Réglages 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 ici et sur les médias sociaux très bientôt!

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