CSS tip #3 – Quelle 5 cose da sapere…

28 dicembre, 2008 - Tags: css tip, webdesign

Continuo la mia piccola serie sui consigli (tips) per Css, restando ancora su argomenti di base in quanto sto avendo un buon feedback sul tema e sul livello trattato. Ricordo che cliccando “css tips” nella tag cloud qui a destra potrete filtrare tutti i post della serie, per ora sono solo 3 ma chissà tra qualche mese

Questa volta invece di trattare un’argomento preciso, indico e illustro 5 piccole tecniche molto semplici per cercare di ottenere effetti basilari con i CSS cercando di risparmiare quel mix letale di mal di testa e imprecazioni (nota: vedete il grafico del post precedente per capire!)

Centrare orizzontalmente un elemento con i CSS

Una delle prime cose non proprio immediate quando si inizia a lavorare con i Css (specie se si arriva dal disegnare layout con le tabelle) è la centratura orizzontale degli elementi. Si intende degli elementi stessi, non degli oggetti all’interno dell’elemento (come testi e immagini) che per questo aspetto sono gia a posto. Facendo un esempio: potreste voler racchiudere i contenuti della vostra pagina in un div “contenitore” , che ha una sua larghezza fissa e che volete ben in centro alla pagina… come si centra il “contenitore”?

...
margin: 0 auto;
...

Semplicemente indichiamo che il margine superiore e inferiore è pari a 0 (questo valore è un esempio, può essere quello che volete o di cui avete bisogno) mentre quello sinistro e destro sia “auto”. Ricordo che scrivere solo “margin: 0 auto” corrisponde a scrivere “margin: 0 auto 0 auto”.

Utilizzare immagini come titoli

Forse non sapete che il tag <h1> oltre a fornirvi il titolo principale della vostra pagina, aiuta la pagina stessa a essere visibile dai motori di ricerca. Quindi se ora siete sopraffatti dal dilemma su come utilizzare un’immagine come header senza che “accechi” Google & co, la risposta sta nel creare una classe CSS con queste regole:

h1 {
background-image: /* url della vostra immagine */;
background-repeat: no-repeat;
background-position: center center;
text-indent: -999%;
height: /* altezza della vostra immagine */;
width: /* larghezza della vostra immagine */;
}

Le prime tre righe sono abbastanza semplici: scegliete un’immagine di sfondo, indicate che l’immagine non va ripetuta, e la centrate in orizzontale e verticale. La quarta riga è la più interessante: praticamente prende il testo contenuto tra <h1> e </h1> e gli applica una rientranza negativa, facendolo cosi sparire dallo schermo, ma lasciandolo presente nel codice e quindi visibile dai crawler o dagli utenti stessi nel caso i css venissero disabilitati. Anche le ultime due righe sono molto semplici in quanto determinano larghezza ed altezza dell’oggetto.

Se avete qualche dubbio o siete un po scettici sul risultato di questo stile, sappiate che lo state vedendo in azione proprio su questo sito…

Scorciatoie nei CSS

Sia che scriviate il codice “a mano” o che usiate qualche editor (tipo Dreamweaver, Coda o altri) potreste aver l’esigenza di non eccedere nel peso dei vostri file .css , una cosa molto utile a riguardo è sfruttare le scorciatoie nei Css. Un’esempio può essere che una regola definita in questo modo:

margin-top: 10px;
margin-bottom: 10px;
margin-right: 8px;
margin-left: 8px;

Può essere semplicemente riprodotta in quest’altra forma:

...
margin: 10px 8px 10px 8px;
...

I valori vengono letti in senso orario partendo dall’alto, quindi: il primo valore è riferito a “top”, il secondo a “right”, il terzo a “bottom” e il quarto a “left”. Se poi , come nel nostro esempio, i valori sono speculari (left e right uguali tra loro, come top e bottom) si può stringere ancora di più scrivendo:  margin: 10px 8px; , in questo modo i valori inseriti (top e right) verranno applicati anche ai loro opposti (bottom e left).  Se invece i valori fossero tutti uguali tra loro, ad esempio di 10 pixel, si può sintetizzare ulteriormente scrivendo:  margin: 10px; .

Assegnare due o più classi allo stesso elemento

Questo può suonare un po banale, ma non tutti sono consci del fatto che è possibile applicare due o più classi allo stesso oggetto… il “trucco” sta nel separarle con solo ed esclusivamente uno spazio al momento in cui le chiamate nella proprietà “class”, ecco un’esempio:

...
<div class="classe1 classe2 classe3">Testo di prova</div>
...

Vi consiglio vivamente di evitare di applicare più classi che alterano la stessa proprietà, dove è possibile, vi risparmierà qualche mal di testa!

Centrare verticalmente un elemento con i CSS

NOTA: come descritto di seguito questo trucchetto è applicabile solo ad oggetti o classi con un’altezza fissa!

Poco dopo che si capisce come centrare orizzontalmente gli elementi, ci si accorge che la proprietà “vertical-align: middle” non ci restituisce proprio l’effetto desiderato… anche qui ci serve un piccolo barbatrucco in CSS:

height: 100px;
line-height: 100px;

Anche qui i valori sono puramente a scopo dimostrativo, potete usare quelli che volete, il concetto da comprendere è di impostare la proprietà “line-height” con lo stesso valore dell’altezza dell’oggetto nel quale volete centrare verticalmente il testo.

Nessun articolo correlato.