Per la maggior parte dei webdesigner, lo stile di un sito web con i CSS è abbastanza semplice. Fintanto che il codice HTML è semantico e i div e le classi sono progettati in modo sensibile, il processo di sviluppo dovrebbe essere abbastanza facile. Tuttavia, ci sono alcune proprietà del CSS che eludono le menti della maggior parte dei progettisti e molti rimangono come appesi sulle proprietà più ingombranti. Queste proprietà non sono così semplici e ci vuole un po’ per studiarle e capire come funzionano. Qui di seguito sono cinque delle proprietà più ingombranti del CSS, così come il modo migliore per sfruttarli e averli sotto controllo.

Nessuna di queste proprietà CSS sono impossibili, ci vuole solo un po’ di conoscenze di base e la comprensione di come il CSS influenza il layout e l’aspetto del disegno. Queste, sono tutte cose utili da sapere quando si progetta un sito web. Alcuni di essi possono essere fastidiosi, ma con un po’ di pratica, il CSS ci libererà del mal di testa in pochissimo tempo.

Clear
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
<div id="container">
  <h1>Intestazione</h1>
  <div id="content">
    <h2>Titolo</h2>
    <p>Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.</p>
  </div>
  <div id="sidebar">
    <h2>Lato 1</h2>
  </div>
  <div id="sidebar2">
    <h2>Lato 2</h2>
  </div>
  <div id="footer">Esempio di footer</div>
</div>            
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:
/**/
#container{
  background:#dbdb79;
  width:450px;
}
#content{
  background:#cccc33;
  width:250px;
  float:left;
}
#sidebar{
  float:left;
  background:#FFA400;
  width:100px;
}
#sidebar2{
  float:left;
  background:#BF8C30;
  width:100px;
}
#footer{
}
/**/
        
Risultato

Intestazione

Titolo

Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.

Lato 2

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:
/**/
#footer{
  clear:both;
}
/**/

Questo è tutto! Ora si dovrebbe avere il container div con il titolo H2 all’interno di esso. Al di sotto, in una linea, si avrà il content div e i deu div come barra laterale. Sotto ci sarà il footer div, che non ha colore di fondo, così sarà il colore verde chiaro del container div. Ora il container div si estende fino in fondo e avvolge il contenuto.

Intestazione

Titolo

Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.

Lato 2

Esempio di footer
Box Shadows
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:
/**/
#content {
  background:#cccc33;
  width:250px;
  float:left;
  padding:5px;
  -webkit-box-shadow: inset 0px 0px 2px 2px #f00;
  box-shadow: inset 0px 0px 2px 2px #f00;
}
/**/
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.

L’alternativa RGBA al valore esadecimale sarebbe qualcosa di simile a quanto segue:
/**/
rgba(200, 0, 0, .5);
/**/
Il codice si compone dai valori in rosso, verde, blu, e poi la trasparenza/alfa. I valori numerici vanno da 1 a 255, e le diverse combinazioni creano diversi colori. Alfa è un valore decimale che va da 0,1 a 1. 0,1 sarebbe il 10%, 0,5 sarebbe il , ecc.
Il risultato è mostrato sotto:

Intestazione

Titolo

Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.

Lato 1

Lato 2

Esempio di footer
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):

Intestazione

Titolo

Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.

Lato 1

Lato 2

Esempio di footer
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.
/**/
h2{
  Font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
  color:#fff;
  text-shadow: -2px 0px 3px #003366;
}
/**/
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.

Intestazione

Titolo

Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.

Lato 1

Lato 2

Esempio di footer
CSS Gradients
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:
/**/
#container{
  background: #a8e7ff; /* Old browsers */
  background: -moz-linear-gradient(top, #dbdb79 0%, #8f8f24 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdb79), color-stop(100%,#8f8f24)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #dbdb79 0%,#8f8f24 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #dbdb79 0%,#8f8f24 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #dbdb79 0%,#8f8f24 100%); /* IE10+ */
  background: linear-gradient(to bottom, #dbdb79 0%,#8f8f24 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdb79', endColorstr='#8f8f24',GradientType=0 ); /* IE6-9 */
}
/**/
Il risultato sarà simile a quanto segue:

Intestazione

Titolo

Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.

Lato 1

Lato 2

Esempio di footer
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:
/**/
(top, #dbdb79 0%,#8f8f24 100%)
/**/
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%.
Dropdown Menus
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
<div id="container">
  <div class="menubar">
    <ul>
      <li><a href="#" >Home</a></li>
      <li><a href="#">Prodotti</a>
        <ul> 
          <li><a href="#">Presentazioni</a></li>
          <li><a href="#">Gallerie</a></li>
          <li><a href="#">Applicazioni</a></li>
          <li><a href="#">Estensioni</a></li>
        </ul>
      </li>
      <li><a href="#">Noi</a> 
        <ul>
          <li><a href="#">Storia</a></li>
          <li><a href="#">Indirizzo</a></li>
          <li><a href="#">Servizi</a></li>
        </ul>
      </li> 
      <li><a href="#">Contatto</a></li>
    </ul>
  </div>
  <div id="content">
    <h2>Titolo</h2>
    <p>Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.</p>
  </div>
  <div id="sidebar">
    <h2>Lato 1</h2>
  </div>
  <div id="sidebar2">
    <h2>Lato 2</h2>
  </div>
  <div id="footer">Esempio di footer</div>
</div> 
Il codice CSS:
/**/
.menubar{
  border:none;
  border:0px;
  margin:0px;
  padding:0px;
  font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  font-size:14px;
  font-weight:bold;
}
.menubar ul{
  background: rgb(109,109,109);
  height:50px;
  list-style:none;
  margin:0;
  padding:0;
}
.menubar li{
  float:left;
  padding:0px;
}
.menubar li a{
  background: rgb(109,109,109);
  color:#cccccc;
  display:block;
  font-weight:normal;
  line-height:50px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
}
.menubar li a:hover, .menubar ul li:hover a{
  background: rgb(71,71,71);
  color:#FFFFFF;
  text-decoration:none;
}
.menubar li ul{
  background: rgb(109,109,109);
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:200px;
  z-index:200;
  /*top:1em;
  /*left:0;*/
}
.menubar li li {
  background: rgb(109,109,109);
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:200px;
}
.menubar li:hover li a{
  background:none;
}
.menubar li ul a{
  display:block;
  height:50px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:left;
}
.menubar li ul a:hover, .menubar li ul li:hover a{
  background: rgb(71,71,71);
  border:0px;
  color:#ffffff;
  text-decoration:none;
}
.menubar p{
  clear:left;
}
Quando si passa il mouse sopra una delle voci di menù, dovrebbe avere il seguente effetto:

Titolo

Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.

Lato 1

Lato 2

Esempio di footer
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.
/**/
.menubar li:hover ul{
  display:block;
}
/**/
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:

Titolo

Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.

Lato 1

Lato 2

Esempio di footer
Border Radius
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.
/**/
#container{
  -webkit-border-radius: 0 0 100px 10px;
  border-radius: 0 0 100px 10px;
}
/**/
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.

Titolo

Morbi ullamcorper consequat nibh, et porta augue volutpat id. Donec et purus nunc. Sed urna.

Lato 1

Lato 2

  Esempio di footer
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.

Similari
Allineare immagini e testo con i CSS
11% Css
Quando si inserisce un’immagine o del testo in un documento HTML, per default il testo viene allineato verticalmente al basale (baseline), questa è la linea di base del testo e l’immagine. Usando le proprietà CSS vertical-…
Come cambiare il colore del testo selezionato
9% Css3
Sebbene questa dichiarazione CSS3 potrebbe non essere fondamentale per il vostro progetto o disegno e, anche se non è supportato da tutti i browser, si presenta come un effetto fantastico che da al progetto un’ulteriore sp…
Finestre di messaggio CSS con CSS3
8% Css3
Quando si sviluppano applicazioni Web e si vuole visualizzare i messaggi all’utente, sarebbe opportuno renderli il più chiaro possibile. Inoltre, i colori possono dare all’utente una rapida occhiata su quello che sta succe…
Le 10 funzionalità principali in HTML5
8% Html5
L’HTML5 posside dei nuovi tag da usare per ottenere comportamenti precisi sulla pagina web. In questo post, si elencano i 10 nuovi, non per importanza ma per il vantaggio funzionale che si possono otenere rapidamente senza…
25 Tricks in CSS da conoscere
7% Css
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. …