Démonstration de CSS3 Pie

Ci-dessous, la css permettant de styliser cette page. Elle s'afffiche convenablement avec les différentes versions d'Internet Explorer (6 à 10) et les différents navigateurs dits "modernes" et prenant nativement en compte ces styles. Pour information, le fichier css (feuille de style) se trouve dans le dossier style, vous constaterez que les chemins définis dans les propriétés Pie sont relatives au fichier HTML et non au fichier css !

/* CSS pour démo CSS3 Pie d'alsacréations */ body { margin: 0; padding: 0; background-color: #026873; font-family: helvetica, tahoma, arial; } #page { margin: 20px; padding: 0; } #conteneur { margin: 0 auto; padding: 10px; width: 700px; background: #FFF; /* Coins arrondis - 4 coins pareils */ -webkit-border-radius: 8px; /* Pour Chrome, Safari,... */ -moz-border-radius: 8px; /* Pour Firefox,... */ border-radius: 8px; /* Propriété standard */ /* Ombre portée uniformément */ -webkit-box-shadow: #FFF 0 0 25px; /* Pour Chrome, Safari,... */ -moz-box-shadow: #FFF 0 25px; /* Pour Firefox,... */ box-shadow: #FFF 0 0 25px; /* Propriété standard */ behavior: url(style/PIE.php); } #conteneur h1 { position: relative; margin: 10px; padding: 5px; color: #FFF; text-align: center; background-color: #026873; background-size: 13px, 29px, 37px, 53px; /* Fond rayé du titre */ /* Pour Chrome, Safari,... */ background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%); /* Pour Firefox,... */ background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%); /* Pour IE10 */ background-image: -ms-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -ms-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%); /* Pour Opera */ background-image: -o-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -o-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%); /* Standard */ background-image: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%); /* Pour PIE */ -pie-background: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%) 0 0 / 13px, linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%) 0 0 / 29px, linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%) 0 0 / 37px, linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%) 0 0 / 53px, #026873; /* Coins arrondis en bas à gauche et à droite */ -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; /* Ombre portée vers le bas et à droite */ -webkit-box-shadow: #026873 3px 3px 5px; -moz-box-shadow: #026873 3px 3px 5px; box-shadow: #026873 3px 3px 5px; behavior: url(style/PIE.php); } #conteneur p { margin: 10px; padding: 0; text-align: justify; } #conteneur textarea { display: block; margin: 10px auto; padding: 3px; width: 650px; height: 400px; background: #C5E0E3; /* Pour navigateurs ne prenant pas en charge CSS3 */ /* Fonds multiples : une image et un dégradé */ background: url(css3pie-fond.png) no-repeat center, -webkit-gradient(linear, 0 0, 0 100%, from(#96C7CC) to(#FFF)); /* Chrome (anciens) */ background: url(css3pie-fond.png) no-repeat center, -webkit-linear-gradient(#96C7CC, #FFF); /* Chrome (nouveaux) */ background: url(css3pie-fond.png) no-repeat center, -moz-linear-gradient(#96C7CC, #FFF); /* FF */ background: url(css3pie-fond.png) no-repeat center, -ms-linear-gradient(#96C7CC, #FFF); /* IE10 */ background: url(css3pie-fond.png) no-repeat center, -o-linear-gradient(#96C7CC, #FFF); /* Opera 11.10+ */ background: url(css3pie-fond.png) no-repeat center, linear-gradient(#96C7CC, #FFF); /* Standard */ -pie-background: url(style/css3pie-fond.png) no-repeat center, linear-gradient(#96C7CC, #FFF); /* PIE */ /* Coins arrondis à gauche en haut et en bas */ border: #026873 2px solid; -webkit-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; behavior: url(style/PIE.php); } #conteneur dl { float: left; text-align: center; height: 250px; width: 300px; margin: 10px 20px; padding: 0; } #conteneur dt { font-size: 0.9em; font-weight: bold; color: #026873; margin: 0; padding: 0; } #conteneur dd { text-align: center; font-size: 0.8em; margin: 0; padding: 0 0 0 10px; } #conteneur a { color: #FCB51B; text-decoration: none; } #conteneur a:hover { color: navy; }

CSS avec coloration syntaxique

Pour comprendre le chemin défini dans la CSS pour les propriétés -pie-background et behavior, voici l'arborescence des fichiers pertinents pour cette page de démonstration nommée css3pie-demo.html :

Racine
- css3pie-demo.html
- style
  - PIE.php
  - PIE.htc
  - css3pie.css
  - css3pie-fond.png

Et pour finir, quelques copies d'écran de cette page affichée sur les différentes versions d'Internet Explorer. A gauche sans CSS3 Pie, à droite avec CSS3 Pie.

IE 6, 7, 8 sans CSS3 Pie: Pas de coins arrondis, pas d'ombre, pas de dégradé, pas de fonds multiples !

IE 6, 7, 8 avec CSS3 Pie

IE 9 sans CSS3 Pie: Pas de motifs de titre, pas de dégradé ! En revanche, ombre et coins arrondis sont pris en charge.

IE 9 avec CSS3 Pie

Le motif de bandes bleues de différents tons (nommé par son auteur « Cicada Stripes ») n'est pas pris en charge par IE 6, 7 et 8 (expliquant le dégradé noir du titre), en revanche, IE9 le prend bien en compte (grâce à CSS3 Pie). Pour rendre à César, ce qui est à César, ce motif a été élaboré par Randy Merrill (source)