@charset "UTF-8"; /* Moebiusmania.net - CSS Tips */ /* File di riferimento */ /* Per spiegazioni dettagliate sul funzionamento di queste regole */ /* visitate l'indirizzo: http://www.moebiusmania.net/tag/css-tip/ */ /* CSS Tip #1 - Angoli arrotondati */ .angoli_arrotondati { -moz-border-radius: 3px; /* Per i browser con base Mozilla(Gecko) */ -webkit-border-radius: 3px; /* Per i browser con base Webkit */ border-radius: 3px; /* Regola generale per CSS3 */ } /* CSS Tip #2 - Posizione, Z-Index e PNG */ .oggetto_posizionato { position:fixed; /* Posizionamento "fisso" sulla pagina */ top: 0; /* Distanza dal margine superiore del browser */ right: 0; /* Distanza dal margine destro del browser */ width: 100px; height: 100px; z-index: 90; /* "Livello" di posizionamento dell'oggetto */ } /* CSS Tip #3 - Quelle 5 cose da sapere... */ .centro_orizzontale { margin: 0 auto; /* Centra orizzontalmente l'oggetto */ } h1 { /* Regole per sostituire un testo racchiuso tra tag

con un'immagine */ background-image: /* Url della vostra immagine */; background-repeat: no-repeat; /* Annulla la ripetizione dell'immagine di sfondo e la posiziona al centro */ background-position: center center; text-indent: -999%; /* Nasconde il testo */ height: xyz ; /* Altezza della vostra immagine */ width: xyz ; /* Larghezza della vostra immagine */ } .centra_verticale { height: /* Valore a scelta*/ ; /* Impostate un valore di altezza */ line-height: /* Stesso valore */; /* Ripetete il valore del'altezza per ottenere la centratura verticale */ } /* CSS Tip #4 - Unire più file .css */ @import url("nome_file.css"); /* Importa il file .css specificato tra le virgolette */ /* CSS Tip #5 - Menu con :hover */ .testo_linkato a { color: #09F; /* Imposto colore e decorazione (assente) al link in stato normale */ text-decoration: none; } .testo_linkato a:hover { /* Aggiungendo :hover faccio in modo che questa regola venga applicata al passaggio del mouse */ color: #FFF; /* cambiando il colore del testo e applicando la sottolineatura al link */ text-decoration: underline; } /* HTML di base per il menu + il javascript per i link */ .provamenu1 { /* Formatto il menu per dare un'aspetto base */ list-style-type: none; width: 160px; padding-left: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #006; border-bottom-color: #006; border-left-color: #006; } .provamenu1 li { /* Formatto le voci del menu per dare un'aspetto base */ padding-top: 5px; padding-bottom: 5px; color: #FFF; background-color: #06F; padding-left: 10px; text-transform: uppercase; border-top-width: 1px; border-top-style: solid; border-top-color: #003; margin: 0px; } .provamenu1 li:hover { /* :hover applica gli stili al passaggio del mouse */ color: #1A64FC; /* cambia colore del testo */ background-color: #FFF; /* cambia colore dello sfondo */ cursor: pointer; /* cambia l'aspetto del cursore del mouse */ } /* CSS Tip #6 - Assoluto nel relativo */ #div1 { position: relative; /* posizionamento relativo per il "contenitore" */ margin-top: 20px; background-color: #000; } #div2 { position: absolute; /* posizionamento assoluto per l'oggetto da posizionare */ width: 50px; height: 50px; background-color: #900; top: 0; right: 0; } /* HTML Per il primo caso (div2 posizionato nella pagina)
/* HTML Per il secondo caso (div2 posizionato nel div1)
*/ /* CSS Tip #7 - Footer sempre in basso */ /* Vedi la pagina di esempio nel post: http://www.moebiusmania.net/css/tips/csstip7.html */ /* CSS Tip #8 - “Vedo e non vedo”, ovvero: la trasparenza */ .oggetto_trasparente{ opacity: 0.4; /* Proprietà generale per la trasparenza */ -moz-opacity:0.4; /* Proprietà specifica per Mozilla (Firefox 1, Netscape) */ -khtml-opacity: 0.4; /* Proprietà specifica per Safari 1 e Konqueror */ filter:alpha(opacity=40); /* Proprietà specifica per Internet Explorer */ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* Proprietà specifica per IE nel caso di :hover */ } /* CSS Tip #9 - Css di Natale! */ /* Vedi l'articolo originale http://www.moebiusmania.net/2009/12/08/css-tip-9-%E2%80%93-css-di-natale/ */ /* CSS Tip #10 - Primi e ultimi */ li:first-child{ /* Seleziona il primo elemento di una serie */ color: aqua; } li:last-child{ /* Seleziona l'ultimo elemento di una serie */ color: green; } /* CSS Tip #11 - Le immagini di sfondo */ .sfondo{ background-image: url(erba.png); /* imposto un'immagine di sfondo (url è obbligatorio) */ background-repeat: repeat-x; /* setto il tipo di ripetione, in questo caso solo orizzontale */ background-position: center top; /* indico la posizione dell'immagine di sfondo con due valori (orizzontale e verticale) */ background-color: #222222; /* uso il codice esadecimale di un colore per applicarlo allo sfondo */ /* in alternativa alle righe precedenti posso usare questa per riassumere tutti i valori in una sola proprietà */ background: url(erba.png) no-repeat #222222 center top; } /* CSS Tip #12 - Chi supporta i CSS3? */ /* Leggi l'articolo all'indirizzo http://www.moebiusmania.net/2010/07/04/css-tip-12-chi-supporta-i-css3/ */ /* CSS Tip #13 - Google Font Directory */ /* http://code.google.com/webfonts */ /* Dobbiamo prima importare il font nell'Html */ .elementi{ color: red; font-size: 30px; font-family: 'Lobster', 'Arial'; /* Dopo il webfont separandolo con una virgola possiamo indicare un font "classico" da utilizzare in caso ci fossero problemi di caricamento */ } /* Leggi l'articolo e guarda il video all'indirizzo http://www.moebiusmania.net/2010/08/29/css-tip-13-%E2%80%93-google-font-directory/ */ /* Realizzato da Salvatore Laisa */ /* http://www.moebiusmania.net */ /* Il contenuto di questo file è liberamente riproducibile */ /* senza consenso esplicito. Anche se non obbligatorio */ /* sarebbe gradito un link verso il mio sito come "fonte" */ /* in caso di pubblicazione. */