diff options
Diffstat (limited to 'files/pl/web/css/box-shadow/index.html')
| -rw-r--r-- | files/pl/web/css/box-shadow/index.html | 222 |
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? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#</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><offset-x></code> <code><offset-y></code></dt> + <dd>Są dwie wartości {{ cssxref("<length>") }}, które określają odległość. <code><offset-x></code> oznacza odległość poziomą. Ujemne wartości umieszczają cień na lewo od elementu. <code><offset-y></code> wyznacza odległość pionową. Ujemne wartości umiesczają cień ponad elementem. Zobacz {{ cssxref("<length>") }} 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><blur-radius></code> oraz/lub <code><spread-radius></code> jest określony).</dd> + <dt><code><blur-radius></code></dt> + <dd>To jest trzecia wartość {{ cssxref("<length>") }}. 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><spread-radius></code></dt> + <dd>To jest czwarta wartość {{ cssxref("<length>") }}. 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><color></code></dt> + <dd>Zobacz {{cssxref("<color>")}} 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> |