« Retour

/* 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;
}

Colration syntaxique réalisée sur Online syntax highlighting

« Retour