Snippets utiles

Les snippets sont des petits morceaux de code CSS / HTML que je veux garder en mémoire ou à portée de main.

Double background en CSS

Comment faire un arrière-plan avec deux images de fond, une en haut et une bas par exemple :

<html>
<head>
<style type="text/css">
<!--
body{background:url('image.jpg') no-repeat}
#wrap{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:url('image2.jpg') no-repeat;
    }

//-->
</style>
</head>
<body>
<div id="wrap">
hier alles andere
</div>
</body>
</html>

Le "CSS model box" de base

Un rollover CSS sur une image

D'abord, le code CSS :

a.button {
        background:url(image.png) repeat 0px 0px;
        width: 123px;
        height: 44px;
        display: block;
}

a.button span {
        display: none;
}

a.button:hover {
        background: url(imageover.png) repeat 0px -44px;
}

Ensuite, le HTML :

<a href="#" class="button">
    <span>Image</span>
</a>

Lien sur image avec rollover en javascript

On utilise 2 images de taille identique, par exemple "test" et "test-over" avec ce code :

<a onmouseover="document.test.src='test-over.gif'" onmouseout="document.test.src='test.gif'" href="URL"><img src="test.gif" name="test" id="test" alt="Texte alternatif"></a>

Rollover simple sur une image en javascript

On utilise 2 images de taille identique, par exemple "image" et "image-over" avec ce code :

<img onmouseover="this.src='image-over.jpg'" onmouseout="this.src='image.jpg'" src="image.jpg" alt="texte alternatif" />

Note : on peut ajouter un lien, mais le curseur propre au lien (la main) n'apparaîtra pas et ne signalera pas le lien.

Ombre portée pour Internet Explorer uniquement

Internet Explorer, jusqu'à sa version 8, ne reconnaît pas la géniale propriété CSS3 box-shadow qui permet, en une ligne de code et sans images, de créer des ombres portées sur les blocs ou les images d'un site. Il faut donc recourir au code propriétaire de Microsoft pour simuler une ombre portée uniquement lisible par les (encore trop nombreux) utilisateurs d'IE. Graphiquement, le résultat est assez pauvre, mais c'est un pis-aller.

Ombre tout autour du bloc

.shadow-ie {
   filter: progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8, Direction=45, Strength=3)
   progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8, Direction=135, Strength=3)
   progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8, Direction=225, Strength=3)
   progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8, Direction=315, Strength=3);
}

Ombre sur deux côtés du bloc (à droite et en bas)

.shadow-ie {
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);
}

9 familles de polices améliorées

Pour commencer, une famille "Helvetica" améliorée :

{font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}

Puis 8 familles de polices qui combinent des polices propres à Windows, Mac, Linux et Adobe et qui sont relativement semblables. Chaque famille est basée sur une première suite qui suit cet ordre : la police exacte, la plus proche alternative, l'alternative commune au plus grand nombre de systèmes d'exploitation, la police universelle (disponible sur tous les systèmes d'exploitation), la police générique.

 

Vient ensuite une deuxième liste de polices qui entre souvent en conflit avec la première et qui obéit à cette logique : polices pour Windows, polices pour Mac, polices pour Linux, polices universelles, police générique.

/* famille basée sur Times New Roman */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* famille basée sur une version moderne de Georgia (serif) */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* famille basée sur Garamond (serif) */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* famille basée sur Arial et Helvetica (sans serif) */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;

/* famille basée sur Verdana (sans serif) */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;

/* famille basée sur Trebuchet MS (sans serif) */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

/* famille basée sur Impact (sans serif) */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;

/* famille de polices monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
Ruban