Pubblicato il 09/06/15e aggiornato il

15 tag CSS utili per arricchire i post.

15 tag CSS per migliorare l'aspetto del tuo sito rendendolo più originale.
Dopo aver pubblicato un articolo sui 10 tag HTML da conoscere per migliorare il nostro blog passo ad elencare i 15 tag CSS che possono essere interessanti per rendere i nostri siti più attraenti e sicuramente più originali. D'altra parte la fidelizzazione degli utenti spesso avviene proprio perché vengono più colpiti da una singola particolarità del sito che da tutto il suo contenuto. 

A chi da poco abbia intrapreso l'avventura del blogging e sia ancora acerbo in fatto di linguaggi di markup consiglio di leggere il mio ebook gratuito Guida all'HTML e al CSS per avere almeno una conoscenza di base.  Le Demo di ciascun tag sono state pubblicate su Codepen che è un interessante servizio che serve proprio per questa esigenza. Su Codepen si può ottenere il codice da postare in un articolo cosa che ho fatto in questo post. Il lettore può cliccare su HTML o su CSS per consultare i rispettivi codici utilizzati. Può anche andare su Result per vedere il risultato finale oppure su Edit on Codepen per aprire la pagina di Codepen e eventualmente editare il codice per visualizzarne l'effetto.

1) NUMERARE TITOLI E SOTTOTITOLI

Se nei nostri post utilizziamo molto spesso Intestazioni Secondarie o Minori come del resto possibile in Blogger con le Preferenze di Ricerca è possibile inserire in modo automatico una numerazione

See the Pen YXVMVo by Ernesto Tirinnanzi (@parsifal32) on CodePen.

2) SOTTOLINEARE

Può capitare di voler sottolineare con una linea tratteggiata invece che con una linea continua. Per la linea continua si può usare il tag border-bottom, invece per altre opzioni si può usare questa tecnica

See the Pen eNWoEV by Ernesto Tirinnanzi (@parsifal32) on CodePen.

3) VIRGOLETTARE LE VIRGOLETTE

Quando si quota un testo si può utilizzare il tag <q>. Se all'interno del testo citato ci sono altre virgolette si creano delle nidificazioni piuttosto interessanti

See the Pen aOWxVR by Ernesto Tirinnanzi (@parsifal32) on CodePen.

4) CREARE DELLE TABELLE PER INCOLONNARE TESTO

Si può incolonnare e separare del testo tramite l'utilizzo delle tabelle
See the Pen eNWoyM by Ernesto Tirinnanzi (@parsifal32) on CodePen.

5) MOSTRARE UNA ICONA CON IL TIPO DI FILE LINKATO

Quando si linka un file MP3 o PDF si può mostrare al lettore in modo automatico di che tipo di file si tratta usando una opportuna icona
See the Pen yNbrQK by Ernesto Tirinnanzi (@parsifal32) on CodePen.

6) EFFETTO STICKY

Uno sticky è un elemento del layout che rimane sempre fisso allo scroll della pagina. Questo lo si può fare anche con un widget ma in questo caso è possibile farlo con un riquadro che contiene testo o immagini

See the Pen yNbrvP by Ernesto Tirinnanzi (@parsifal32) on CodePen.

7) TESTO ESTERNO A UNA FORMA

Si può mostrare il testo esternamente a un forma. Questo tip funziona bene solo su Chrome. Nell'esempio il testo si mostra esternamente a un cerchio in cui è racchiusa una immagine
See the Pen oXWOqR by Ernesto Tirinnanzi (@parsifal32) on CodePen.

8) CAMPI OBBLIGATORI E OPZIONALI

Si può far conoscere al lettore tramite il CSS quali campi di un modulo siano obbligatori e quali opzionali
See the Pen NqjmMp by Ernesto Tirinnanzi (@parsifal32) on CodePen.

9) CAMBIARE COLORE DELLA SELEZIONE

In genere quando si seleziona un testo questo viene evidenziato di blu. Ci sono dei sistemi per modificare questo colore ma se lo si vuole fare in una sola parte si può usare questa tecnica
See the Pen JdNVvx by Ernesto Tirinnanzi (@parsifal32) on CodePen.

10) VISUALIZZARE EVIDENZIATI LE OPZIONI SCELTE

Per rendere più evidente una scelta con il quadratino di controllo si può aggiungere una evidenziazione

See the Pen pJPBKd by Ernesto Tirinnanzi (@parsifal32) on CodePen.

11) LETTERA INIZIALE DELLA PAGINA PIÙ GRANDE

Ci sono dei metodi per rendere gigante la prima lettera di un post ma vediamo come farlo in modo automatico con il CSS
See the Pen aOWxKP by Ernesto Tirinnanzi (@parsifal32) on CodePen.

12) MOSTRARE ACCANTO A UN ELEMENTO LA SUA CLASSE

Si può visualizzare il nome di una classe accanto al suo attributo

See the Pen OVmGoR by Ernesto Tirinnanzi (@parsifal32) on CodePen.

13) CENTRARE ORIZZONTALMENTE E VERTICALMENTE

Abbiamo già visto come si possa centrare un elemento orizzontalmente e verticalmente. Vediamo come si possa fare lo stesso anche con un elegante CSS
See the Pen doWLqx by Ernesto Tirinnanzi (@parsifal32) on CodePen.

14) EFFETTO PARALLASSE

Si parla di effetto Parallasse quando si vuole mostrare lo sfondo che scorre usando un opportuno background
See the Pen gpWyZM by Ernesto Tirinnanzi (@parsifal32) on CodePen.

15) SFONDI ANIMATI E COLORATI

Le animazioni sono tipiche del CSS3. La seguente mostra uno sfondo che muta di colore in modo automatico
See the Pen wadZNJ by Ernesto Tirinnanzi (@parsifal32) on CodePen.

Se questo articolo avrà una buona accoglienza non escludo di pubblicarne altri simili




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.