Tempo per un'altra sfida CodePen! Vogliamo che tu prenda un paragrafo dall'aspetto semplice e applichi un capolettera decorativo alla lettera iniziale: i migliori esempi saranno mostrati in una settimana circa!
Recentemente abbiamo pubblicato un tutorial su iniziale di lettere
, una proprietà CSS emergente attualmente in discussione al W3C. Se sei nuovo a rilasciare tappi, dai uno sguardo:
Sia che tu usi questa nuova tecnica, sia un approccio CSS più consolidato, vogliamo che tu ci mostri cosa è possibile con i capolettera CSS. Sii creativo, sii decorativo, usa la tua sensibilità tipografica e l'immaginazione del tuo progettista per far saltare le calze. Puoi usare caratteri web, colori, posizionamento, sfondi, trasformazioni, sfumature, maschere, qualunque cosa tu possa trovare.
Di solito con queste sfide ti chiediamo di non toccare il markup, ma in questo caso puoi cambiare il passaggio usato per darti la lettera iniziale che preferisci (ad esempio: una "O" potrebbe adattarsi a ciò che hai progettato, o un "P" potrebbe adattarsi bene al carattere che usi).
Nota: assicurati di dare credito se necessario.
Ecco cosa devi fare, in pochi semplici passaggi.
Innanzitutto, vai alla demo su CodePen.
Colpire il Forchetta per crearne una copia personale, aggiungere un altro passaggio di testo, se lo desideri, quindi apportare tutte le modifiche che vuoi al CSS.
Se hai effettuato l'accesso a CodePen, puoi modificare la descrizione premendo il pulsante impostazioni pulsante. Usa questo per dare un'idea alla gente di quello che hai fatto.
Colpire Salvare, hai finito. Assicurati di farci sapere nei commenti quando hai finito, e sentiti libero di farcelo sapere twittando anche noi @wdtuts.
Questo è tutto! Tutte le voci verranno aggiunte a questa raccolta su CodePen e i migliori esempi verranno mostrati qui e sui social media molto presto!
Buona fortuna e non dimenticare di seguire Envato Tuts + su Codepen!