Questo articolo è per tutti i designer che si stanno approcciando al mondo del Web Design, ma anche per i più esperti che potrebbero essersi persi qualcosa per strada riguardo i CSS. A questo scopo ho steso una lista di 20 suggerimenti, tecniche e consigli su come costruire il design voluto nel modo più leggero possibile!

Il codice CSS può essere ingegnoso, e dovete esserlo anche voi.

1 – POSIZIONAMENTO ASSOLUTO

Se volete controllare la posizione di un oggetto nel vostro sito web, il posizionamento assoluto è la chiave. Se pensate al vostro come a una grande scatola, il posizionamento assoluto vi permetterà di controllare la posizione di ogni oggetto all’interno di quella scatola. Usate le regole top, right, bottom e left seguita da un valore in pixel o percentuale per controllare dove un elemento deve stare.

Il CSS soprastante posiziona un elemento a 20px di distanza dal margine alto e quello destro. Ricordate di usare la regola z-index per imposare i vari livelli di sovrapposizione degli elementi.

2 – * + SELETTORE

Il simbolo * vi farà selezionare tutti gli elementi di un particolare selettore. Per esempio, se usate * p e poi applicate lo stile CSS, applicherà lo stile a tutti gli elementi del vostro documento con un tag <p>. Questo è utile per modificare globalmente parti del vostro sito.

3 – SOVRAPPORRE TUTTI GLI STILI

Questo trick andrebbe usato con parsimonia e veramente di rado perchè se usate continuamente vi creerà grossi problemi a lungo termine. In ogni caso, se volete sovrascrivere un altro stile CSS per uno specifico elemento, usate !important dopo lo stile nel vostro CSS. Per esempio, se voglio che l’elemento <h2> di una specifica sezione, sia di colore rosso invece che blu, bisognerà usare il seguente codice:

4 – CENTRATURA

Centrare in CSS a volte può essere un problema, questo perchè dipende dal tipo di elemento da centrare. Diamo un’occhiata a come centrare in base al contenuto.

TESTO: il testo è centrato usando la regola text-align:center;. Ovviamente, se volete un allineamento a destra, sinistra o giustificato basterà usare le regole right, left o justify.

CONTENUTO: un div (o qualsiasi altro elemento) può essere centrato aggiungendo la proprietà block a esso e poi usando dei margini auto. Il codice CSS è il seguente:

Il significato della riga “tutto sotto il 100%” è per il semplice fatto che un elemento al 100% di larghezza non ha bisogno di allineamento. Perchè funzioni bisogna lavorare con delle dimensioni fisse come 70% o 700px, ecc…

5 – ALLINEAMENTO VERTICALE (PER UNA RIGA DI TESTO)

Questa regola CSS la userete all’interno di un menù, garantito. La chiave è settare l’altezza del menu con un valore uguale a quello della line-height del testo.

6 – EFFETTI DI HOVER

Questo effetto è utilizzato per bottoni, link, blocchi di testo o interi div, e tanto altro ancora. Se volete cambiare per esempio il colore quando un utente passa con il mouse sopra a un elemento, vi basterà cambiare lo stile e aggiungere :hover al selettore. Ecco un esempio:

Questo codice CSS cambierà il colore del vostro tag <h2> quando l’utente ci passerà sopra con il mouse. La parte bella dell’:hover è che vi basta dichiarare solo gli stili che devono cambiare, senza dover riscrivere tutto.

TRANSIZIONI

L’effetto :hover nudo e crudo tuttavia farà un cambiamento secco dello stile. Ecco che entra in campo la proprietà transition, che cambierà lo stile del vostro elemento in maniera graduale.

Questo codice applicherà l’hover in 0.3 secondi invece che in maniera secca, facendo apparire l’animazione più gradevole all’occhio dell’utente.

7 – LO STATO DEI LINK

Questi stili sono osuri a molti designer, causando di conseguenza problemi di usabilità all’interno del sito. La pseudo-classe :link controlla lo stile di tutti i link che devono ancora essere cliccati dall’utente. La pseudo-classe :visited controlla tutti i link che sono già stati cliccati e visitati dall’utente.

8 – IMMAGINI AL 100% IN SCALA

Un prolema comune è la gestione della grandezza delle immagini. Ecco che viene in nostro aiuto la proprietà max-width. Ecco un esempio:

La regola height:auto farà si che l’altezza sia automaticamente calcolata sulla larghezza del 100%. A volte è necessario dichiarare anche la regola width:100%.

9 – CONTROLLARE GLI ELEMENTI DI UNA SPECIFICA SEZIONE

Utilizzando l’esempio dell’immagine soprastante, se volessimo controllare lo stile di tutte le immagini di una certa sezione, ci basterà assegnare una classe a quest’ultima, seguendo con l’elemento da controllare. Ciò farà si che vengano influenzate solo le immagini della sezione con classe blog, tralasciando tutte le altre come il logo per esempio.

10 – IL FIGLIO DIRETTO

Avrei voluto conoscere questa regola quando mi trovavo agli inizi della mia carriera! Mi avrebbe risparmiato molto tempo. Usate > per selezionare il figlio diretto di un elemento. Per esempio:

Questo selezionerà tutti i link attivi che si trovano subito sotto l’elemento con ID footer. Non selezionerà altro dopo l’elemento attivo.

ELEMENTO SPECIFICO

Questo è perfetto quando state armeggiando con le liste. Vi permetterà di selezionare una specifica riga della vostra lista, semplicemente contandone la posizione e applicando questo stile.

Il CSS soprastante seleziona il secondo elemento della lista, rendendolo in grassetto, blu e sottolineato.

11 – APPLICARE IL CSS A CLASSI MULTILE O SELETTORI

Diciamo che volete applicare lo stesso bordo a tutte le immagini, la sezione blog e la sidebar. Non è necessario riscrivere lo stesso CSS 3 volte. Potete applicare rapidamente lo stesso stile a tutti gli elementi che volete.

Ricordate sempre che uno dei vostri scopri principali è quello di scrivere meno codice possibile. Imparate a risparmiare regole inutili.

12 – BOX-SIZING:BORDER-BOX;

Generalmente vi basterà applicare questa regola all’inizio del vostro foglio di stile (io solitamente faccio cosi) per risolvere tutti i problemi, con un selettore universale del tipo * {box-sizing:border-box;} per risolvere i vostri problemi. Cosa fa questa regola? Se generalmente create un div con un certa dimensione e gli applicate un padding, la dimensione del div aumenterà, sommando il padding. Il box-sizing:border-box; nega questo aumento di dimensione, applicando si il padding, ma senza stravolgerne le dimensioni.

box-sizing:border-box;

13 – :BEFORE

Questo CSS è un selettore che vi permetterà di scegliere un elemento CSS e inserire contenuto prima di ogni elemento con una specifica classe applicata ad esso. Diciamo che avete un sito internet dove volete un testo specifico prima di ogni <h2>. Dovrete usare questo stile:

Questo è estremamente utile se usate un icon-font e volete piazzare icone prima di certi elementi.

before

14 – :AFTER

Allo stesso modo del :before, abbiamo :after, che permette di fare l’esatto contrario.

after

15 – CONTENT

content torna utile quando volete inserire un elemento da controllare. L’uso più frequente che ne ho visto fare è quello di inserire un’icona da un icon-font in un posto specifico. Nell’esempio sopra vedete che dovete inserire il testo che volete tra doppie virgolette.

16 – CSS RESET

Ogni browser contiene delle specifiche CSS di default, che possono creare problemi nella creazione del vostro design. Ecco perchè è buona prassi, prima di iniziare, di resettare il vostro CSS a uno standard di base. Eric Mayer ne ha creato uno che funziona molto bene.

17 – DROP CAPS

Tutti amano i drop-caps. Ci ricordano come erano fatti i vecchi libri, con quella bellissima lettera iniziale più grossa di tutto il testo. Riprodurla in CSS non è per niente difficile utilizzando il pseudo-elemento :first-letter. Ecco un esempio:

Questo codice creerò un margine di 3px attorno alla lettera iniziale, per evitare la sovrapposizione, rendendola di 3 volte più grande del testo e di colore rosso.

dropcap18 – FORZA LO STILE DEL TESTO DA MAIUSCOLO, MINUSCOLO O SOLO LE LETTERE INIZIALI

Sarebbe assurdo scrivere un’intera sezione del sito web in maiuscolo. Immaginate dover cambiare successivamente a causa di una variazione dello stile del sito. Il CSS ci viene incontro permettendoci di controllare questa cosa.

h2 { text-transform: uppercase; } – tutte maiuscole
h2 { text-transform: lowercase; } – tutte minuscole
h2 { text-transform: capitalize; } – rende maiuscola la prima lettera di ogni parola

19 – ALTEZZA VERTICALE DEL MONITOR

A volte volete che una sezione riempia l’intera altezza del monitor, a prescindere dalla grandezza dello schermo. Il numero precedente è una percentuale, quindi se volete impostare la sezione al 100% dovete scrivere 100.

20 – APPLICARE LO STILE AI NUMERI DI TELEFONO

Applicare lo stile a un numero di telefono nel vostro sito web potrebbe risultare difficile con la tradizione regola dei link. Eccovi allora un piccolo aiuto:

 

16 consigli per aumentare il traffico e le visite al tuo Sito Web

LASCIA UN COMMENTO