css3

Il currentColor è un valore CSS3 che permette di prendere il colore come un valore predefinito per un'altra proprietà.

Questa pseudo-classe intercetta il primo elemento figlio dell'elemento padre ( equivale a :nth-of-type. )

Nell'esempio sotto, il selettore intercetta tutti i primi elementi che sono figli dell'elemento section

section>h3:first-of-type {
  border-bottom: 2px solid #eeeeee;
}

I "mixins" permettono di inserire tutte le proprietà di una classe "padre", semplicemente includendo il nome della classe stessa come uno delle proprietà della classe "figlia".

.padre{ color: red; font-size: 12px; } 

.figlia{ .padre; }

La proprietà box-sizing è utilizzato per dire al browser quali proprietà di dimensionamento includere in larghezza e altezza: se includere il border e padding o solo il contenuto del box. Ad esempio , se si desiderano che due div siano fianco a fianco, si può creare un box-sizing a "border-box" . In questo modo il browser interpreta il box con la larghezza e l'altezza specificate posizionando il margin e il padding all'interno del nostro box.

Possiamo applicare un semplice effetto di transizione di 2 secondi con due semplici righe di codice CSS (+ le dichiarazioni cross-browser):

div {
  width: 200px;
  height: 200px;
  background-color: 98d925#;
 
  transition-property: background-color; /*standard*/
  transition-duration: 2s;
 
  -webkit-transition-property: background-color; /*Safari e Chrome */
  -webkit-transition-duration: 2s;
         
  -o-transition-property: background-color;      /*Opera*/
  -o-transition-duration: 2s;
         
  -moz-transition-property: background-color;    /*Firefox*/
  -moz-transition-duration: 2s;
}
 
div:hover {
  background-color: #ff5c00;
}