Scrivo questo post perchè, seppur non sia il mio forte, durante lo sviluppo di siti web mi trovo spesso a dover scrivere del codice css3 al volo per completare un progetto e, a causa delle differenze tra i vari Web Browser Engine, non è sempre facile ricordarsene le specifiche.

Effetto ombra css3 su oggetti

#example1 {
    -moz-box-shadow: inset 10px 10px 5px 5px #888;
    -webkit-box-shadow: inset 10px 10px 5px 5px #888;
    box-shadow: inset 10px 10px 5px 5px #888;
}

Per applicare più ombre usare la virgola tra una proprietà e l’altra.

Effetto ombra css3 su testo

#example1 {
    text-shadow: #6374AB 20px -12px 2px;
}

Bordi arrotondati css3

#example1 {
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

Transizione css3

#example1 {
    transition: all 1s linear 1s;
    -moz-transition: all 1s linear 1s;
    -webkit-transition: all 1s linear 1s;
    -o-transition: all 1s linear 1s;
}

Gradienti css3

#example1 {
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}

Rotazione css3

#example1 {
    -moz-transform:rotate(120deg);
    -webkit-transform:rotate(120deg);
    -o-transform:rotate(120deg);
    -ms-transform:rotate(120deg);
}

Media Query

@media screen and (max-width:1024px) { … }

Se ve ne vengono in mente altri o scoprite qualche errore lasciate un commento e provvederò a correggere!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *