Quindi diciamo che si sta costruendo una pagina web e lo stile con i CSS. Si dispone di un div identificato con container. All’interno di questo, si impiega la proprietà “float” e si dispone di due div in più: uno per il contenuto e l’latro per la sidebar. Una volta finito, si nota che il div del container non si estende fino in fondo fin oltre le due contenitori div. Finisce con un footer inatteso.
Ecco il codice HTML Quello che abbiamo qui è un container in cui si svolge tutto a una certa larghezza e il contenuto scorre all’interno di questo container. Abbiamo una zona content, e due barre laterali. Tutto è flottato a sinistra in modo che siano in linea retta. Poi, abbiamo un footer che è inferiore al container. Vediamo che cosa ci si aspetta:
I risultati di sopra sono inaspettati. La colonna content è più lunga della barra laterale, e il container div non si estende oltre il contenuto, spingendo il piè di pagina nello spazio disponibile. Tutto questo può essere fissato con una sola riga di CSS e non crederete quanto sia semplice. Nel piè di pagina è possibile inserire la seguente riga di CSS:

Non so perché questa proprietà, dai progettisti, crea così tanti problemi. Una volta che si sa’ come funziona, finisce per essere abbastanza semplice. Prendiamo il nostro campione HTML e CSS dall’ultimo esempio. Questa volta, nel content div, si crea un’ombra interna per far sembrare come se fosse incassato. Il CSS seguente consente di creare un’ombra interna rossa:
Facciamo alcune piccole modifiche al nostro HTML. Le larghezze della barra laterale sono ora 95px ciascuno, e ho aggiunto 5px di padding in modo che il contenuti non siano proprio sul bordo. È importante ricordare di includere prefissi dei produttori in modo che gli effetti appaiono nella maggior parte dei browser. Per capire come funziona il CSS è molto semplice. Il primo valore di “inset” indica al browser di posizionare l’ombra interno della box. Omettendo questa dichiarazione lo metterà sulla parte esterna per impostazione predefinita. I primi due valori in pixel determina la posizione orizzontale e verticale dell’ombra. L’impostazione a zero rende l’ombra uguale su tutti i lati. I numeri positivi rende l’ombra verso destra o verso il basso, e con i numeri negativi l’ombra si posiziona verso sinistra o verso l’alto. Il terzo valore determina il raggio di sfocatura dell’ombra, che gli darà un aspetto più morbido. Il quarto valore è la diffusione, che porta l’ombra più verso l’interno e rende un’ombra più prominente.
È possibile utilizzare i valori RGBA o esadecimale per determinare il colore dell’ombra.

Il risultato è mostrato sotto: Ovviamente ci vorrebbe qualcosa di nero o di grigio come il colore dell’ombra, ma si è usato il rosso solo per dimostrare come funziona il sistema di colore.
Ecco lo stesso box con un’ombra nera del tipo inset di colore nero #000, o rgba(0,0,0, .5):
L’ombra sul testo funziona nello stesso modo, ma non vi è alcun valore spread: è semplicemente la distanza orizzontale, la distanza verticale, e la quantità di sfocatura, con il colore alla fine.
Sopra, il CSS stabilisce che il tipo di carattere sarà Palatino Linotype, di colore bianco. Stabilisce anche che ci sarà un ombra sul testo di 2px a sinistra e in alto, in basso di 0px ed l’ombra è offuscata sui 3px. L’ombra sarà di colore blue.

I gradienti CSS sono belle, ma sicuramente da’ ai progettisti web un sacco di guai. Il concetto non è difficile da capire, e la sua implementazione non è neppure difficile. Il difficile è farli apparire su tutti i browser. Implementando tutte le soluzioni e i hack CSS è quasi impossibile ricordarli a memoria.
Per creare una sfumatura che va dal verde chiaro al verde medio è necessario utilizzare il seguente codice CSS:
Questo è un gradiente bello, tutto fatto senza immagini e completamente in CSS. La ragione per cui è così difficile, è perché si ha bisogno di otto linee di CSS al fine di ottenere che venga visualizzato correttamente su tutti i browser. La parte peggiore è che tutti hanno i prefissi dei loro stessi produttori. Ogni linea è diversa.
Prendiamo l’attuale base del CSS:
Questo codice stabilisce che l’ombra parte dall’alto con il colore #dbdb79 e con una dissolvenza verso il #8f8f24, interrompendosi quando arriva lo 0% per ripartire con il colore successivo aumentando l’opacità fino al 100%.

A tutti piacciono avere un bel menu a discesa sul loro sito. La maggior parte delle persone usano lo stile con un unico livello nel menù, che mostra le pagine principali, ma quando aggiungono le pagine di secondo livello, le cose possono diventare discutibili. Si può tentare di utilizzare il “display: none;” nello stile per nascondere il sottomenù fino a quando qualcuno si posiziona con il mouse sopra il menu: ma non funziona in modo affidabile. È qui il problema comune:
Il markup HTML
Il codice CSS:
Quando si passa il mouse sopra una delle voci di menù, dovrebbe avere il seguente effetto:
Il CSS si confonde con il menu a tendina quando si posiziona il mouse sopra il menu stesso. C’è uno stile CSS che deve essere presente per il vostro menu a discesa che cambia anche il colore una volta che si posiziona il mouse su di esso.
Questa regola è ciò che permette al sottomenu di apparire: se questo non è presente, le voci di sottomenu non verranno mostrate. Nel foglio di stile dichiariamo che tutti gli elenchi non ordinati in voci di elenco non dovrebbero essere visualizzati; poi, quando si passa il mouse sopra una lista non ordinata che si trova sotto una voce di elenco, verrà visualizzata.
Quando si passa il mouse sopra una delle voci di menu e il menu secondario, dovrebbe assomigliare a questo:

Usando lo stesso esempio di prima, cerchiamo di applicare un border-radius al nostro container div. Alcuni di voi forse non sapete che si può effettivamente determinare un raggio diverso per ogni angolo. Ecco come creare forme diverse con i CSS.
Di seguito è riportato il CSS per il container div.
Il codice inizia di sopra in alto a sinistra del nostro contenitore ed elenca ogni valore in senso orario intorno al div, in altre parole: in alto a sinistra 0px, in alto a destra è di 0px, in basso a destra è di 100px, e in basso sinistra è di 10px. Questo è impostato come padding o il margine è, con la stessa sintassi.
Si noti come il content div con il padding che va in basso a sinistra, interrompendo il design. Tenere questo in mente quando si utilizza border radius.