From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pl/web/css/box-shadow/index.html | 222 +++++++++++++++++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 files/pl/web/css/box-shadow/index.html (limited to 'files/pl/web/css/box-shadow') 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 +--- +

{{CSSRef()}}

+ +

 

+ +
+

Generator box-shadow

+ +

Interaktywne narzędzie pozwalające stworzyć efekt box-shadow.

+
+ +

Właściwość CSS box-shadow określa jeden lub więcej efektów cieniowych jako przecinkowo-rozdzielaną listę. 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 box-shadow, właściwość przybiera wartość z {{ cssxref("-moz-border-radius") }} i tworzy zaokrąglony cień. Użycie box-shadow wraz z {{ cssxref("z-index") }} daje taki sam efekt jak wielokrotne użycie cienia tekstu (pierwszy zadeklarowany cień jest wyświetlany ponad wszystkimi).

+ + + +

Składnia

+ +
box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
+ +

Wartości

+ +
+
inset
+
Jeśli inset nie zostanie ustalony (domyślnie), cień będzie wyświetlany ponad elementem. Jeśli zostanie użyty inset, 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.
+
<offset-x> <offset-y>
+
Są dwie wartości {{ cssxref("<length>") }}, które określają odległość. <offset-x> oznacza odległość poziomą. Ujemne wartości umieszczają cień na lewo od elementu. <offset-y> wyznacza odległość pionową. Ujemne wartości umiesczają cień ponad elementem. Zobacz {{ cssxref("<length>") }} dla możliwych jednostek.
+ Jeśli obydwie wartości przyjmują 0, cień jest umiejscowiony za elementem (i może swtorzyć efekt rozmycia jeśli <blur-radius> oraz/lub <spread-radius> jest określony).
+
<blur-radius>
+
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ą 0 (krawędź cienia jest ostra).
+
<spread-radius>
+
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ść 0 (cień będzie tego samego rozmiaru co element).
+
<color>
+
Zobacz {{cssxref("<color>")}} dla możliwych słów kluczowych oraz notacji.
+ 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.
+
+ +

Przykłady

+ + + +
box-shadow: 60px -16px teal;
+ +
box-shadow: 10px 5px 5px black;
+ +
box-shadow: 3px 3px red, -1em 0 0.4em olive;
+ +
box-shadow: inset 5em 1em gold;
+ +
box-shadow: 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold, 0 0 1em red;
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

Zgodność z przeglądarkami

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłaściwośćChromeFirefox (Gecko)Internet ExplorerOperaSafari
Podstawowa obsługa10.0
+ 1.0{{ property_prefix("-webkit") }}		{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}		9.0 (Zobacz notatki)10.55.1 (WebKit 534)
+ 3.0 (WebKit 522){{ property_prefix("-webkit") }}
Wielokrotne cienie10.0
+ 1.0{{ property_prefix("-webkit") }}		{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}		9.010.55.1 (WebKit 534)
+ 3.0 (WebKit 522){{ property_prefix("-webkit") }}
Wartość inset10.0
+ 4.0{{ property_prefix("-webkit") }}		{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}		9.010.55.1 (WebKit 534)
+ 5.0 (WebKit 533){{ property_prefix("-webkit") }}
spread-radius10.0
+ 4.0{{ property_prefix("-webkit") }}		{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}		9.010.55.1 (WebKit 534)
+ 5.0 (WebKit 533){{ property_prefix("-webkit") }}
+ +

 

+ +

 

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłaściwośćiOS SafariOpera MiniOpera MobileAndroid Browser
Podstawowa obsługa +

5.0
+ {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}

+ 		{{ CompatUnknown }}ObsługujeObsługuje (2.2 tested) {{ property_prefix("-webkit") }}
Wielokrotne cienie5.0
+ {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}		{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
Wartość inset5.0
+ {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}		{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
spread-radius5.0
+ {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}		{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
+
+ +

Notatki

+ + -- cgit v1.2.3-54-g00ecf