@font-face {
    font-family: 'typo';
    src: url('../fonts/typo.eot');
    src: url('../fonts/typo.eot?#iefix') format('embedded-opentype'),
         url('../fonts/typo.woff') format('woff'),
         url('../fonts/typo.ttf') format('truetype'),
         url('../fonts/typo.svg#typo') format('svg');
    font-weight: normal;
    font-style: normal;
}
.gradient {
     background: -webkit-radial-gradient(center center, rgb(RR, GG, BB) 0%, rgb(RR, GG, BB) 100%);
     background: -moz-radial-gradient(center center, rgb(RR, GG, BB) 0%, rgb(RR, GG, BB) 100%);
     background: -ms-radial-gradient(center center, rgb(RR, GG, BB) 0%, rgb(RR, GG, BB) 100%);
     background: -o-radial-gradient(center center, rgb(RR, GG, BB) 0%, rgb(RR, GG, BB) 100%);
     background: radial-gradient(center center, rgb(RR, GG, BB) 0%, rgb(RR, GG, BB) 100%);
}
.element {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
}
.shadow {
     -moz-box-shadow:    1px 2px 3px 4px #ccc;
     -webkit-box-shadow: 1px 2px 3px 4px #ccc;
     box-shadow:         1px 2px 3px 4px #ccc;
}

Exemple d'une animation qui se déclenche au bout de 2 sec et qui ne se répète pas :

.animation {
    -webkit-animation: anim2s ease-in-out both;
    -moz-animation: anim 2s ease-in-out both;
    -o-animation: anim 2s ease-in-out both;
    -ms-animation: anim 2s ease-in-out both;
    animation: anim 2s ease-in-out both;
}

@-webkit-keyframes anim { 
    from {height: 50%; top: 50%;}
    to {height: 0; top: 0;}
}
@-moz-keyframes anim {
    from {height: 50%; top: 50%;}
    to {height: 0; top: 0;}
}
@-o-keyframes anim { 
    from {height: 50%; top: 50%;}
    to {height: 0; top: 0;}
}
@-ms-keyframes anim { 
    from {height: 50%; top: 50%;}
    to {height: 0; top: 0;}
}
@keyframes anim { 
    from {height: 50%; top: 50%;}
    to {height: 0; top: 0;}
}

Appel dans le head

<link href="print.css" media="print" rel="stylesheet" type="text/css" />

print.css de base

body {
    background: none;
    font-size: 12px;
}

#main-content {
    margin: 0;
    padding: 0;
}

#sidebar, #header, #footer {
    display: none;
}

a:link:after, #content a:visited:after {
    content: " (" attr(href) ") ";
}

Exemple d'une transformation d'un élément avec rotation de 5 degrés, décalage de 250px sur l'axe y et grossissement x2 :

.transform {
    -webkit-transform: translate(0, 250px) rotate(5deg) scale(2);
    -moz-transform: translate(0, 250px) rotate(5deg) scale(2);
    -o-transform: translate(0, 250px) rotate(5deg) scale(2);
    -ms-transform: translate(0, 250px) rotate(5deg) scale(2);
    transform: translate(0, 250px) rotate(5deg) scale(2);
}
.element {
     -webkit-transition: [propriete1] Xs, [propriete2] Xs, [...];
     -moz-transition: [propriete1] Xs, [propriete2] Xs, [...];
     transition: [propriete1] Xs, [propriete2] Xs, [...];
}

Exemple pour webkit seulement

.element {
     -webkit-animation: plop 1s ease both;
     -moz-animation: plop 1s ease both;
     animation: pop 1s ease both;
}

@-webkit-keyframes plop {
    0% {
        -webkit-transform: translateY(-500px) scale(1.9);
        opacity: 0;
    }
    50% {
         -webkit-transform: scale(1);
         transform: scale(1);
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

Exemple pour webkit seulement

.element1 {
    -webkit-animation: slideLeft 1s ease both;
    -moz-animation: slideLeft 1s ease both;
    animation: slideLeft 1s ease both;
}

.element2 {
    -webkit-animation: slideLeft 1s ease both;
    -moz-animation: slideLeft 1s ease both;
    animation: slideLeft 1s ease both;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

@-webkit-keyframes slideLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-15px);
    }
   100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

First

div:first-child { background: #fff; }

Even & Odd

div:nth-child(even) { background: #ccc; }
div:nth-child(odd) { background: #fff; }

Tous les X éléments à partir de Y

div:nth-child(Xn+Y) { background: #fff; }
/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }


/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

Source

/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* Tablet (portrait and landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* Tablet (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* Tablet (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
opacity {
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}
::-webkit-input-placeholder { color: #ccc; }
:-moz-placeholder { color: #ccc; }
::-moz-placeholder { color: #ccc; }
:-ms-input-placeholder { color: #ccc; }

Reset css de Meyerweb

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.text {
    text-shadow: 1px 2px 0px #000, 1px 2px 0px #000;
}

Exemple avec des guillemets autour d'une citation

blockquote:before { content: "\275D"; }
blockquote:after { content: "\275E"; }

Voir la liste des différents icones

Top