Rounded corners – Angoli arrotondati
Quando css3 è pienamento supportato dal browser, rounded corners sarà semplice così:

.element {border-radius: 5px}
che setta un raggio di 5px su i 4 angoli. per il momento abbiamo bisogno di specifiche css per i browser ed un pò di java script.
In Safari,  Chrome, ed altri webkit browser si usa -webkit-border-radius ed in Firefox ed altri Mozilla browser si usa -moz-border-radius.

.element {
 border-radius: 5px
 -webkit-border-radius: 5px
 -moz-border-radius: 5px
}

Webkit e Mozilla usano diverse sintassi quando si specifica un solo angolo.

.element {
 border-top-left-radius: 5px
 -webkit-border-top-left-radius: 5px
 -moz-border-radius-top-left
}
Per non Webkit e Mozilla browser un piccolo jQuery plugin mimerà la proprietà border-radius.

$(”.element”).corner(”5px”);

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…..