initial commit

3 files changed, 289 insertions, 0 deletions

diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.html b/files/fr/web/css/css_backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..3180021066
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/index.html
@@ -0,0 +1,117 @@
+---
+title: CSS Backgrounds and Borders
+slug: Web/CSS/CSS_Backgrounds_and_Borders
+tags:
+  - Aperçu
+  - CSS
+  - CSS Backgrounds and Borders
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Backgrounds and Borders</strong></em> est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></dt>
+ <dd>Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Mettre à l'échelle les images utilisées pour un arrière-plan</a></dt>
+ <dd>Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt>
+ <dd>Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.</dd>
+</dl>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur pour <code>border-image</code></a></dt>
+ <dd>Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur pour <code>border-radius</code></a></dt>
+ <dd>Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur pour <code>box-shadow</code></a></dt>
+ <dd>Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
new file mode 100644
index 0000000000..f9cce126c9
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
@@ -0,0 +1,117 @@
+---
+title: Mettre à l'échelle des images en arrière-plan
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.</p>
+
+<h2 id="Carreler_une_image_de_grande_taille">Carreler une image de grande taille</h2>
+
+<p>Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.</p>
+
+<p><img alt="" src="https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png" style="height: 636px; width: 636px;"></p>
+
+<p>On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :</p>
+
+<pre class="brush: css;  highlight:[8]">.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+</pre>
+
+<p>On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à <code>auto</code>.</p>
+
+<h2 id="Étirer_une_image">Étirer une image</h2>
+
+<p>Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.</p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>L'image suivante montre le résultat obtenu.</p>
+
+<p><img alt="Logo de Firefox étité" src="https://mdn.mozillademos.org/files/16630/s.codepen.io_Richienb_debug_LoNxGp_PNkvYGvgGyXA.png" style="height: 636px; width: 636px;"></p>
+
+<h2 id="Agrandir_une_image">Agrandir une image</h2>
+
+<p>On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.</p>
+
+<p><img alt="Logo MDN à l'échelle" src="https://mdn.mozillademos.org/files/16631/favicon57.de33179910ae.1.1.png" style="height: 636px; width: 636px;"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p>On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.</p>
+
+<h2 id="Valeurs_spéciales_contain_et_cover">Valeurs spéciales : <code>contain</code> et <code>cover</code></h2>
+
+<p>En plus de {{cssxref("&lt;length&gt;")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : <code>contain</code> et <code>cover</code>. </p>
+
+<h3 id="contain"><code>contain</code></h3>
+
+<p>La valeur <code>contain</code> spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.</p>
+
+<p>Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur <code>contain</code> en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).</p>
+
+<figure>
+<p>{{EmbedLiveSample("contain", "100%", "220")}}</p>
+</figure>
+
+<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Redimensionnez la fenêtre de votre navigateur.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeContain {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}</pre>
+
+<h3 id="cover"><code>cover</code></h3>
+
+<p>La valeur <code>cover</code> assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.</p>
+
+<p>{{EmbedLiveSample("cover", "100%", "220")}}</p>
+
+<p>Cet exemple utilise le document HTML et la feuille de style suivants :</p>
+
+<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Redimensionnez la fenêtre de votre navigateur.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeCover {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("background")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html
new file mode 100644
index 0000000000..fd4961c49f
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html
@@ -0,0 +1,55 @@
+---
+title: Utiliser plusieurs arrière-plans
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<div>{{CSSRef}}</div>
+
+<p>Avec <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.</p>
+
+<p>Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :</p>
+
+<pre class="brush: css">.maClasse {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},<code> </code>{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple_multi_ar {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple_multi_ar"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple','100%','400')}}</p>
+
+<p>Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton <em>Tidy</em> de la section CSS.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a></li>
+</ul>