initial commit

2 files changed, 195 insertions, 0 deletions

diff --git a/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html
new file mode 100644
index 0000000000..5551a4a59e
--- /dev/null
+++ b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html
@@ -0,0 +1,50 @@
+---
+title: Implementing image sprites in CSS
+slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+tags:
+  - Anleitung
+  - CSS
+  - CSS Bilder
+  - Fortgeschrittene
+  - Grafik
+  - NeedsContent
+  - Sprites
+  - Web
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+<div>{{APIRef}}</div>
+
+<p>Image Sprites werden in zahlreichen Webanwendungen verwendet, wo mehrere Bilder verwendet werden. Statt jedes Bild als eine eigene Bilddatei einzubinden, ist es wesentlich speicher- und bandbreitenfreundlicher, sie als ein einzelnes Bild zu schicken, um die Anzahl an HTTP Anfragen zu verringern.</p>
+
+<h2 id="Implementierung">Implementierung</h2>
+
+<p>Angenommen, jedem Element mit der Klasse <code>toolbtn</code> wird ein Bild zugewiesen:</p>
+
+<pre class="brush:css">.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}</pre>
+
+<p>Eine Hintergrundposition kann entweder über zwei x- und y-Werte nach der {{cssxref("url()")}} dem Hintergrund hinzugefügt werden oder als {{cssxref("background-position")}}. Als Beispiel:</p>
+
+<pre class="brush:css">#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}</pre>
+
+<p>Dies verschiebt das Element mit der ID 'btn1' um 20 Pixel nach links und das Element mit der ID 'btn2' um 40 Pixel nach links (unter Annahme, dass diesen die Klasse <code>toolbtn</code> zugewiesen wurde und durch die obere CSS Regel beeinflusst werden).</p>
+
+<p>Ebenso können Hover-Status erstellt werden mit:</p>
+
+<pre class="brush:css">#btn:hover {
+  background-position: <var>&lt;nach rechts verschobene Pixel&gt;</var>px <var>&lt;nach unten verschobene Pixel&gt;</var>px;
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Voll funktionsfähige Demo bei CSS Tricks</a></p>
diff --git a/files/de/web/css/css_images/index.html b/files/de/web/css/css_images/index.html
new file mode 100644
index 0000000000..b34532bf2c
--- /dev/null
+++ b/files/de/web/css/css_images/index.html
@@ -0,0 +1,145 @@
+---
+title: CSS Bilder
+slug: Web/CSS/CSS_Images
+tags:
+  - CSS
+  - CSS Bilder
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Images
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Images</strong> ist ein CSS Modul, das definiert, welche Typen von Bildern verwendet werden können (der {{cssxref("&lt;image&gt;")}} Typ, der URLs, Farbverläufe und andere Arten von Bildern beinhaltet), wie diese in der Größe geändert werden und wie sie und andere ersetzte Inhalte mit den verschiedenen Layoutmodellen interagieren.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("image-orientation")}}</li>
+ <li>{{cssxref("image-rendering")}}</li>
+ <li>{{cssxref("object-fit")}}</li>
+ <li>{{cssxref("object-position")}}</li>
+</ul>
+</div>
+
+<h3 id="Funktionen">Funktionen</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("element", "element()")}}</li>
+</ul>
+</div>
+
+<h3 id="Datentypen">Datentypen</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;uri&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Farbverläufe_in_CSS">CSS Farbverläufe verwenden</a></dt>
+ <dd>Beschreibt einen bestimmten Typ von CSS Bildern, Farbverläufe, und wie diese erstellt und verwendet werden.</dd>
+ <dt><a href="/de/docs/Web/CSS/CSS_Images/Implementierung_von_Bildsprites_in_CSS">Implementierung von Bildsprites in CSS</a></dt>
+ <dd>Beschreibt die geläufige Methode, mehrere Bilder in einem einzigen Dokument zu gruppieren, um Downloadanfragen zu sparen und die Verfügbarkeit einer Seite zu beschleunigen.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td> </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>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>