Share
Tijd voor nog een CodePen-uitdaging! We willen dat u een eenvoudig ogende paragraaf kiest en een decoratieve drop-cap op de beginletter toepast - de beste voorbeelden worden over een week of zo tentoongesteld!
Onlangs hebben we een tutorial gepubliceerd eerste letters, een opkomende CSS-eigenschap die momenteel wordt besproken in het W3C. Als je nieuw bent in het drop-caps, kijk dan eens:
Of u deze nieuwe techniek nu gebruikt of een meer gevestigde CSS-aanpak, we willen dat u ons laat zien wat er mogelijk is met CSS-drop-caps. Wees creatief, wees decoratief, gebruik je typografische gevoeligheden en de verbeelding van je ontwerper om onze sokken uit te blazen. U kunt weblettertypen, kleuren, positionering, achtergronden, transformaties, verlopen, maskers gebruiken, wat u ook maar kunt vinden.
Meestal vragen we u bij deze uitdagingen om de opmaak niet aan te raken, maar in dit geval kunt u de gebruikte passage wijzigen om u de beginletter te geven die u verkiest (bijvoorbeeld: een 'O' kan bij uw ontwerp passen, of een "P" past misschien goed bij het lettertype dat u gebruikt).
Notitie: zorg ervoor dat je waar nodig krediet geeft.
Dit is wat je moet doen, in een paar doodeenvoudige stappen.
Ga eerst naar de demo op CodePen.
Druk op de Vork knop om uw eigen kopie ervan te maken, een andere passage van tekst toe te voegen als u dat wilt, en vervolgens zoveel wijzigingen aan te brengen als u wilt aan de CSS.
Als u bent aangemeld bij CodePen, kunt u de beschrijving bewerken door op de instellingen knop. Gebruik dit om mensen een idee te geven van wat je hebt gedaan.
Raken Opslaan, u bent klaar. Laat het ons weten in de comments als je klaar bent - en laat het ons gerust weten door ons ook twewdt tweeting.
Dat is het! Alle inzendingen zullen worden toegevoegd aan deze verzameling op CodePen en de beste voorbeelden zullen hier en op sociale media zeer binnenkort worden getoond!
Veel succes en vergeet niet Envato Tuts + te volgen op Codepen!
Accentsconagua