initial commit

1 files changed, 222 insertions, 0 deletions

diff --git a/files/pl/web/css/box-shadow/index.html b/files/pl/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..feb07aaf0f
--- /dev/null
+++ b/files/pl/web/css/box-shadow/index.html
@@ -0,0 +1,222 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - Adnotacja
+  - CSS
+  - CSS3
+  - Grafika
+  - Referencja
+  - Tło CSS
+  - Tło CSS3
+  - Układ
+  - Właściwość CSS
+  - sieć
+translation_of: Web/CSS/box-shadow
+---
+<p>{{CSSRef()}}</p>
+
+<p> </p>
+
+<div class="callout-box">
+<p><strong>Generator box-shadow</strong></p>
+
+<p><a href="/en-US/docs/Web/CSS/Tools/Box-shadow_generator" title="/en-US/docs/Web/CSS/Tools/Box-shadow_generator">Interaktywne narzędzie</a> pozwalające stworzyć efekt box-shadow.</p>
+</div>
+
+<p><span class="seoSummary"><code><font face="Open Sans, sans-serif">Właściwość CSS </font>box-shadow</code> określa jeden lub więcej efektów cieniowych jako przecinkowo-rozdzielaną listę.</span> Pozwala na rzucenie cienia z prawie każdego elementu. Jeśli {{ cssxref("-moz-border-radius") }} jest zadeklarowany na elemencie na którym zadeklarowany jest także <code>box-shadow</code>, właściwość przybiera wartość z {{ cssxref("-moz-border-radius") }} i tworzy zaokrąglony cień. Użycie <code>box-shadow</code> wraz z {{ cssxref("z-index") }} daje taki sam efekt jak wielokrotne użycie <a href="/en-US/CSS/text-shadow" title="text-shadow">cienia tekstu</a> (pierwszy zadeklarowany cień jest wyświetlany ponad wszystkimi).</p>
+
+<ul>
+ <li><a href="/pl/docs/Web/CSS/Warto%C5%9B%C4%87_pocz%C4%85tkowa">Wartość początkowa</a>: Szczegóły widoczne poniżej.</li>
+ <li>Dotyczy: Każdy element.</li>
+ <li><a href="/pl/docs/Web/CSS/dziedziczenie">Dziedziczona</a>: Nie.</li>
+ <li><a href="/pl/docs/Web/CSS/@media">@media</a>: Wizualna.</li>
+ <li>Wartość wyliczona: Każda długość absolutna; każdy kolor; inaczej jak zapisano poniżej.</li>
+ <li>Animowana: Tak, jako lista cieni.</li>
+ <li>Porządek kanoniczny: Unikatowy niedwuznaczny porządek określany według formalnej gramatyki. </li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Składnia</h2>
+
+<pre class="syntaxbox">box-shadow: none | [inset? &amp;&amp; [ &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;spread-radius&gt;? &lt;color&gt;? ] ]#</pre>
+
+<h3 id="Values" name="Values">Wartości</h3>
+
+<dl>
+ <dt><code>inset</code></dt>
+ <dd>Jeśli inset nie zostanie ustalony (domyślnie), cień będzie wyświetlany ponad elementem. Jeśli zostanie użyty <code>inset,</code> cień zawrze się wewnątrz elementu. Cienie wewnętrzne są rysowane wewnątrz elementu (nawet przeźroczyste), ponad tłem, ale poniżej zawartości.</dd>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></dt>
+ <dd>Są dwie wartości {{ cssxref("&lt;length&gt;") }}, które określają odległość. <code>&lt;offset-x&gt;</code> oznacza odległość poziomą. Ujemne wartości umieszczają cień na lewo od elementu. <code>&lt;offset-y&gt;</code> wyznacza odległość pionową. Ujemne wartości umiesczają cień ponad elementem. Zobacz {{ cssxref("&lt;length&gt;") }} dla możliwych jednostek.<br>
+ Jeśli obydwie wartości przyjmują <code>0</code>, cień jest umiejscowiony za elementem (i może swtorzyć efekt rozmycia jeśli <code>&lt;blur-radius&gt;</code> oraz/lub <code>&lt;spread-radius&gt;</code> jest określony).</dd>
+ <dt><code>&lt;blur-radius&gt;</code></dt>
+ <dd>To jest trzecia wartość {{ cssxref("&lt;length&gt;") }}. Im większa, tym większe jest rozmycie i w efekcie cień jest większy oraz łagodniejszy. Ujemne wartości są niedozwolone. Jeśli nie ustalona, przyjmuje wartość domyślną <code>0</code> (krawędź cienia jest ostra).</dd>
+ <dt><code>&lt;spread-radius&gt;</code></dt>
+ <dd>To jest czwarta wartość {{ cssxref("&lt;length&gt;") }}. Nieujemne wartości będą powodować zwiększanie się cienia, a ujemne jego zmniejszanie. Jeśli nie ustalona, domyślnie przyjmuje wartość <code>0</code> (cień będzie tego samego rozmiaru co element).</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Zobacz {{cssxref("&lt;color&gt;")}} dla możliwych słów kluczowych oraz notacji.<br>
+ Jeśli nie ustalona, przyjmuje kolor zależny od przeglądarki - aktualnie jest to wartość {{ cssxref("color") }}, lecz Safari tworzy przeźroczysty cień w tej sytuacji.</dd>
+</dl>
+
+<h2 id="Live_examples" name="Live_examples">Przykłady</h2>
+
+<ul>
+ <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Test box-shadow</a></li>
+ <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">Kurs oraz przykłady box-shadow</a></li>
+</ul>
+
+<pre style="-moz-box-shadow: 60px -16px teal; -webkit-box-shadow: 60px -16px teal; box-shadow: 60px -16px teal; float: left; margin: 1em;">box-shadow: 60px -16px teal;</pre>
+
+<pre style="-moz-box-shadow: 10px 5px 5px black; -webkit-box-shadow: 10px 5px 5px black; box-shadow: 10px 5px 5px black; float: left; margin: 1em;">box-shadow: 10px 5px 5px black;</pre>
+
+<pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em olive; -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive; box-shadow: 3px 3px red, -1em 0 0.4em olive; float: left; margin: 1em;">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre>
+
+<pre style="-moz-box-shadow: 5em 1em gold inset; -webkit-box-shadow: inset 5em 1em gold; box-shadow: inset 5em 1em gold; float: left; margin: 1em;">box-shadow: inset 5em 1em gold;</pre>
+
+<pre style="-moz-box-shadow: 0 0 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; float: left; margin: 1em;">box-shadow: 0 0 1em gold;</pre>
+
+<pre style="-moz-box-shadow: 0 0 1em gold inset; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold;</pre>
+
+<pre style="-moz-box-shadow: 0 0 1em gold inset, 0 0 1em red; -webkit-box-shadow: inset 0 0 1em gold, 0 0 1em red; box-shadow: inset 0 0 1em gold, 0 0 1em red; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre>
+
+<h2 class="cleared" id="Specifications" name="Specifications">Specyfikacja</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specyfikacja</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komentarz</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarkami</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Właściwość</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Podstawowa obsługa</td>
+   <td>10.0<br>
+    1.0{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}<br>
+    {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
+   <td>9.0 (Zobacz notatki)</td>
+   <td>10.5</td>
+   <td>5.1 (WebKit 534)<br>
+    3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>Wielokrotne cienie</td>
+   <td>10.0<br>
+    1.0{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}<br>
+    {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.1 (WebKit 534)<br>
+    3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>Wartość<code> inset</code></td>
+   <td>10.0<br>
+    4.0{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}<br>
+    {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.1 (WebKit 534)<br>
+    5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>spread-radius</code></td>
+   <td>10.0<br>
+    4.0{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}<br>
+    {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.1 (WebKit 534)<br>
+    5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Właściwość</th>
+   <th>iOS Safari</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Android Browser</th>
+  </tr>
+  <tr>
+   <td>Podstawowa obsługa</td>
+   <td>
+    <p>5.0<br>
+     {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</p>
+   </td>
+   <td>{{ CompatUnknown }}</td>
+   <td>Obsługuje</td>
+   <td>Obsługuje (2.2 tested) {{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>Wielokrotne cienie</td>
+   <td>5.0<br>
+    {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+  <tr>
+   <td>Wartość <code>inset</code></td>
+   <td>5.0<br>
+    {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+  <tr>
+   <td><code>spread-radius</code></td>
+   <td>5.0<br>
+    {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notatki">Notatki</h3>
+
+<ul>
+ <li>Od wersji 5.5, Internet Explorer obsługuje Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532985(VS.85,loband).aspx">DropShadow</a> i filtr <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533086(VS.85,loband).aspx">Shadow</a>. Możesz użyć tych rozszerzeń aby stworzyć cień (chociaż składnia oraz efekt różnią się od CSS3).</li>
+ <li>Cienie mają wpły na układ w starszych silnikach Gecko, Presto i WebKit; np. jeśli utworzomy zewnętrzny cień to przy elemencie z <code>width: 100%</code> zobaczysz pasek przewijania.</li>
+ <li>W Gecko 13 (Firefox 13) zostało usunięte wsparcie dla <code>-moz-box-shadow</code>. Od tego czasu, tylko wersja bez <code>-moz- jest wspierana</code>.</li>
+ <li>Aby uzyskać efekt <code>box-shadow</code> w IE9 lub późniejszych, musisz ustawić {{ cssxref("border-collapse") }} na <code>separate</code>.</li>
+</ul>