03 May
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.
26 Apr
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.
19 Apr
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……
12 Apr
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…..
06 Apr
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….