Quando si usano le specifiche della proprietà font c’è bisogno di specificarle nel seguente ordine:

body { font: font-style font-variant font-weight font-size line-height font-family; }

Non c’è bisogno di specificare ogni singola proprietà, quelle non specificate saranno resattate su default.

Bottoni  3D CSS sono facili da creare. Il trucco sta nel dare agli elementi, dei bordi di diversi colori. Più chiari dove arriva la luce e più scuri dove non c’è.

div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }

Questo CSS crea un bottone dove la sorgente luminosa si trova in alto a sinistra. Normalmente una o due ombre di diverso colore è quanto basta, ma si può sperimentare per ottenere effetti diversi.

Per creare fluid images setta la proprietà “max-width” delle immagini su 100%

img {max-width: 100%}

Sfortunatamente IE non supporta “max-width”. Comunque IE esegue la proprietà “width” come se fosse “max-width”. Quindi per IE usa un  conditional comment tipo il seguente

img
<!--[if IE 6]>
img {width: 100%}
<![endif]-->

Per maggiori dettagli su creare immagini fluide su vecchie versioni di IE clicca sui link.

Ti è stato utile questo post? Lascia un commento……

Il posizionamento si usa per centrare in verticale/orizzontale elementi di tipo Block

HTML:

1. <div id=”content”>your content here</div>

CSS:

1. div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

L’angolo in alto a sinistra si posizionera’ a 50% dal top. Siccome vogliamo che il centro della div sia posizionata a meta’ misura dal top, settiamo un valore negativo per margin-top, uguale a meta’ dell’altezza della div.

Questo trucchetto funziona anche per centrare in orizzontale, Cambia “top” a “left” e “margin-top” a “margin-left” e setta il valore negativo del margin a meta’ della misura dell’elemento.
Il seguente esempio CSS centrera’ l’elemento sia in verticale che in orizzontale.

1. div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px; margin-left: -400px;  margin-top: -250px}

Ti e’ stato utile questo post? Lascia un commento…..

Se vuoi centrare verticalmente del testo all’interno di un block ad altezza fissa, semplicemente setta la line-height del testo alla stessa misura dell’altezza del block contenitore.

HTML:

1. <div id=”container”>some text here</div>

CSS:

1. div#container {height: 35px; line-height: 35px}

Ti e’ stato utile questo post? Lascia un commento….