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
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
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 interessanti4) CREARE DELLE TABELLE PER INCOLONNARE TESTO
Si può incolonnare e separare del testo tramite l'utilizzo delle tabelle5) 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 icona6) 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
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
8) CAMPI OBBLIGATORI E OPZIONALI
Si può far conoscere al lettore tramite il CSS quali campi di un modulo siano obbligatori e quali opzionali9) 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 tecnica10) VISUALIZZARE EVIDENZIATI LE OPZIONI SCELTE
Per rendere più evidente una scelta con il quadratino di controllo si può aggiungere una evidenziazione11) 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
12) MOSTRARE ACCANTO A UN ELEMENTO LA SUA CLASSE
Si può visualizzare il nome di una classe accanto al suo attributo13) 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 CSS14) EFFETTO PARALLASSE
Si parla di effetto Parallasse quando si vuole mostrare lo sfondo che scorre usando un opportuno background15) SFONDI ANIMATI E COLORATI
Le animazioni sono tipiche del CSS3. La seguente mostra uno sfondo che muta di colore in modo automaticoSe 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.
Info sulla Privacy