Médiaforma

Guide de survie – Mise en forme d’un document HTML5 avec CSS3

Print Friendly, PDF & Email

Utilisation de polices exotiques

Code HTML5

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Utilisation de la police serveur know_your_product.ttf</title>
    <link rel="stylesheet" href="font-face.css">
  </head>
  <body>
    <h1>Test d'utilisation de la police know_your_product</h1>
  </body>
</html>

Code CSS fontface.css


@font-face
{
  font-family: KnowYourProduct;
  src: url('know_your_product.ttf');
  src: url('know_your_product.eot');
}

h1
{
  font-family: 'KnowYourProduct';
}

Couleur et image d’arrière-plan

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Couleur d'arrière-plan</title>
  </head>
<body>
  <div style="background-image: url(chute-eau.jpg); font-size: 40px; color: black;">
    <p>La couleur d'arrière-plan de ce texte n'est pas définie. Par contre, <a href="#" style="background-color: red">ce lien a un arrière-plan de couleur rouge</a>.</p>
    <p style="background-color:yellow;">Cette ligne a un arrière-plan de couleur jaune</p>
    <div style="background-color: skyblue;">et celle-ci un arrière-plan bleu ciel.</div>
    </div>
  </div>
</body>
</html>

Gradients linéaires

Gradient vertical – Code HTML5

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient vertical du rouge au bleu</title>
    <link rel="stylesheet" href="gradient-vertical.css">
  </head>
  <body>
    <p class="gradient-vertical">Gradient vertical du rouge au bleu</p>
  </body>
</html>
background: -moz-linear-gradient(left, red, blue);
background: -webkit-gradient(linear, 0% 0%, 1000% 0%, from(red), to(blue));

Gradient vertical – gradient-vertical.css


filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=val1, StartColorStr=val2, EndColorStr=val3)
-webkit-gradient(linear, p1, p2, from(c1), to(c2));
-moz-linear-gradient(p1, c1, c2) no-repeat;
background: -moz-linear-gradient(top, red, blue);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(red), to(blue));
.gradient-vertical
{
  width:400px;
  height: 200px;
  background: -moz-linear-gradient(top, red, blue);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(red), to(blue));
}

Gradient horizontal

Tester le code

Code HTML5


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient horizontal du rouge au bleu</title>
    <link rel="stylesheet" href="gradient-horizontal.css">
  </head>
  <body>
    <p class="gradient-horizontal">Gradient horizontal du rouge au bleu</p>
  </body>
</html>

Gradient horizontal – gradient-horizontal.css


.gradient-horizontal
{
  width:400px;
  height: 200px;
  background: -moz-linear-gradient(left, red, blue);
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(red), to(blue));
}

Plusieurs couleurs dans un gradient linéaire

Tester le code

Code HTML5


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient horizontal multiple, du rouge au blanc, couleurs intermédiaires bleu et jaune</title>
    <link rel="stylesheet" href="gradient-horizontal-multiple.css">
  </head>
  <body>
    <p class="gradient-horizontal-multiple"><font size=6>Gradient horizontal multiple, du rouge au blanc, couleurs intermédiaires bleu et jaune</font></p>
  </body>
</html>

gradient-horizontal-multiple.css


.gradient-horizontal-multiple
{
  width:400px;
  height: 200px;
  background: -moz-linear-gradient(left, red 0%, blue 33%, yellow 66%, white);
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(red), color-stop
(0.33, blue), color-stop(.66, yellow), to(white));
}

Gradients radiaux

Tester le code

Code HTML5


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient radial</title>
    <link rel="stylesheet" href="gradient-radial.css">
  </head>
  <body>
    <p class="gradient-radial">Gradient radial</p>
  </body>
</html>
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(red), to(blue));
background: -moz-radial-gradient(50% 50%, circle farthest-side, red 0%, blue 30%);

gradient-radial.css


.gradient-radial
{
  width:400px;
  height: 200px;
  background: -webkit-gradient(radial, 50% 0%, 20, 50% 100%, 150, from(red), to(blue));
  background: -moz-radial-gradient(50% 50%, circle closest-side, red, blue);
}

Plusieurs couleurs dans un gradient radial


.gradient-radial
{
  width:300px;
  height: 200px;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(red), color-stop(.25,yellow), color-stop(.50, blue), to (black));
  background: -moz-radial-gradient(circle, red, yellow, blue, black);}
}

Utilisation d’un gradient pour masquer une image

Code HTML5

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient radial</title>
    <link rel="stylesheet" href="masque-radial.css">
  </head>
  <body>
    <img src="image.jpg" width=400px>
    <img src="image.jpg" class="masque-radial">
  </body>
</html>

masque-radial.css


.masque-radial
{
  width: 400px;
  -webkit-mask-image: -webkit-gradient(radial, 50% 50%, 70, 50% 50%, 150, from(white), to(rgba(0,0,0,0)));
}
.masque-radial
{
  width: 400px;
  -webkit-mask-image: -webkit-gradient(radial, 80% 20%, 30, 80% 20%, 100, from(white), to(rgba(0,0,0,0)));
}

Les fonctions RGBA() et HSLA()

Code HTML

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Facteur Alpha avec RGBA</title>
    <link rel="stylesheet" href="alpha.css">
  </head>
  <body>
    <div class=alpha00>Texte affiché sur un fond vert avec alpha à 0%</div>
    <div class=alpha20>Texte affiché sur un fond vert avec alpha à 20%</div>
    <div class=alpha50>Texte affiché sur un fond vert avec alpha à 50%</div>
    <div class=alpha80>Texte affiché sur un fond vert avec alpha à 80%</div>
  </body>
</html>

alpha.css


div
{
  width: 200px;
  height:100px;
}

.alpha00
{
  background-color: rgba(0, 100, 100, 0);
}

.alpha20
{
  background-color: rgba(0, 100, 100, .2);
}

.alpha50
{
  background-color: rgba(0, 100, 100, .5);
}

.alpha80
{
  background-color: rgba(0, 100, 100, .8);
}
div
{
  width: 200px;
  height:100px;
}
.alpha50
{
  background-color: rgba(0, 100, 100, .5);
}
div
{
  width: 200px;
  height:100px;
}

.alpha00
{
  background-color: hsla(120, 94%, 18%, 0);
}

.alpha20
{
  background-color: hsla(120, 94%, 18%, .2);
}

.alpha50
{
  background-color: hsla(120, 94%, 18%, 0.4);
}

.alpha80
{
  background-color: hsla(120, 94%, 18%, .8);
}

Regroupement des éléments

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Regroupement d'éléments</title>
  </head>
  <body>
    <div style="background-color:yellow; width:500px; height=500px; margin: 20px; padding: 10px;">
      <img src=phare.png style="width: 100px;">
      <span style="font-size: 16px; color:blue;">Ce texte est mis en forme par la première balise span</span>
      <span style="color: red;">et celui-ci par la deuxième balise span.</span>
    </div>
    <div style="background-color: burlywood; margin: 40px; padding: 30px;">
       Ce texte est affiché dans le deuxième div
    </div>
  </body>
</html>

Positionnement en flux

Tester le code


Cliquez <a href="http://www.mediaforma.com"> pour accéder au site de formation Mediaforma</a>
Ce texte est suivi<h2> par un titre de style H2</h2>
<img src="fgauche.png" style="width:40px">
<img src="fhaut.png" style="width:40px">
Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat.
<img src="fbas.png" style="width:40px">
<img src="fdroite.png" style="width:40px">

Mise en page avec la propriété display

Premier exemple

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>La propriété display</title>
    <style>
      .un
      {
        border: 1px solid #ff0000;
        margin: 10px;
        padding: 10px;
      }
      .deux
      {
        border: 1px solid #00ff00;
        margin: 2px;
        padding: 2px;
      }
      .trois
      {
        border: 1px solid #0000ff;
        margin: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="un" style="display: block;">
      ce texte est affiché dans une balise div de type "bloc".
      <div class="deux" style="display: inline">Ce texte est affiché dans une balise div dont la propriété display vaut inline</div>
      <div class="trois">ce texte est affiché dans une balise div de type "bloc"</div>
    </div>
  </body>
</html>

Deuxième exemple

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des tableaux en HTML5</title>
    <style>
      .un
      {
        border: 1px solid #ff0000;
        margin: 10px;
        padding: 10px;
      }
      .deux
      {
        border: 1px solid #00ff00;
        margin: 2px;
        padding: 2px;
      }
      .trois
      {
        border: 1px solid #0000ff;
        margin: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="un" style="display: table;">
      Ce texte est affiché dans une balise div dont la propriété display vaut table.
      <div class="deux" style="display: table-row">Ce texte est affiché dans une balise div dont la propriété display vaut table-row
      <div class="trois" style="display: table-cell">ce texte est affiché dans une balise div de type "table-cell"</div>
      <div class="trois" style="display: table-cell">ce texte est affiché dans une autre balise div de type "table-cell"</div>
    </div>
    <div class="deux" style="display: table-row">On recommence avec une nouvelle ligne
      <div class="trois" style="display: table-cell">Une première cellule</div>
      <div class="trois" style="display: table-cell">Et une deuxième</div>
      </div>
    </div>
  </body>
</html>

Le rendu inline-block

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un rendu inline-block</title>
    <style>
      p
      {
        display:inline-block;
        text-align:left;
        background:#dce;
        width:150px;
        padding:20px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <p>Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. </p>

    <p>Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. </p>

    <p>Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. </p>
  </body>
</html>

Un design à deux colonnes

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un design à deux colonnes</title>
    <style>
      #colonne1
      {
        float: left;
        width: 150px;
        background: #66CCFF;
      }
      #colonne2
      {
        margin-left: 160px;
        background: #FFFFCC;
      }
    </style>
  </head>
  <body>
    <div id="colonne1">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
    <div id="colonne2">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
  </body>
</html>

Un design fluide à trois colonnes dont deux flottantes

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un design fluide à 3 colonnes</title>
    <style>
      #colonne1
      {
        float: left;
        width: 150px;
        background: #66CCFF;
      }
      #colonne2
      {
        float: right;
        width: 300px;
        background: #CCFF99;
      }
      #colonne3
      {
        background: #FFFFCC;
      }
    </style>
  </head>
  <body>
    <div id="colonne1">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
  <div id="colonne2">
    Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
    <div id="colonne3">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
  </body>
</html>

Un design à trois colonnes de même hauteur

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un design à 3 colonnes de même hauteur</title>
    <style>
      #conteneur
      {
        width: 800px;
        background: url(fond.gif) repeat-y;
        overflow: hidden;
      }
      #colonne1
      {
        float: left;
        width: 150px;
        background: #66CCFF;
      }
      #colonne2
      {
        float: right;
        width: 300px;
        background: #CCFF99;
      }
      #colonne3
      {
        background: #FFFFCC;
        margin-left: 160px;
        margin-right: 310px;
      }
    </style>
  </head>
  <body>
    <div id="conteneur">
      <div id="colonne1">
        Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
      </div>
      <div id="colonne2">
        Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
      </div>
      <div id="colonne3">
        Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
      </div>
    </div>
  </body>
</html>

Multicolonnage, la nouvelle vague CSS3

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Multicolonnage</title>
    <style>
      .multi-col
      {
        -moz-column-width: 150px;
        -webkit-column-width: 150px;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
      }
    </style>
  </head>
  <body>
    <div class="multi-col">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.</p>
    </div>
  </body>
</html>
.multi-col
{
  -moz-column-width: 150px;
  -webkit-column-width: 150px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-rule: largeur style couleur;
-webkit-column-rule: largeur style couleur;
-moz-column-rule: 1px solid black;
-webkit-column-rule: 1px solid black;
background:#ccc;
text-align:justify;
.multi-col
{
  -moz-column-width: 150px;
  -webkit-column-width: 150px;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  background:#ccc;
  text-align:justify;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  -moz-column-rule: 1px solid black;
  -webkit-column-rule: 1px solid black;
}

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.