CSS3: tips and tricks

Postato il 2 settembre 2012

Questi sono alcuni degli stili CSS3 che applico alla maggior parte dei siti (combinati tra di loro), fornendo graficamente un risultato di ottima qualità. Ricordate, la dinamicità del sito è importante.

Qui troverete una lista di tools online, utile a chi non conosce i codici a memoria o ci capisce poco:



Di seguito alcuni codici che uso spesso.


Cambiare il colore di sfondo del testo selezionato
::selection {
 background:black;
 color:white;
}

::-moz-selection {
 background:black;
 color:white;
}

::-webkit-selection {
 background:black;
 color:white;
}

Transizioni e animazioni in CSS3
Mettete il codice -transition nell'elemento allo stato normale, applicate i cambiamenti nell'evento :hover, la transizione agisce sulla maggior parte delle proprietà: width height background color padding margin e molto altro. Per cambiare la durata dell'animazione, cambiate il parametro in parte a s (2s sono due secondi, 0.2s sono 0,2 secondi)

div.elemento {
 height: 50px;
 width: 50px;
 background: #ccc;
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}
div.elemento:hover {
 height: 150px;
 width: 150px;
 background: green;
}

Gradiente sfondo

 background: #ffffff; /* Vecchi browsers */
 background: -moz-linear-gradient(top,  #ffffff 0%, #e0e0e0 1%, #bfbfbf 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(1%,#e0e0e0), color-stop(100%,#bfbfbf)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #ffffff 0%,#e0e0e0 1%,#bfbfbf 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #ffffff 0%,#e0e0e0 1%,#bfbfbf 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #ffffff 0%,#e0e0e0 1%,#bfbfbf 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #ffffff 0%,#e0e0e0 1%,#bfbfbf 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-8 */