Inserire commenti nel codice CSS

Per inserire un commento nel codice CSS utilizza la seguente sintassi:

@media print { div { /* rimuovo il colore di sfondo dai <divin caso di stampa del documento */ background-color: none; } }

Nel linguaggio CSS tutto il testo dentro /* */ verrà contrassegnato come un commento.… Continua a leggere

Creare un cerchio con i Css3

Creare un cerchio con i CSS3 è possibile tramite la proprietà border-radius che ci permette di arrotondare gli angoli di un elemento.

Farlo è semplicissimo, bisogna solo impostare a 50% la proprietà border-radius dell’elemento.… Continua a leggere

Css3 Transition

Normalmente quando un valore di una proprietà Css cambia, il risultato viene reso in modo immediato, modificando immediatamente il valore della vecchia proprietà con quella nuova.… Continua a leggere

Css3 tip: Rimuovere la box-shadow

Il questo blog ho già spiegato come applicare agli elementi delle ombre a nostro piacimento tramite la proprietà box-shadow dei Css3. Il procedimento è molto semplice infatti basta modificare pochi parametri della proprietà per avere effetti sorprendenti.… Continua a leggere

Ingranaggi animati con Css3

Ormai dovresti avere ben chiaro il concetto che con i Css3 è possibile creare fantastici effetti e animazioni con un buon impatto visivo: recentemente abbiamo creato delle Fish da Poker, un orologio digitale e un tablet solo con l’ uso dei Css.… Continua a leggere

Free 404 page template

Ho creato una nuova versione del tema, lo trovi qui: 404 page layout gratis. 🙂

Oggi vi presento un design di una pagina d’ errore 404(Page not found) creata interamente con Html5 e Css3, niente immagini o script, sono animazioni e transizioni Css; per visualizzare correttamente la pagina il tuo browser deve supportare i Css3 e almeno il markup Html5.… Continua a leggere

Css3 cool menu

Dopo una piccola pausa in Francia sono tornato e sono pronto per scrivere nuovi articoli per Explosive Lab Blog, oggi ti voglio presentare un altro menu Css con tanto di animazioni tramite le Css3 transition e layout Html5.… Continua a leggere

Css3 icon Menu

Giocando con le proprietà Css3 è possibile creare fantastici effetti, questa volta ho deciso di sviluppare un semplice menu ad icone che potete trovare qui.Di seguito trovate le tre immagini dei relativi stati del menu Css3, il primo a riposo, nel quale potete notare una leggera opacità:

 Il secondo stato invece rappresenta l’ :hover, eseguito in particolare sull’ elemento indicato dalla freccia:

 Il terzo rappresenta lo stato :active, cioè quando un elemento viene cliccato:

La struttura html5 del menu è la seguente:

<div class=”menu0″>  <ul>    <li><img src=”http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/Configuration.png” /></li>    <li><img src=”http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/Settings_-_Dark.png” /></li>    <li><img src=”http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/iTunes.png” /></li>    <li><img src=”http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/RAM.png” /></li>    <li><img src=”http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/Command.png” /></li>  </ul> </div>

Come potete notare il menu è composto da un semplice div con classe menu0 la quale contiene le seguenti regole Css3:

div.menu0 ul li{  display: inline; //imposto gli elementi in linea  list-style: none; //tolgo lo stile della lista  width: 100px; height: 100px;  padding: 32px 15px 12px 15px;  border-radius: 200px; //creo il cerchio  opacity: 0.7; //setto l’ opacità a 0.7  transition: all 0.8s; //imposto la transizione di tutti i tag li  -webkit-transition: all 0.8s; //per compatibilità Chrome…  -moz-transition: all 0.8s; //per compatibilità con Mozzilla  -o-transition: all 0.8s; //per compatibilità con Opera }

Poi tramite il selettore :hover imposto l’ opacità nulla della lista se il mouse passerà sopra di essa in questo modo:

div.menu0:hover ul li{  opacity: 1; }

Infine aggiungo 2 regole Css per definire le animazioni di rollhover e click:

div.menu0 ul li:hover{  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3);  background: #f0fdf0; } div.menu0 ul li:active{  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1),  inset 0 10px 10px rgba(0, 0, 0, 0.1),  inset 0 -10px 10px rgba(0, 0, 0, 0.1);  background: #d1f9d2; }

Vuoi altre icone?… Continua a leggere