18 Esercitazioni sull'effetto testo CSS3 e sulla tipografia Web

CSS3 si è già divertito molto nello sviluppo web fino ad ora. È ampiamente adottato. Il motivo alla base della sua adozione sono le capacità di sviluppo che porta in tavola. CSS3 è ora virtualmente in grado di disegnare qualsiasi cosa sulla lavagna; l'unico requisito è essere un designer esperto per utilizzare al massimo le sue funzionalità.

Oggi ho la possibilità di esaminare alcuni tutorial CSS3 sugli effetti di testo e sulla tipografia Web.

Stai cercando le stesse cose? Quindi, sei arrivato nel posto giusto mentre esamineremo alcuni dei migliori tutorial di effetti di testo CSS3 sul web.

Iniziamo.

Creazione di testi 3D

Amo il testo 3D. Offre una grande profondità per i lettori e offre un senso di realizzazione per i creatori. Con CSS3, creare testo 3D è un gioco da ragazzi.

Utilizzando il codice sul sito web, puoi creare testo 3D. Puoi personalizzare i parametri e sperimentare per capire come funziona e persino modificarlo per soddisfare le tue esigenze.

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Effetto Letterpress con CSS Text-Shadow

La stampa tipografica è un popolare effetto di testo utilizzato nel metodo di stampa industriale. Non è necessario utilizzare Photoshop o uno qualsiasi dei suoi diversi tipi di strumenti per creare l'effetto.

Crea una bellissima tipografia CSS3

La tipografia è uno dei fattori chiave per l'esperienza dell'utente. Con questo tutorial, puoi creare una bellissima tipografia CSS3. Il tutorial è suddiviso in passaggi ed è facile da usare.

Tipografia Web con Lettering.js e CSS3

CSS3 è un potente sostenitore. Diventa più utile se viene utilizzato con le librerie JS. In questo tutorial, utilizzerai la potenza di CSS3 e Lettering.js (un plug-in basato su jQuery per la creazione di un'interessante tipografia Web) per creare una potente tipografia Web.

Tipografia a inserto con CSS3

La tipografia dell'inserto è piuttosto interessante. In questo tutorial, l'autore Andrew Roberts spiega come creare una tipografia inset con l'aiuto del tutorial CSS3. Tutorial utile per chiunque stia cercando di migliorare le proprie capacità tipografiche utilizzando CSS3.

Delinea il testo utilizzando la proprietà del tratto di testo CSS3

In questo tutorial capirai come creare un tratto di testo attorno al tuo testo. Il tutorial utilizza la proprietà del tratto di testo CSS3 e semplifica la creazione di testo con una struttura. Puoi anche scegliere la trasparenza del testo usando le funzioni di trasparenza del tratto.

Creazione di effetti di testo anaglifico utilizzando CSS

Con questo tutorial, puoi imparare come creare effetti di testo anaglifici usando i CSS. Gli anaglifi sono un modo fantastico per creare immagini 3D armeggiando tra i canali rosso, verde e blu. Il testo può essere visto utilizzando un vetro 3D e quindi offre un ottimo valore dopo l'uso.

Tutorial testo ombra CSS 3D

Text Shadow è uno degli aspetti importanti del testo. Con questo tutorial, puoi creare testo CSS 3D con "ZOOM" e fare più trucchi come mostrato nel tutorial.

Il tutorial offre grandi dettagli per la creazione di un testo ombra CSS 3D.

Modifica del colore di selezione del testo predefinito

La selezione del testo viene mostrata modificando il colore del testo. Se non sapevi che il colore è personalizzabile, ora lo sai. Con l'aiuto del tutorial, puoi facilmente cambiare il colore di selezione del testo per il tuo blog.

Il colore è importante per qualsiasi marca. Usando il colore principale come colore di selezione del testo, stai programmando i tuoi clienti fedeli in modo che pensino a te se vedono quel colore. È un modo efficace per fare marketing e voglio che lo usi per la tua attività e per il business dei tuoi clienti.

Fantastici effetti di testo usando CSS3 Text-Shadow

CSS Text-Shadow è un pacchetto piuttosto sorprendente. In questo tutorial esplorerai l'uso del pacchetto CSS3 Text-Shadow, usandolo per creare fantastici effetti di testo. Alfonse Surigao scrive il tutorial.

Rotazione del testo con CSS

Un testo rotante è divertente da guardare e puoi farlo anche tu seguendo questo semplice tutorial scritto da uno sviluppatore web Jonathan Snook.

Ricettario CSS3

Come sviluppatore e designer, è sempre utile avere un libro di cucina in giro. CSS3 Cookbook: 7 ricette CSS super facili da copiare e incollare, ti offre fantastiche ricette da copiare e utilizzare. Un'ottima pagina da aggiungere ai segnalibri per un utilizzo futuro.

Aggiunta di un tratto al testo Web

Con questo tutorial, puoi facilmente accarezzare il testo come dovrebbe essere. Il tutorial è semplice e approfondisce l'argomento. Inoltre va avanti e spiega il limite di accarezzare il testo web.

Applicazione di gradienti di testo CSS

Nel breve video di 4 minuti imparerai come applicare le sfumature del testo. Il video è breve ma è utilissimo. Quindi, non perdere questo.

Amo la sfocatura

Niente di speciale qui, ma un piccolo trucco per mostrare un effetto sfocato sul testo I Love Blur. Puoi usarlo per inviare un messaggio diverso in un contesto diverso e quindi vale la pena imparare il trucco.

Poster CSS senza immagini

Un post sperimentale in cui l'autore cerca di creare un poster senza immagini. Raggiunge questo obiettivo utilizzando bei bit come border-radius, box-shadow, transform, @font-face, text-shadow, box-sizing e RGBa. Per crederci, devi leggere il codice, che è disponibile sul sito web.

Dimensionamento dei caratteri con Rem

Un altro semplice articolo di Jonathan Snook ci porta al dimensionamento dei caratteri con l'aiuto di REM. L'articolo è estremamente dettagliato e adorerai quanto amore ha messo l'autore nell'articolo. Un altro ottimo tutorial che vale la pena aggiungere ai segnalibri per riferimenti futuri.

Incartare

L'apprendimento è un percorso continuo. Non finisce mai, ed è per questo che ti abbiamo portato l'incredibile elenco di CSS3 Text Effect e Web Typography Tutorials. Molti dei tutorial sono estremamente approfonditi e vale il tuo tempo. Altri subiscono alcuni effetti di luce e sono ottimi da imparare per l'uso a lungo termine.

Spero che l'articolo ti piaccia. Se l'hai fatto, non dimenticare di condividerlo con i tuoi amici. Inoltre, commenta sotto il miglior tutorial che ti è piaciuto su Internet. Siamo ansiosi di imparare da te.

*ultimo aggiornamento 03/02/2019