CSS Snippet

3D

h1 {
  text-shadow: 0 1px  0    #ccc,
               0 2px  0    #c9c9c9,
               0 3px  0    #bbb,
               0 4px  0    #b9b9b9,
               0 5px  0    #aaa,
               0 6px  1px  rgba(0,0,0,.1),
               0 0    5px  rgba(0,0,0,.1),
               0 1px  3px  rgba(0,0,0,.3),
               0 3px  5px  rgba(0,0,0,.2),
               0 5px  10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

font-face

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot#') format('embedded-opentype'),
    url('myfont-webfont.woff') format('woff'),
    url('myfont-webfont.ttf')  format('truetype'),
    url('myfont-webfont.svg#svgFontName') format('svg');
}

Effet d’ombre qui ne prend pas toute la largeur

<div class="box effect">
<h3>Effect</h3>
</div>
.box h3 {
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:50%;
    height:200px;
    background:rgba(255, 255, 255, 1);
    margin:40px auto;
}

.effect {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect:before, .effect:after {
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

Media queries pour retina

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (-o-min-device-pixel-ratio: 3/2),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
  /*vos styles ici*/
}