I siti web sono diventati un mezzo per condividere informazioni con il mondo intero. Questo è passato a includere media come foto e video. Ma il testo su una pagina web è ancora la scelta predominante per la pubblicazione sul Web. Ciò implicherebbe che il modo in cui strutturate i paragrafi, le frasi e il testo sulla pagina può avere un grande impatto se un visitatore sceglie di restare e leggere ciò che ha da dire.
In questo tutorial mi piacerebbe condividere alcuni suggerimenti CSS per la creazione di progetti di paragrafo o testo creativi. La leggibilità e le scelte dei caratteri sono spesso direttamente correlate al design stesso. Tuttavia, l'incorporazione di effetti di testo come capolettera, evidenziazioni e collegamenti ipertestuali riconoscibili si distinguono dagli altri contenuti della pagina. Dai un'occhiata alla mia dimostrazione dal vivo per vedere cosa stiamo cercando di costruire.
Demo dal vivo - Scarica il codice sorgente
Impostazione della pagina generale
Ho creato un tipico doctype HTML5 con un'area di contenuto centrale fissa. Gli stili di paragrafo sono pensati per apparire insieme ad altri elementi della pagina, come una casella di notifica o un blocco. Puoi dire molto per iscritto senza usare intestazioni secondarie sulla pagina.
Il mio foglio di stile è abbastanza semplice con un numero di ripristini e posizionamento CSS. Ogni elemento del paragrafo è in stile con em che utilizza un margine in più nella parte inferiore. Puoi anche vedere come ho creato il tag h1 usando i bordi orizzontali posizionati in modo uniforme al centro.
Ho scelto di usare? Helvetica Neue? come carattere principale su tutta la pagina. Questa è un'alternativa sans-serif a Helvetica, ma non dovrebbe limitare le scelte tipografiche per gli oggetti speciali della pagina.
Prima di saltare agli effetti, vale la pena di ignorare l'HTML. Guarda alcuni nomi di classe e i vari elementi che ho usato per scopi diversi all'interno di ciascun paragrafo.
Drop Caps paragrafo
La prima cosa che noterai probabilmente è la grande lettera scartata nel primo paragrafo. Questo elemento di paragrafo utilizza una classe di .primo che è direttamente legato all'effetto del capolettera. Gli scrittori spesso includono questo capitale abbandonato all'interno di libri e lavori di stampa - ma è anche ottimo per articoli sul web.
Noterai che ci sono due selettori applicati a questo effetto capitale scartato. CSS ha una pseudo-classe di nome :prima lettera che si rivolge alla prima lettera di ogni elemento. Nota che questo non funzionerà se il tuo paragrafo contiene un altro elemento che precede il testo (come una miniatura dell'immagine). Se hai bisogno di un'immagine sul paragrafo capolettera usa uno sfondo CSS invece del tag HTML img. Con questo :prima lettera selettore possiamo applicare il capolettera su qualsiasi paragrafo usando la classe .primo.
Ma con un'altra classe .capolettera potremmo applicare l'effetto avvolgendo in modo specifico la lettera in un elemento span. Questo apparirebbe come L nel documento HTML. Per i motori CMS come WordPress è più facile creare un tema che supporti il .primo classe aggiunta su ogni primo paragrafo nei tuoi post o pagine (o entrambi).
Ho anche progettato un effetto di capolettera alternativo che crea uno sfondo più scuro che circonda la lettera stessa. Si noti che questo capolettera alternativo utilizza la famiglia Helvetica Neue, mentre il capolettera originale cambia in Georgia o in un altro font serif. Questo prende il dialetto che troviamo spesso nei libri stampati e lo riproduce sullo schermo digitale.
Ora il secondo paragrafo della pagina usa una classe di .più grande che aumenta semplicemente la dimensione del carattere e l'altezza della linea dell'intero paragrafo. Alcuni siti web preferiscono ingrandire il primo paragrafo per distinguere dal resto della pagina. Ma potresti anche provare a combinare i capolettera con un testo più grande per attirare l'attenzione della gente.
Citazioni interne
Gli articoli che hanno citazioni da un'altra persona usano spesso blockquotes e altri elementi simili. Le virgolette sono leggermente diverse in quanto utilizzano il testo direttamente dall'articolo stesso. Questo è spesso fatto per enfatizzare un punto o una frase che è cruciale per il tema generale del contenuto.
Il mio disegno di preventivo è molto simile a quello che troverete qui su Design Shack. Utilizza uno sfondo leggermente più scuro insieme alle ombre delle caselle CSS3 per apparire più elaborato. Il testo della citazione interna è anche più grande per distinguersi dai molti altri paragrafi. È importante far scorrere queste virgolette sul lato sinistro o destro della pagina in modo che non appaiano come blockquotes regolari.
Quando si utilizza l'elemento blockquote HTML5 possiamo spesso includere altri elementi interni. Alcuni blockquotes includeranno più paragrafi e persino una citazione per la citazione. Lo stile di progettazione utilizza un sacco di padding e margini per creare spazio tra i paragrafi regolari. Il bordo sinistro è come un marcatore per aiutare i lettori a riconoscere immediatamente che il punto di blocco è diverso dagli altri paragrafi circostanti.
Simboli personalizzati
Anche se questo è un piccolo effetto speciale, i visitatori prendono nota durante la lettura di pagine di contenuti. Le entità HTML sono utilizzate per visualizzare simboli nel testo. Queste entità potrebbero utilizzare qualcosa come Font Awesome per visualizzare icone personalizzate, oppure puoi usarle per visualizzare simboli HTML tipici.
Nel mio esempio ho creato la e commerciale con un elemento di estensione wrapping. Questo cambierà la famiglia di font in Gabriela che usa più di un design serif. Un elemento span generico con la classe .fancyamp può applicare questa famiglia di caratteri all'entità senza influire su nessun altro testo. L'ho anche ridimensionato un po 'più grande per aiutare a distinguermi dalle lettere circostanti.
Ma non pensare che questo effetto possa essere usato solo per la e commerciale. Simboli di copyright, frazioni e altre entità HTML potrebbero trarre beneficio da questo design stilizzato. Potresti anche considerare altri effetti di testo come il corsivo in grassetto o l'aggiornamento del colore del testo.
Collegamenti e toni evidenziati
Nei primi paragrafi troverai del testo evidenziato insieme a un link di ancoraggio spiffy. Entrambi hanno un imbottitura extra perché entrambi utilizzano i colori di sfondo.
Per i link di ancoraggio ho scelto una tavolozza di colori verde, sebbene tu possa lavorare con qualsiasi mix di colori che meglio si adatta al tuo layout. L'effetto di sfondo aggiunto quando si passa il mouse su ciascun link aiuta i visitatori a riconoscere immediatamente una volta che si sono posizionati su qualcosa. Il testo del collegamento in realtà si scurisce in modo che si distingua dallo sfondo verde chiaro.
Dal momento che ho incluso il padding sui lati sinistro e destro, i margini negativi sono usati per neutralizzare gli spazi strani quando si passa da un link all'altro di ogni link. C'è anche il padding sul .evidenziare classe ma poiché questo non ha bisogno di a : hover design, lo spazio extra non sarà mai evidente.
Se un effetto di testo evidenziato non è sufficiente, puoi sempre creare classi secondarie per le notifiche di paragrafo. La mia classe .Avviso cambia drasticamente il colore del testo per abbinarlo alla tonalità più chiara del giallo sullo sfondo. Usando il CSS3 text-shadow la proprietà aiuta con la leggibilità. Puoi anche creare classi duplicate per caselle di avviso in altri schemi di colori come il verde o il blu.
Demo dal vivo - Scarica il codice sorgente
Chiusura
Non consiglierei di incorporare tutti questi effetti su ogni pagina del tuo sito web. Ma è consigliabile pianificare in anticipo questi stili e testare tutto prima di aggiungere codice al proprio foglio di stile.
I visitatori sono così abituati agli effetti tradizionali che puoi davvero catturare il pubblico con questi sottotoni. Sentiti libero di scaricare una copia del mio codice tutorial e vedere quali altre idee puoi aggiungere a questi effetti di paragrafo.