Esempi CSS pronti all'uso
Snippet e risorse utili per realizzare ed integrare un sito web. Esempi e codici.
In questo tutorial parliamo di snippet (porzioni di markup/codice) e risorse CSS utili a realizzare o integrare un progetto web. Modifica dei testi e interventi grafici di vario genere: attraverso pratici esempi vedremo come dare un volto diverso alla nostra pagina.
Modifica dei testi
I nuovi standard e tecnologie oggi disponibili consentono un’elaborazione più articolata rispetto al passato. Un caso specifico riguarda i testi: grazie a nuovi tool o espedienti di markup è possibile implementare all’interno di pagine web porzioni testuali nel modo preferito.
È il cosiddetto “CSS text wrap”, un metodo che permette di realizzare testi racchiusi in contenitori molto diversi dai classici box rettangolari o quadrati.
Il sito Csstextwrap.com ci permette di velocizzare molto questo genere di operazioni: una semplice interfaccia di tipo drag and drop offre la capacità di inserire il testo desiderato e di modellarlo a piacimento (a piramide, cerchio o clessidra, solo per fare qualche esempio). Il risultato prodotto può poi essere implementato all’interno del proprio progetto grazie a tre pratici modi. Funziona in tutti i principali browser, Internet Explorer 6 incluso.
Modifica degli heading tag
Gli heading tag (H1-6) sono una componente fondamentale nell’ottimizzazione per i motori di ricerca. Il loro ruolo è la divisione dei contenuti attraverso sottotitoli di “diverso” valore. Poche righe di markup permettono al web designer di dare una diversa, e più piacevole, impronta grafica ai tag in questione.
Heading tag con sfumatura in dispersione
Il codice che vedremo in basso servirà a dare alla nostra intestazione un aspetto che sfuma sempre più man mano. Per fare questo, dovremo creare un’immagine con varie tonalità: dalla più scura alla più chiara.
h2 {font-family: Georgia, "Times New Roman", Times, serif;padding: 3px 0 5px 10px;background: #fff url(immagini/immagine-sfumata.jpg) repeat-y;color: #fff;border: 1px solid #ccc;letter-spacing: .2em;}Heading tag con scanalature oblique
In quest’altro esempio vedremo invece come creare un heading tag con sfondo monocromatico e scanalature oblique.
h2 {color: #443333;margin: 1.8em 0 1em;padding: 0 0 0 20px;width: 24em;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 2em;font-weight: normal;background: #eeeedd url('immagini/immagine-sfondo.png') bottom left repeat-x;}Il cuore di tutto è l’immagine da richiamare: un piccolo disegno grafico, comprensivo di scanalature oblique tracciate, dalle dimensioni di 4x47 pixel. L’attributo “repeat” consentirà poi di applicarla per la lunghezza desiderata.
Modifica delle liste ordinate
Le liste sono uno degli elementi primari del web writing: danno modo di strutturare in modo pulito l’informazione, permettendone una fruizione più semplice e soddisfacente da parte del navigatore.
Un po’ di marcatura CSS ci consente di dare uno stile diverso alle parti desiderate. Vediamo come fare.
Cambiamo lo stile generale della lista:
ol { font: italic 1em Georgia, Times, serif; color: #999999;}Ecco che avremo quindi stile font e colore di sfondo nuovi (corsivo dal colore chiaro).
Possiamo attuare una modifica sensibilmente più profonda intervenendo solo sull’area di paragrafo interessata:
ol p { font: normal .8em Arial, Helvetica, sans-serif; color: #000000;}In questo caso invece siamo intervenuti solo sull’aspetto testo classico, lasciando per i numeri le precedenti impostazioni.