initial commit

2 files changed, 157 insertions, 0 deletions

diff --git a/files/fr/web/css/css_images/index.html b/files/fr/web/css/css_images/index.html
new file mode 100644
index 0000000000..1bc5acf7c8
--- /dev/null
+++ b/files/fr/web/css/css_images/index.html
@@ -0,0 +1,106 @@
+---
+title: CSS Images
+slug: Web/CSS/CSS_Images
+tags:
+  - Aperçu
+  - CSS
+  - CSS Images
+  - Reference
+translation_of: Web/CSS/CSS_Images
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Images</strong></em> est un module CSS qui définit les types d'images qui peuvent être utilisés (le type {{cssxref("&lt;image&gt;")}}, les URLs qu'elles contiennent, les dégradés et autres types d'images), comment les redimensionner et comment elles, ainsi que le contenu remplacé, interagissent avec les différents modèles de mise en page.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("image-orientation")}}</li>
+ <li>{{CSSxRef("image-rendering")}}</li>
+ <li>{{CSSxRef("image-resolution")}}</li>
+ <li>{{CSSxRef("object-fit")}}</li>
+ <li>{{CSSxRef("object-position")}}</li>
+</ul>
+</div>
+
+<h3 id="Fonctions">Fonctions</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li>{{CSSxRef("conic-gradient")}}</li>
+ <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
+ <li>{{CSSxRef("url", "url()")}}</li>
+ <li>{{CSSxRef("element", "element()")}}</li>
+ <li>{{CSSxRef("_image", "image()")}}</li>
+ <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_données">Types de données</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utilisation de dégradés CSS</a></dt>
+ <dd>Présente un type spécifique d'images CSS, les <em>dégradés</em>, et comment les créer et les utiliser.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">Les <em>sprites</em> CSS</a></dt>
+ <dd>Décrit la technique classique consistant à regrouper plusieurs images en un seul document pour économiser des requêtes de téléchargement et rendre une page disponible plus rapidement.</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("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>Ajout de {{CSSxRef("image-resolution")}},{{CSSxRef("conic-gradient")}} et {{CSSxRef("_image", "image()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>Ajout de {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}} et {{CSSxRef("object-position")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}</td>
+   <td>{{Spec2("Compat")}}</td>
+   <td>Standardisation de la version préfixée avec <code>-webkit</code> pour les valeurs de fonctions de dégradé</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#url", "&lt;url&gt;")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Définition intiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_images/sprites_css/index.html b/files/fr/web/css/css_images/sprites_css/index.html
new file mode 100644
index 0000000000..a141a8a11e
--- /dev/null
+++ b/files/fr/web/css/css_images/sprites_css/index.html
@@ -0,0 +1,51 @@
+---
+title: Les sprites CSS
+slug: Web/CSS/CSS_Images/Sprites_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <em>sprites</em> sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors <code>background-position</code> pour choisir l'image qu'on souhaite utiliser.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.</p>
+</div>
+
+<h2 id="Implémentation">Implémentation</h2>
+
+<p>Supposons qu'une image est affichée pour chaque élement de la classe <code>toolbtn</code> :</p>
+
+<pre class="brush:css">.toolbtn {
+  background: url('myfile.png');
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}</pre>
+
+<p>Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :</p>
+
+<pre class="brush:css">#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}</pre>
+
+<p>L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe <code>toolbtn</code>).</p>
+
+<p>De la même manière, vous pouvez faire un effet de transition au survol :</p>
+
+<pre class="brush:css">#btn:hover {
+  background-position: <var>&lt;pixels shifted right&gt;</var>px <var>&lt;pixels shifted down&gt;</var>px;
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Une démonstration sur CSS Tricks</a></li>
+</ul>