From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- files/pl/web/css/-moz-box-align/index.html | 77 - files/pl/web/css/-moz-box-flex/index.html | 64 - files/pl/web/css/-moz-box-orient/index.html | 54 - files/pl/web/css/-moz-box-pack/index.html | 82 - files/pl/web/css/-moz-outline-color/index.html | 13 - files/pl/web/css/_colon_-moz-first-node/index.html | 58 + files/pl/web/css/_colon_after/index.html | 63 - files/pl/web/css/_colon_before/index.html | 60 - files/pl/web/css/_colon_first-letter/index.html | 49 - files/pl/web/css/_colon_first-node/index.html | 58 - files/pl/web/css/_doublecolon_after/index.html | 63 + files/pl/web/css/_doublecolon_before/index.html | 60 + .../web/css/_doublecolon_first-letter/index.html | 49 + files/pl/web/css/box-align/index.html | 77 + files/pl/web/css/box-flex/index.html | 64 + files/pl/web/css/box-orient/index.html | 54 + files/pl/web/css/box-pack/index.html | 82 + files/pl/web/css/class_selectors/index.html | 86 + .../index.html | 41 + files/pl/web/css/css_color/index.html | 120 + .../css/css_colors/color_picker_tool/index.html | 3241 ++++++++++++++++++++ files/pl/web/css/css_colors/index.html | 120 - .../css_colors/narzedzie_doboru_kolorow/index.html | 3241 -------------------- .../using_multi-column_layouts/index.html | 65 + .../index.html | 594 ---- .../index.html | 594 ++++ .../using_css_counters/index.html | 86 + files/pl/web/css/css_reference/index.html | 56 - .../index.html | 64 + .../index.html" | 64 - .../index.html" | 41 - .../css/cz\304\231ste_pytania_o_css/index.html" | 162 - files/pl/web/css/dziedziczenie/index.html | 50 - files/pl/web/css/inheritance/index.html | 50 + files/pl/web/css/initial_value/index.html | 25 + files/pl/web/css/inne_zasoby/index.html | 29 - .../media_queries/testing_media_queries/index.html | 116 + .../web/css/na_pocz\304\205tek/bloki/index.html" | 71 - .../na_pocz\304\205tek/czym_jest_css/index.html" | 133 - .../na_pocz\304\205tek/czytelny_css/index.html" | 154 - .../css/na_pocz\304\205tek/grafika_svg/index.html" | 195 -- "files/pl/web/css/na_pocz\304\205tek/index.html" | 64 - .../jak_dzia\305\202a_css/index.html" | 114 - .../css/na_pocz\304\205tek/javascript/index.html" | 127 - .../index.html" | 97 - .../web/css/na_pocz\304\205tek/kolor/index.html" | 209 -- .../web/css/na_pocz\304\205tek/listy/index.html" | 269 -- .../web/css/na_pocz\304\205tek/media/index.html" | 318 -- .../po_co_u\305\274ywa\304\207_css/index.html" | 86 - .../css/na_pocz\304\205tek/selektory/index.html" | 260 -- .../na_pocz\304\205tek/style_tekstowe/index.html" | 116 - .../web/css/na_pocz\304\205tek/tables/index.html" | 597 ---- .../na_pocz\304\205tek/uk\305\202ad/index.html" | 275 -- files/pl/web/css/outline-color/index.html | 13 + .../index.html | 68 + .../index.html | 68 - files/pl/web/css/reference/index.html | 56 + files/pl/web/css/rozszerzenia_webkit/index.html | 358 --- files/pl/web/css/selektor_klasy/index.html | 86 - files/pl/web/css/selektor_uniwersalny/index.html | 104 - files/pl/web/css/selektory_typu/index.html | 80 - files/pl/web/css/shorthand_properties/index.html | 56 + .../css/skr\303\263cone_deklaracje_css/index.html" | 56 - files/pl/web/css/type_selectors/index.html | 80 + files/pl/web/css/universal_selectors/index.html | 104 + .../index.html" | 25 - files/pl/web/css/webkit_extensions/index.html | 358 +++ 67 files changed, 5730 insertions(+), 8739 deletions(-) delete mode 100644 files/pl/web/css/-moz-box-align/index.html delete mode 100644 files/pl/web/css/-moz-box-flex/index.html delete mode 100644 files/pl/web/css/-moz-box-orient/index.html delete mode 100644 files/pl/web/css/-moz-box-pack/index.html delete mode 100644 files/pl/web/css/-moz-outline-color/index.html create mode 100644 files/pl/web/css/_colon_-moz-first-node/index.html delete mode 100644 files/pl/web/css/_colon_after/index.html delete mode 100644 files/pl/web/css/_colon_before/index.html delete mode 100644 files/pl/web/css/_colon_first-letter/index.html delete mode 100644 files/pl/web/css/_colon_first-node/index.html create mode 100644 files/pl/web/css/_doublecolon_after/index.html create mode 100644 files/pl/web/css/_doublecolon_before/index.html create mode 100644 files/pl/web/css/_doublecolon_first-letter/index.html create mode 100644 files/pl/web/css/box-align/index.html create mode 100644 files/pl/web/css/box-flex/index.html create mode 100644 files/pl/web/css/box-orient/index.html create mode 100644 files/pl/web/css/box-pack/index.html create mode 100644 files/pl/web/css/class_selectors/index.html create mode 100644 files/pl/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/pl/web/css/css_color/index.html create mode 100644 files/pl/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/pl/web/css/css_colors/index.html delete mode 100644 files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html create mode 100644 files/pl/web/css/css_columns/using_multi-column_layouts/index.html delete mode 100644 files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html create mode 100644 files/pl/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html create mode 100644 files/pl/web/css/css_lists_and_counters/using_css_counters/index.html delete mode 100644 files/pl/web/css/css_reference/index.html create mode 100644 files/pl/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html delete mode 100644 "files/pl/web/css/css_selectors/u\305\274ycie_pseudoklasy__colon_target_w_selektorach/index.html" delete mode 100644 "files/pl/web/css/cursor/u\305\274ycie_warto\305\233ci_url_dla_w\305\202asno\305\233ci_cursor/index.html" delete mode 100644 "files/pl/web/css/cz\304\231ste_pytania_o_css/index.html" delete mode 100644 files/pl/web/css/dziedziczenie/index.html create mode 100644 files/pl/web/css/inheritance/index.html create mode 100644 files/pl/web/css/initial_value/index.html delete mode 100644 files/pl/web/css/inne_zasoby/index.html create mode 100644 files/pl/web/css/media_queries/testing_media_queries/index.html delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/bloki/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/czym_jest_css/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/czytelny_css/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/grafika_svg/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/javascript/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/kaskadowo\305\233\304\207_i_dziedziczenie/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/kolor/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/listy/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/media/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/po_co_u\305\274ywa\304\207_css/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/selektory/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/style_tekstowe/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/tables/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" create mode 100644 files/pl/web/css/outline-color/index.html create mode 100644 files/pl/web/css/privacy_and_the__colon_visited_selector/index.html delete mode 100644 files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html create mode 100644 files/pl/web/css/reference/index.html delete mode 100644 files/pl/web/css/rozszerzenia_webkit/index.html delete mode 100644 files/pl/web/css/selektor_klasy/index.html delete mode 100644 files/pl/web/css/selektor_uniwersalny/index.html delete mode 100644 files/pl/web/css/selektory_typu/index.html create mode 100644 files/pl/web/css/shorthand_properties/index.html delete mode 100644 "files/pl/web/css/skr\303\263cone_deklaracje_css/index.html" create mode 100644 files/pl/web/css/type_selectors/index.html create mode 100644 files/pl/web/css/universal_selectors/index.html delete mode 100644 "files/pl/web/css/warto\305\233\304\207_pocz\304\205tkowa/index.html" create mode 100644 files/pl/web/css/webkit_extensions/index.html (limited to 'files/pl/web/css') diff --git a/files/pl/web/css/-moz-box-align/index.html b/files/pl/web/css/-moz-box-align/index.html deleted file mode 100644 index 1d6c77d415..0000000000 --- a/files/pl/web/css/-moz-box-align/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: '-moz-box-align' -slug: Web/CSS/-moz-box-align -tags: - - CSS - - Non-standard -translation_of: Web/CSS/box-align ---- -

{{ CSSRef() }}

- -

{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}

- -

Podsumowanie

- -

W aplikacjach opartych na Mozilli -moz-box-align określa jak element XUL box (pudełko) wyrównuje swoją zawartość w poprzek (prostopadle) do kierunku swojego układu. Efekt tego jest widoczny tylko, jeśli w pudełku jest dodatkowa przestrzeń.

- -

Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.

- - - -

Składnia

- -
-moz-box-align: start | center | end | baseline | stretch
-
- -

Wartości

- -
-
start
-
Pudełko wyrównuje zawartość od początku, opuszczając dodatkową przestrzeń na końcu.
-
center
-
Pudełko wyrównuje zawartość do środka, dzieląc pustą przestrzeń odpowiednio między początek i koniec.
-
end
-
Pudełko wyrównuje zawartość do końca, opuszczając dodatkową przestrzeń na początku
-
baseline
-
Pudełko wyrównuje linie bazowe zawartości (ustawiając tekst w kolejności). Ma zastosowanie tylko, gdy orientacja pudełka jest pozioma.
-
stretch
-
Pudełko rozciąga zawartość, zatem w pudełku nie ma dodatkowej przestrzeni.
-
- -

Przykłady

- -
hbox.example {
-	-moz-box-align: end; /* przenosi zawartość do dołu */
-}
-
- -

Notatki

- -

Krawędź pudełka określona jakostart dla celu wyrównania zależy od orientacji pudełka

- - - - - - - - - - - - -
Poziomagórna
Pionowalewa
- -

Krawędź przeciwna do początkowej jest określana jakoend

- -

Jeśli wyrównanie jest ustawione przy użyciu atrybutu align elementu, wtedy styl jest ignorowany.

- -

Zobacz także

- -

CSS:-moz-box-orient, CSS:-moz-box-pack

diff --git a/files/pl/web/css/-moz-box-flex/index.html b/files/pl/web/css/-moz-box-flex/index.html deleted file mode 100644 index bd4f192a92..0000000000 --- a/files/pl/web/css/-moz-box-flex/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: '-moz-box-flex' -slug: Web/CSS/-moz-box-flex -tags: - - CSS - - Non-standard -translation_of: Web/CSS/box-flex ---- -

{{ CSSRef() }}

- -

{{ warning("This is a property for controlling parts of the XUL box model.  It does not match either the old CSS Flexible Box Layout Module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts).") }}

- -

Podsumowanie

- -

W aplikacjach opartych na Mozilli -moz-box-flex określa jak pudełko powiększa się, by wypełnić pudełko, które je zawiera, w kierunku układu zawierającego pudełka.

- - - -

Składnia

- -
-moz-box-flex:liczba
-
- -

Wartości

- -
-
0
-
Pudełko nie powiększa się.
-
> 0
-
Pudełko rozszerza się, by wypełnić proporcjonalną część dostępnej przestrzeni.
-
- -

Przykłady

- -
hbox.example {
-	-moz-box-flex: 1; /* take up some more space */
-}
-
- -

Uwagi

- -

Zawierające pudełko przydziela dodatkową dostępną przestrzeń proporcjonalnie do wartości rozciągania każdego elementu zawartości.

- -

Elementy zawartości, które mają rozciąganie ustawione na zero, nie powiększają się.

- -

Jeśli tylko jeden element zawartości ma niezerowe rozciąganie, wtedy powiększa się on do wypełnienia dostępnej wolnej przestrzeni.

- -

Elementy zawartości, które mają takie samo rozciąganie, powiększają się o tą samą bezwzględną liczbę.

- -

Jeśli wartość rozciąganie jest ustawiona przy użyciu atrybutu flex w elemencie, wtedy styl jest ignorowany.

- -

Aby zrobić element XUL w zawierającym pudełku takich samych rozmiarów, ustaw atrybut equalsize zawierającego pudełka na wartość always. Ten atrybut nie ma odpowiadającej własności CSS.

- -

Zobacz także

- -

CSS:-moz-box-orient, CSS:-moz-box-pack

- -
 
diff --git a/files/pl/web/css/-moz-box-orient/index.html b/files/pl/web/css/-moz-box-orient/index.html deleted file mode 100644 index 5effdac347..0000000000 --- a/files/pl/web/css/-moz-box-orient/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: '-moz-box-orient' -slug: Web/CSS/-moz-box-orient -tags: - - CSS - - Non-standard -translation_of: Web/CSS/box-orient ---- -

{{ CSSRef() }}

- -

{{ warning("This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced in newer drafts.") }}

- -

Podsumowanie

- -

W aplikacjach opartych na Mozilli -moz-box-orient określa, czy pudełko rozkłada swoją zawartość poziomo czy pionowo.

- -

Np. elementy XUL box i hbox domyślnie rozkładają swoją zawartość poziomo, zaś elementy XUL vbox domyślnie rozkładają swoją zawartość pionowo.

- - - -

Składnia

- -
-moz-box-orient: horizontal | vertical
-
- -

Wartości

- -
-
horizontal
-
Pudełko układa swoją zawartość w poziomie.
-
vertical
-
Pudełko układa swoją zawartość w pionie.
-
- -

Przykłady

- -
hbox.example {
-	-moz-box-orient: vertical; /* zmiana orientacji */
-}
-
- -

Notatki

- -

Jeśli orientacja jest ustawiona w elemencie przy użyciu atrybutu orient, wtedy styl jest ignorowany.

- -

Zobacz także

- -

CSS:direction, CSS:-moz-box-direction

diff --git a/files/pl/web/css/-moz-box-pack/index.html b/files/pl/web/css/-moz-box-pack/index.html deleted file mode 100644 index edbbe60856..0000000000 --- a/files/pl/web/css/-moz-box-pack/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '-moz-box-pack' -slug: Web/CSS/-moz-box-pack -tags: - - CSS - - Non-standard -translation_of: Web/CSS/box-pack ---- -

{{ CSSRef() }}

- -

{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}

- -

Podsumowanie

- -

W aplikacjach opartych na Mozilli -moz-box-pack określa jak pudełko wpakowuje swoją zawartość w kierunku swojego układu. Efekt tego jest widoczny tylko wtedy, gdy w pudełku jest dodatkowa wolna przestrzeń.

- -

Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.

- - - -

Składnia

- -
-moz-box-pack: start | center | end | justify
-
- -

Wartości

- -
-
start
-
Pudełko wpakowuje zawartość od początku, zostawiając dodatkową wolną przestrzeń na końcu.
-
center
-
Pudełko wpakowuje zawartość w środku, dzieląc dodatkową wolną przestrzeń pomiędzy początek i koniec.
-
end
-
Pudełko wpakowuje zawartość na końcu, zostawiając dodatkową wolną przestrzeń na początku.
-
justify
-
 ?
-
- -

Przykłady

- -
hbox.example {
-	-moz-box-pack: end; /* przesuwa zawartość na prawo */
-}
-
- -

Notatki

- -

Krawędź pudełka, określona jakostart dla celów wpakowywania, zależy od orientacji i kierunku pudełka.

- - - - - - - - - - - - - - - - - - - -
 NormalnaOdwrócona
Poziomolewaprawa
Pionowogóradół
- -

Krawędź przeciwna do początkowej jest określana jakoend.

- -

Jeśli wpakowywanie jest ustawione w atrybucie pack elementu, wtedy styl jest ignorowany.

- -

Zobacz także

- -

CSS:-moz-box-orient, CSS:-moz-box-direction, CSS:-moz-box-align

diff --git a/files/pl/web/css/-moz-outline-color/index.html b/files/pl/web/css/-moz-outline-color/index.html deleted file mode 100644 index ca9e572624..0000000000 --- a/files/pl/web/css/-moz-outline-color/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: '-moz-outline-color' -slug: Web/CSS/-moz-outline-color -tags: - - CSS - - 'CSS:Dokumentacje' - - 'CSS:Rozszerzenia_Mozilli' - - Dokumentacje - - Wszystkie_kategorie -translation_of: Web/CSS/outline-color -translation_of_original: Web/CSS/-moz-outline-color ---- -

d

diff --git a/files/pl/web/css/_colon_-moz-first-node/index.html b/files/pl/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..123c08088b --- /dev/null +++ b/files/pl/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,58 @@ +--- +title: ':first-node' +slug: 'Web/CSS/:first-node' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:-moz-first-node' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

Pseudoklasa :first-node sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. :first-node uwzględnia również węzły tekstowe składające się niebiałych znaków. Pseudoklasą, która działa identycznie, jednak nie uwzględnia węzłów tekstowych jest {{ Cssxref(":first-child") }}.

+ +

Składnia

+ +
selektor:first-node { własności }
+
+ +

Przykłady

+ +
<html>
+  <body>
+  Trochę tekstu.
+    <span id="first">pierwszy</span>
+    <div>
+      <span id="dfirst">pierwszy</span>
+      <span id="dsecond">drugi</span>
+    </div>
+    <span id="second">drugi</span>
+  </body>
+</html>
+
+ +
span:first-node { font-weight: bold; }
+
+ +

Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów span, które są pierwszymi dziećmi swoich rodziców. Zostanie tutaj pogrubione tylko jedno słowo "pierwszy", ponieważ span o id first nie jest pierwszym dzieckiem elementu body. Pierwszym dzieckiem elementu body jest węzeł tekstowy.

+ +
div:first-node:last-child { background-color: red; }
+
+ +

Ten przykład ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. Jednak za elementem może znajdować się węzeł tekstowy.

+ +
div:first-child:last-node { background-color: red; }
+
+ +

Ten przykład natomiast ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. Przed elementem może znajdować się węzeł tekstowy.

+ +

Notatki

+ +

Pseudoklasa :first-node nie jest obecnie obsługiwana. Skorzystaj z {{ Cssxref(":-moz-first-node") }}

+ +

Zobacz także

+ +

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-node") }}

diff --git a/files/pl/web/css/_colon_after/index.html b/files/pl/web/css/_colon_after/index.html deleted file mode 100644 index 71261c88bb..0000000000 --- a/files/pl/web/css/_colon_after/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: ':after' -slug: 'Web/CSS/:after' -tags: - - CSS - - 'CSS:Dokumentacje' - - Dokumentacje - - Wszystkie_kategorie -translation_of: 'Web/CSS/::after' ---- -

{{ CSSRef() }}

- -

Podsumowanie

- -

Tworzy pseudoelement, który staje się ostatnim dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest inline.

- -

Składnia

- -
/* składnia CSS2 */ selektor:after { własności }
-/* składnia CSS3 */ selektor::after { własności }
- -

Zapis ::aft​er został wprowadzony w CSS 3 w celu ustanowienia różnicy pomiędzy pseudo klasami, a pseudo elementami. Przeglądarki akceptują również notację :after wprowadzoną w CSS 2.

- -

Przykłady

- -

Prosty przykład

- -
<html>
-  <body>
-    <p>akapit</p>
-  </body>
-</html>
-
- -
p:after {
-  content: 'Koniec';
-  display: block;
-  margin-top: 3em;
-}
-
- -
-
body:after { content: 'Koniec dokumentu'; }
-
- -

Notatki

- -

Elementy wstawiane do dokumentu poprzez :after nie są widziane w drzewie dokumentu.

- -

Specyfikacje

- - - -

Zobacz także

- -

{{ Cssxref(":before") }}, {{ Cssxref("content") }}

- -

 

- -

{{ languages( { "en": "en/CSS/:after", "es": "es/CSS/after", "fr": "fr/CSS/:after" } ) }}

diff --git a/files/pl/web/css/_colon_before/index.html b/files/pl/web/css/_colon_before/index.html deleted file mode 100644 index 5c1a1f3772..0000000000 --- a/files/pl/web/css/_colon_before/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ':before' -slug: 'Web/CSS/:before' -tags: - - CSS - - 'CSS:Dokumentacje' - - Dokumentacje - - Wszystkie_kategorie -translation_of: 'Web/CSS/::before' ---- -

{{ CSSRef() }}

- -

Podsumowanie

- -

Tworzy pseudoelement, który staje się pierwszym dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest inline.

- -

Składnia

- -
element:before { własności }
-
- -

Najczęściej używana jest własność {{ Cssxref("content") }}, która pozwala na wstawienie treści do pseudoelementu.

- -

Przykłady

- -

Zobacz przykład

- -
<html>
-  <body>
-    <p>akapit</p>
-  </body>
-</html>
-
- -
p:before {
-  content: 'Tekst przed akapitem';
-  display: block;
-}
-
- -

 

- -

Notatki

- -

Elementy wstawiane do dokumentu poprzez :before nie są widziane w drzewie dokumentu.

- -

Specyfikacje

- - - -

Zobacz także

- -

{{ Cssxref(":after") }}, {{ Cssxref("content") }}

- -

 

- -

{{ languages( { "en": "en/CSS/:before", "es": "es/CSS/before", "fr": "fr/CSS/:before" } ) }}

diff --git a/files/pl/web/css/_colon_first-letter/index.html b/files/pl/web/css/_colon_first-letter/index.html deleted file mode 100644 index 5de2e64cbd..0000000000 --- a/files/pl/web/css/_colon_first-letter/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: ':first-letter' -slug: 'Web/CSS/:first-letter' -tags: - - CSS - - 'CSS:Dokumentacje' - - Dokumentacje - - Wszystkie_kategorie -translation_of: 'Web/CSS/::first-letter' ---- -

{{ CSSRef() }}

- -

Podsumowanie

- -

Pseudoelement odnoszący się do pierwszej litery w bloku.

- -

Składnia

- -
element::first-letter { własności }
-
- -

Przykłady

- -
p::first-letter { text-transform: uppercase; }
-
- -

Przykład zamieni w każdym paragrafie pierwszą literę na wielką.

- -
p::first-letter { color: red; }
-
- -

Przykład zmieni kolor pierwszej litery na czerwony w każdym elemencie p

- - - -

Notatki

- -

Pseudoelementy nie mogą być negowane poprzez {{ Cssxref(":not") }}.

- -

Specyfikacje

- - - -

Zobacz także

- -

{{ Cssxref("text-transform") }}

diff --git a/files/pl/web/css/_colon_first-node/index.html b/files/pl/web/css/_colon_first-node/index.html deleted file mode 100644 index 123c08088b..0000000000 --- a/files/pl/web/css/_colon_first-node/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: ':first-node' -slug: 'Web/CSS/:first-node' -tags: - - CSS - - 'CSS:Dokumentacje' - - Dokumentacje - - Wszystkie_kategorie -translation_of: 'Web/CSS/:-moz-first-node' ---- -

{{Non-standard_header}}{{ CSSRef() }}

- -

Podsumowanie

- -

Pseudoklasa :first-node sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. :first-node uwzględnia również węzły tekstowe składające się niebiałych znaków. Pseudoklasą, która działa identycznie, jednak nie uwzględnia węzłów tekstowych jest {{ Cssxref(":first-child") }}.

- -

Składnia

- -
selektor:first-node { własności }
-
- -

Przykłady

- -
<html>
-  <body>
-  Trochę tekstu.
-    <span id="first">pierwszy</span>
-    <div>
-      <span id="dfirst">pierwszy</span>
-      <span id="dsecond">drugi</span>
-    </div>
-    <span id="second">drugi</span>
-  </body>
-</html>
-
- -
span:first-node { font-weight: bold; }
-
- -

Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów span, które są pierwszymi dziećmi swoich rodziców. Zostanie tutaj pogrubione tylko jedno słowo "pierwszy", ponieważ span o id first nie jest pierwszym dzieckiem elementu body. Pierwszym dzieckiem elementu body jest węzeł tekstowy.

- -
div:first-node:last-child { background-color: red; }
-
- -

Ten przykład ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. Jednak za elementem może znajdować się węzeł tekstowy.

- -
div:first-child:last-node { background-color: red; }
-
- -

Ten przykład natomiast ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. Przed elementem może znajdować się węzeł tekstowy.

- -

Notatki

- -

Pseudoklasa :first-node nie jest obecnie obsługiwana. Skorzystaj z {{ Cssxref(":-moz-first-node") }}

- -

Zobacz także

- -

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-node") }}

diff --git a/files/pl/web/css/_doublecolon_after/index.html b/files/pl/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..71261c88bb --- /dev/null +++ b/files/pl/web/css/_doublecolon_after/index.html @@ -0,0 +1,63 @@ +--- +title: ':after' +slug: 'Web/CSS/:after' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::after' +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Tworzy pseudoelement, który staje się ostatnim dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest inline.

+ +

Składnia

+ +
/* składnia CSS2 */ selektor:after { własności }
+/* składnia CSS3 */ selektor::after { własności }
+ +

Zapis ::aft​er został wprowadzony w CSS 3 w celu ustanowienia różnicy pomiędzy pseudo klasami, a pseudo elementami. Przeglądarki akceptują również notację :after wprowadzoną w CSS 2.

+ +

Przykłady

+ +

Prosty przykład

+ +
<html>
+  <body>
+    <p>akapit</p>
+  </body>
+</html>
+
+ +
p:after {
+  content: 'Koniec';
+  display: block;
+  margin-top: 3em;
+}
+
+ +
+
body:after { content: 'Koniec dokumentu'; }
+
+ +

Notatki

+ +

Elementy wstawiane do dokumentu poprzez :after nie są widziane w drzewie dokumentu.

+ +

Specyfikacje

+ + + +

Zobacz także

+ +

{{ Cssxref(":before") }}, {{ Cssxref("content") }}

+ +

 

+ +

{{ languages( { "en": "en/CSS/:after", "es": "es/CSS/after", "fr": "fr/CSS/:after" } ) }}

diff --git a/files/pl/web/css/_doublecolon_before/index.html b/files/pl/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..5c1a1f3772 --- /dev/null +++ b/files/pl/web/css/_doublecolon_before/index.html @@ -0,0 +1,60 @@ +--- +title: ':before' +slug: 'Web/CSS/:before' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::before' +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Tworzy pseudoelement, który staje się pierwszym dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest inline.

+ +

Składnia

+ +
element:before { własności }
+
+ +

Najczęściej używana jest własność {{ Cssxref("content") }}, która pozwala na wstawienie treści do pseudoelementu.

+ +

Przykłady

+ +

Zobacz przykład

+ +
<html>
+  <body>
+    <p>akapit</p>
+  </body>
+</html>
+
+ +
p:before {
+  content: 'Tekst przed akapitem';
+  display: block;
+}
+
+ +

 

+ +

Notatki

+ +

Elementy wstawiane do dokumentu poprzez :before nie są widziane w drzewie dokumentu.

+ +

Specyfikacje

+ + + +

Zobacz także

+ +

{{ Cssxref(":after") }}, {{ Cssxref("content") }}

+ +

 

+ +

{{ languages( { "en": "en/CSS/:before", "es": "es/CSS/before", "fr": "fr/CSS/:before" } ) }}

diff --git a/files/pl/web/css/_doublecolon_first-letter/index.html b/files/pl/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..5de2e64cbd --- /dev/null +++ b/files/pl/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,49 @@ +--- +title: ':first-letter' +slug: 'Web/CSS/:first-letter' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::first-letter' +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Pseudoelement odnoszący się do pierwszej litery w bloku.

+ +

Składnia

+ +
element::first-letter { własności }
+
+ +

Przykłady

+ +
p::first-letter { text-transform: uppercase; }
+
+ +

Przykład zamieni w każdym paragrafie pierwszą literę na wielką.

+ +
p::first-letter { color: red; }
+
+ +

Przykład zmieni kolor pierwszej litery na czerwony w każdym elemencie p

+ + + +

Notatki

+ +

Pseudoelementy nie mogą być negowane poprzez {{ Cssxref(":not") }}.

+ +

Specyfikacje

+ + + +

Zobacz także

+ +

{{ Cssxref("text-transform") }}

diff --git a/files/pl/web/css/box-align/index.html b/files/pl/web/css/box-align/index.html new file mode 100644 index 0000000000..1d6c77d415 --- /dev/null +++ b/files/pl/web/css/box-align/index.html @@ -0,0 +1,77 @@ +--- +title: '-moz-box-align' +slug: Web/CSS/-moz-box-align +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-align +--- +

{{ CSSRef() }}

+ +

{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-box-align określa jak element XUL box (pudełko) wyrównuje swoją zawartość w poprzek (prostopadle) do kierunku swojego układu. Efekt tego jest widoczny tylko, jeśli w pudełku jest dodatkowa przestrzeń.

+ +

Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.

+ + + +

Składnia

+ +
-moz-box-align: start | center | end | baseline | stretch
+
+ +

Wartości

+ +
+
start
+
Pudełko wyrównuje zawartość od początku, opuszczając dodatkową przestrzeń na końcu.
+
center
+
Pudełko wyrównuje zawartość do środka, dzieląc pustą przestrzeń odpowiednio między początek i koniec.
+
end
+
Pudełko wyrównuje zawartość do końca, opuszczając dodatkową przestrzeń na początku
+
baseline
+
Pudełko wyrównuje linie bazowe zawartości (ustawiając tekst w kolejności). Ma zastosowanie tylko, gdy orientacja pudełka jest pozioma.
+
stretch
+
Pudełko rozciąga zawartość, zatem w pudełku nie ma dodatkowej przestrzeni.
+
+ +

Przykłady

+ +
hbox.example {
+	-moz-box-align: end; /* przenosi zawartość do dołu */
+}
+
+ +

Notatki

+ +

Krawędź pudełka określona jakostart dla celu wyrównania zależy od orientacji pudełka

+ + + + + + + + + + + + +
Poziomagórna
Pionowalewa
+ +

Krawędź przeciwna do początkowej jest określana jakoend

+ +

Jeśli wyrównanie jest ustawione przy użyciu atrybutu align elementu, wtedy styl jest ignorowany.

+ +

Zobacz także

+ +

CSS:-moz-box-orient, CSS:-moz-box-pack

diff --git a/files/pl/web/css/box-flex/index.html b/files/pl/web/css/box-flex/index.html new file mode 100644 index 0000000000..bd4f192a92 --- /dev/null +++ b/files/pl/web/css/box-flex/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-flex +--- +

{{ CSSRef() }}

+ +

{{ warning("This is a property for controlling parts of the XUL box model.  It does not match either the old CSS Flexible Box Layout Module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts).") }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-box-flex określa jak pudełko powiększa się, by wypełnić pudełko, które je zawiera, w kierunku układu zawierającego pudełka.

+ + + +

Składnia

+ +
-moz-box-flex:liczba
+
+ +

Wartości

+ +
+
0
+
Pudełko nie powiększa się.
+
> 0
+
Pudełko rozszerza się, by wypełnić proporcjonalną część dostępnej przestrzeni.
+
+ +

Przykłady

+ +
hbox.example {
+	-moz-box-flex: 1; /* take up some more space */
+}
+
+ +

Uwagi

+ +

Zawierające pudełko przydziela dodatkową dostępną przestrzeń proporcjonalnie do wartości rozciągania każdego elementu zawartości.

+ +

Elementy zawartości, które mają rozciąganie ustawione na zero, nie powiększają się.

+ +

Jeśli tylko jeden element zawartości ma niezerowe rozciąganie, wtedy powiększa się on do wypełnienia dostępnej wolnej przestrzeni.

+ +

Elementy zawartości, które mają takie samo rozciąganie, powiększają się o tą samą bezwzględną liczbę.

+ +

Jeśli wartość rozciąganie jest ustawiona przy użyciu atrybutu flex w elemencie, wtedy styl jest ignorowany.

+ +

Aby zrobić element XUL w zawierającym pudełku takich samych rozmiarów, ustaw atrybut equalsize zawierającego pudełka na wartość always. Ten atrybut nie ma odpowiadającej własności CSS.

+ +

Zobacz także

+ +

CSS:-moz-box-orient, CSS:-moz-box-pack

+ +
 
diff --git a/files/pl/web/css/box-orient/index.html b/files/pl/web/css/box-orient/index.html new file mode 100644 index 0000000000..5effdac347 --- /dev/null +++ b/files/pl/web/css/box-orient/index.html @@ -0,0 +1,54 @@ +--- +title: '-moz-box-orient' +slug: Web/CSS/-moz-box-orient +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-orient +--- +

{{ CSSRef() }}

+ +

{{ warning("This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced in newer drafts.") }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-box-orient określa, czy pudełko rozkłada swoją zawartość poziomo czy pionowo.

+ +

Np. elementy XUL box i hbox domyślnie rozkładają swoją zawartość poziomo, zaś elementy XUL vbox domyślnie rozkładają swoją zawartość pionowo.

+ + + +

Składnia

+ +
-moz-box-orient: horizontal | vertical
+
+ +

Wartości

+ +
+
horizontal
+
Pudełko układa swoją zawartość w poziomie.
+
vertical
+
Pudełko układa swoją zawartość w pionie.
+
+ +

Przykłady

+ +
hbox.example {
+	-moz-box-orient: vertical; /* zmiana orientacji */
+}
+
+ +

Notatki

+ +

Jeśli orientacja jest ustawiona w elemencie przy użyciu atrybutu orient, wtedy styl jest ignorowany.

+ +

Zobacz także

+ +

CSS:direction, CSS:-moz-box-direction

diff --git a/files/pl/web/css/box-pack/index.html b/files/pl/web/css/box-pack/index.html new file mode 100644 index 0000000000..edbbe60856 --- /dev/null +++ b/files/pl/web/css/box-pack/index.html @@ -0,0 +1,82 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-pack +--- +

{{ CSSRef() }}

+ +

{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-box-pack określa jak pudełko wpakowuje swoją zawartość w kierunku swojego układu. Efekt tego jest widoczny tylko wtedy, gdy w pudełku jest dodatkowa wolna przestrzeń.

+ +

Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.

+ + + +

Składnia

+ +
-moz-box-pack: start | center | end | justify
+
+ +

Wartości

+ +
+
start
+
Pudełko wpakowuje zawartość od początku, zostawiając dodatkową wolną przestrzeń na końcu.
+
center
+
Pudełko wpakowuje zawartość w środku, dzieląc dodatkową wolną przestrzeń pomiędzy początek i koniec.
+
end
+
Pudełko wpakowuje zawartość na końcu, zostawiając dodatkową wolną przestrzeń na początku.
+
justify
+
 ?
+
+ +

Przykłady

+ +
hbox.example {
+	-moz-box-pack: end; /* przesuwa zawartość na prawo */
+}
+
+ +

Notatki

+ +

Krawędź pudełka, określona jakostart dla celów wpakowywania, zależy od orientacji i kierunku pudełka.

+ + + + + + + + + + + + + + + + + + + +
 NormalnaOdwrócona
Poziomolewaprawa
Pionowogóradół
+ +

Krawędź przeciwna do początkowej jest określana jakoend.

+ +

Jeśli wpakowywanie jest ustawione w atrybucie pack elementu, wtedy styl jest ignorowany.

+ +

Zobacz także

+ +

CSS:-moz-box-orient, CSS:-moz-box-direction, CSS:-moz-box-align

diff --git a/files/pl/web/css/class_selectors/index.html b/files/pl/web/css/class_selectors/index.html new file mode 100644 index 0000000000..12f8d4f5c8 --- /dev/null +++ b/files/pl/web/css/class_selectors/index.html @@ -0,0 +1,86 @@ +--- +title: Selektor klasy +slug: Web/CSS/Selektor_klasy +tags: + - CSS + - Klasy + - Reference + - Selektory +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef("Selectors")}}
+ +
 
+ +
Selektor klasy wyszukuje każdy element z atrybutem {{htmlattrxref("class")}} w dokumencie HTML. Atrybut {{htmlattrxref("class")}} jest zdefiniowany jako lista przedmiotów oddzielonych ze sobą spacją, jeden z nich musi zgadzać się z podaną klasą w selektorze (CSS).
+ +
 
+ +

Składnia

+ +
.nazwaklasy { właściwości stylu }
+ +

Jest to równoważne z {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[class~=nazwaklasy] { właściwości stylu }
+ +

Przykład

+ +

CSS

+ +
span.classy {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<span class="classy">Przykładowy tekst.</span>
+<span>Kolejny przykładowy tekst.</span>
+
+ +

Specyfikacje

+ + + +

Kompatybilność z przeglądarkami

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaWsparcie
ChromeTak
EdgeTak
FirefoxTak
Internet ExplorerTak
OperaTak
SafariTak
+ +

 

diff --git a/files/pl/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/pl/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..f6e786ee52 --- /dev/null +++ b/files/pl/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,41 @@ +--- +title: Użycie wartości URL dla własności cursor +slug: Web/CSS/cursor/Użycie_wartości_URL_dla_własności_cursor +tags: + - CSS + - CSS_2.1 + - Programowanie_WWW + - Programowanie_dla_wielu_przeglądarek + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

 

+

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) wspiera wartości URL dla własności cursor CSS 2/2.1. To pozwala używać zewnętrzne obrazki jako kursory myszy — można użyć każdego formatu wspieranego przez Gecko.

+

Składnia

+

Składnia dla tej własności:

+
cursor: [<url>,]* słowo_kluczowe;
+
+

To oznacza, że można podać zero lub więcej adresów URL (oddzielonych przecinkiem), a na końcu musi pojawić się jedno ze słów kluczowych zdefiniowanych w specyfikacji CSS, takie jak auto czy pointer.

+

Na przykład, taka wartość jest dozwolona:

+
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+

Najpierw nastąpi próba pobrania pliku foo.cur. Jeżeli ten plik nie istnieje, lub jest nieprawidłowy z jakiegoś powodu, nastąpi próba pobrania bar.gif, a jeśli to się nie uda, zostanie użyta wartość auto.

+

Wsparcie dla składni CSS3 dla wartości własności cursor zostało dodane w Gecko 1.8beta3 (Deer Partk Alpha 2); zatem działa ono w Firefoksie 1.5. Pozwala to na określanie punktu wiązania kursora, który musi być wewnątrz wymiarów obrazka kursora; koordynaty na zewnątrz obrazka będą przybliżane do krawędzi (n.p. ujemna wartość będzie interpretowana jako 0, a wartości wykraczające poza wymiary obrazka będą przycinane do najbliższego piksela w obrazku). Jeśli nie zostaną podane, dla plików CUR i XBM wartości zostaną pobrane z plików, a dla pozostałych zostanie ustalony lewy górny róg obrazka. Przykładem składni CSS3 jest:

+
cursor: url(foo.png) 4 12, auto;
+
+

Pierwsza liczba to wartość x, a drugi y. W tym przypadku punkt wiązania zostanie ustawiony w pikselu (4,12) licząc od lewego górnego rogu (0,0).

+

Ograniczenia

+

Można używać wszystkich formatów obrazków wspieranych przez Gecko. To oznacza, że możesz użyć BMP, JPG, CUR, GIF, itp. Jednak ANI nie jest wspierane. I nawet, jeżeli zostanie podany animowany GIF, kursor nie będzie animowany. To ograniczenie zostanie usunięte w przyszłych wersjach.

+

Gecko, samo w sobie, nie tworzy żadnych ograniczeń, co do rozmiaru kursora. Jednak powinieneś ograniczyć obrazek do 32x32 dla maksymalnej kompatybilności z różnymi systemami operacyjnymi. W szczególności kursory większe, niż podany rozmiar nie będą działały na Windows 9x (95, 98, ME).

+

Przezroczyste kursory nie są wspierane na systemie Windows w wersjach wcześniejszych niż XP. To ograniczenie systemu operacyjnego. Przezroczystość działa na pozostałych platformach.

+

Tylko wydania Mozilli na platformy Windows, OS/2 i Linux (z GTK+ 2.4 lub nowszym) wspierają wartości URL dla kursorów. Wsparcie dla innych platform może zostać dodane w przyszłości (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, Gtk 2.0/2.2: {{ Bug(308536) }})

+

Kompatybilność z innymi przeglądarkami

+

Microsoft Internet Explorer także wspiera wartości URI dla własności cursor. Jednak wspiera wyłącznie formaty CUR i ANI.

+

Jest także znacznie mniej restrykcyjny w zakresie składni. To oznacza, że wartości takie jak:

+
cursor: url(foo.cur);
+
+

lub:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

będą działały w MSIE, ale nie będą w Gecko. Dla kompatybilności z Gecko i zgodności ze specyfikacja CSS, zawsze na początku należy podać URI, oraz użyć dokładnie jednego słowa kluczowego na końcu.

+

 

diff --git a/files/pl/web/css/css_color/index.html b/files/pl/web/css/css_color/index.html new file mode 100644 index 0000000000..93bc7ca016 --- /dev/null +++ b/files/pl/web/css/css_color/index.html @@ -0,0 +1,120 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +--- +
{{CSSRef}}
+ +

CSS Colors is a module of CSS that deals with colors, color types and transparency.

+ +

Reference

+ +

Properties

+ +
+ +
+ +

CSS Data Types

+ +

{{cssxref("<color>")}}

+ +

Guides

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

See also

+ + diff --git a/files/pl/web/css/css_colors/color_picker_tool/index.html b/files/pl/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..7907144f10 --- /dev/null +++ b/files/pl/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3241 @@ +--- +title: Narzędzie doboru kolorów +slug: Web/CSS/CSS_Colors/Narzedzie_doboru_kolorow +tags: + - CSS + - CSS Kolory + - HTML Kolory + - Narzędzia + - kolor + - kolory + - narzędzie + - narzędzie do wybierania kolorów + - wybieranie kolorów +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{CSSRef}}

+ +

To narzędzie ułatwia tworzenie, wybieranie i eksperymentowanie z niestandadrowymi kolorami w sieci. Umożliwia także konwersję pomiędzy różnymi formatami kolorów obsługiwanymi przez CSS, w tym: kolory HEXA, RGB (Red/Green/Blue) i HSL (Hue/Saturation/Lightness). Możliwa jest też kontrola kanału alpha w formatach RGB (rgba) i HSL.

+ +

Każdy wybrany kolor prezentowany jest we wszystkich trzech standardowych formatach CSS . Dodatkowo, bazując na obecnie wybranym kolorze, tworzona jest paleta HSL, HSV oraz alpha. Okno wyboru koloru "zakraplacz" można przełączać pomiędzy formatami HSL i HSV. Przeciągając kolory do pojemnika na dole i poruszając nimi nad sobą możesz przetestować jak wyglądają obok siebie. Zmieniaj względną wartość z-index aby przesunąc kolor na wierzch lub schować za innym.

+ +

To narzędzie pozwoli ci odnależć idealne kolory CSS do wykorzystania w twoim HTML.

+ +
{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}
+ +

Wygenerowane kolory można użyć wszędzie gdzie potrzeba w obrębie CSS i HTML, chyba że stwierdzono inaczej.

+ +

Zobacz też

+ +

Więcej o używaniu kolrów, sprawdź:

+ + diff --git a/files/pl/web/css/css_colors/index.html b/files/pl/web/css/css_colors/index.html deleted file mode 100644 index 93bc7ca016..0000000000 --- a/files/pl/web/css/css_colors/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CSS Colors -slug: Web/CSS/CSS_Colors -tags: - - CSS - - CSS Colors - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -
{{CSSRef}}
- -

CSS Colors is a module of CSS that deals with colors, color types and transparency.

- -

Reference

- -

Properties

- -
- -
- -

CSS Data Types

- -

{{cssxref("<color>")}}

- -

Guides

- -

None.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

See also

- - diff --git a/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html b/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html deleted file mode 100644 index 7907144f10..0000000000 --- a/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html +++ /dev/null @@ -1,3241 +0,0 @@ ---- -title: Narzędzie doboru kolorów -slug: Web/CSS/CSS_Colors/Narzedzie_doboru_kolorow -tags: - - CSS - - CSS Kolory - - HTML Kolory - - Narzędzia - - kolor - - kolory - - narzędzie - - narzędzie do wybierania kolorów - - wybieranie kolorów -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- -
-

ColorPicker tool

- -

HTML Content

- -
    <div id="container">
-        <div id="palette" class="block">
-            <div id="color-palette"></div>
-            <div id="color-info">
-                <div class="title"> CSS Color </div>
-            </div>
-        </div>
-
-        <div id="picker" class="block">
-            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
-            <div id="picker-samples" sample-id="master"></div>
-            <div id="controls">
-                <div id="delete">
-                    <div id="trash-can"></div>
-                </div>
-                <div id="void-sample" class="icon"></div>
-            </div>
-        </div>
-
-        <div id="canvas" data-tutorial="drop">
-            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-                data-max="20" data-sensivity="10"></div>
-        </div>
-    </div>
-
-
- -

CSS Content

- -
/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
-	width: 420px;
-	margin: 0;
-	border: 1px solid #DDD;
-	background-color: #FFF;
-	display: table;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-color-picker .picking-area {
-	width: 198px;
-	height: 198px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: relative;
-	float: left;
-	display: table;
-}
-
-.ui-color-picker .picking-area:hover {
-	cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
-	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
-	background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
-	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background-color: #F00;
-}
-
-.ui-color-picker .picker {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	border: 1px solid #FFF;
-	position: absolute;
-	top: 45%;
-	left: 45%;
-}
-
-.ui-color-picker .picker:before {
-	width: 8px;
-	height: 8px;
-	content: "";
-	position: absolute;
-	border: 1px solid #999;
-	border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
-	width: 198px;
-	height: 28px;
-	margin: 5px;
-	border: 1px solid #FFF;
-	float: left;
-}
-
-.ui-color-picker .hue {
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
-	border: 1px solid #CCC;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
-	width: 2px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-.ui-color-picker .info * {
-	float: left;
-}
-
-.ui-color-picker .input {
-	width: 64px;
-	margin: 5px 2px;
-	float: left;
-}
-
-.ui-color-picker .input .name {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-.ui-color-picker .input input {
-	width: 30px;
-	height: 18px;
-	margin: 0;
-	padding: 0;
-	border: 1px solid #DDD;
-	text-align: center;
-	float: right;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-	display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
-	margin-top: 10px;
-	width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > .name {
-	width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > input {
-	float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
-	width: auto;
-	float: right;
-	margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > .name {
-	display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > input {
-	width: 90px;
-	height: 24px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
-	width: 95px;
-	height: 53px;
-	margin: 5px;
-	margin-top: 10px;
-	border: 1px solid #DDD;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-	float: left;
-	position: relative;
-}
-
-.ui-color-picker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	top: 0;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .preview-color {
-	width: 100%;
-	height: 100%;
-	background-color: rgba(255, 0, 0, 0.5);
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
-	width: 10px;
-	height: 20px;
-	position: relative;
-	border-radius: 5px 0 0 5px;
-	border: 1px solid #DDD;
-	background-color: #EEE;
-	left: -12px;
-	top: -1px;
-	z-index: 1;
-	transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
-	background-color: #CCC;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	box-shadow: 0 0 5px 0 #999;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-[data-resize='both']:hover {
-	cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
-	cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
-	cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
-	display: none;
-}
-
-[data-collapsed='true'] {
-	height: 0 !important;
-}
-
-.block {
-	display: table;
-}
-
-
-/**
- * 	Container
- */
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	display: table;
-}
-
-/**
- * 	Picker Zone
- */
-
-#picker {
-	padding: 10px;
-	width: 980px;
-}
-
-.ui-color-picker {
-	padding: 3px 5px;
-	float: left;
-	border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
-	display: none;
-}
-
-.ui-color-picker .preview-color:hover {
-	cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
-	width: 375px;
-	height: 114px;
-	max-height: 218px;
-	margin: 0 10px 0 30px;
-	overflow: hidden;
-	position: relative;
-	float: left;
-
-	transition: all 0.2s;
-}
-
-#picker-samples .sample {
-	width: 40px;
-	height: 40px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: absolute;
-	float: left;
-	transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
-	border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#picker-samples #add-icon {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
-	cursor: pointer;
-	border-color: #DDD;
-	box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
-	content: "";
-	position: absolute;
-	background-color: #EEE;
-	box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
-	width: 70%;
-	height: 16%;
-	top: 42%;
-	left: 15%;
-}
-
-#picker-samples #add-icon:after {
-	width: 16%;
-	height: 70%;
-	top: 15%;
-	left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
-	background-color: #DDD;
-	box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- * 	Controls
- */
-
-#controls {
-	width: 110px;
-	padding: 10px;
-	float: right;
-}
-
-#controls #picker-switch {
-	text-align: center;
-	float: left;
-}
-
-#controls .icon {
-	width: 48px;
-	height: 48px;
-	margin: 10px 0;
-	background-repeat: no-repeat;
-	background-position: center;
-	border: 1px solid #DDD;
-	display: table;
-	float: left;
-}
-
-#controls .icon:hover {
-	cursor: pointer;
-}
-
-#controls .picker-icon {
-	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
-	margin-right: 10px;
-	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-	background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
-	border-color: #CCC;
-	background-position: center right;
-}
-
-#controls .switch {
-	width: 106px;
-	padding: 1px;
-	border: 1px solid #CCC;
-	font-size: 14px;
-	text-align: center;
-	line-height: 24px;
-	overflow: hidden;
-	float: left;
-}
-
-#controls .switch:hover {
-	cursor: pointer;
-}
-
-#controls .switch > * {
-	width: 50%;
-	padding: 2px 0;
-	background-color: #EEE;
-	float: left;
-}
-
-#controls .switch [data-active='true'] {
-	color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-color: #777;
-}
-
-/**
- * 	Trash Can
- */
-
-#delete {
-	width: 100%;
-	height: 94px;
-	background-color: #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-
-	text-align: center;
-	color: #777;
-
-	position: relative;
-	float: right;
-}
-
-#delete #trash-can {
-	width: 80%;
-	height: 80%;
-	border: 2px dashed #FFF;
-	border-radius: 5px;
-	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
-	position: absolute;
-	top: 10%;
-	left: 10%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
-	background-color: #999;
-}
-
-/**
- * 	Color Theme
- */
-
-#color-theme {
-	margin: 0 8px 0 0;
-	border: 1px solid #EEE;
-	display: inline-block;
-	float: right;
-}
-
-#color-theme .box {
-	width: 80px;
-	height: 92px;
-	float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
-	width: 360px;
-	float: left;
-}
-
-#color-info .title {
-	width: 100%;
-	padding: 15px;
-	font-size: 18px;
-	text-align: center;
-	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-	background-repeat:no-repeat;
-	background-position: center left 30%;
-}
-
-#color-info .copy-container {
-	position: absolute;
-	top: -100%;
-}
-
-#color-info .property {
-	min-width: 280px;
-	height: 30px;
-	margin: 10px 0;
-	text-align: center;
-	line-height: 30px;
-}
-
-#color-info .property > * {
-	float: left;
-}
-
-#color-info .property .type {
-	width: 60px;
-	height: 100%;
-	padding: 0 16px 0 0;
-	text-align: right;
-}
-
-#color-info .property .value {
-	width: 200px;
-	height: 100%;
-	padding: 0 10px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 16px;
-	color: #777;
-	text-align: center;
-	background-color: #FFF;
-	border: none;
-}
-
-#color-info .property .value:hover {
-	color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
-	background-position: center right;
-}
-
-#color-info .property .copy {
-	width: 24px;
-	height: 100%;
-	padding: 0 5px;
-	background-color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-	background-repeat: no-repeat;
-	background-position: center left;
-	border-left: 1px solid #EEE;
-	text-align: right;
-	float: left;
-}
-
-#color-info .property .copy:hover {
-	background-position: center right;
-}
-
-
-/**
- * 	Color Palette
- */
-
-#palette {
-	width: 1000px;
-	padding: 10px 0;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	background-color: #EEE;
-	color: #777;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#color-palette {
-	width: 640px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #777;
-	float: left;
-}
-
-#color-palette .container {
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	overflow: hidden;
-	float: left;
-	transition: all 0.5s;
-}
-
-#color-palette .container > * {
-	float: left;
-}
-
-#color-palette .title {
-	width: 100px;
-	padding: 0 10px;
-	text-align: right;
-	line-height: inherit;
-}
-
-#color-palette .palette {
-	width: 456px;
-	height: 38px;
-	margin: 3px;
-	padding: 3px;
-	display: table;
-	background-color: #FFF;
-}
-
-#color-palette .palette .sample {
-	width: 30px;
-	height: 30px;
-	margin: 3px;
-	position: relative;
-	border: 1px solid #DDD;
-	float: left;
-	transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls > * {
-	float: left;
-}
-
-#color-palette .controls > *:hover {
-	cursor: pointer;
-}
-
-#color-palette .controls .lock {
-	width: 24px;
-	height: 24px;
-	margin: 10px;
-	padding: 3px;
-	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-	background-repeat: no-repeat;
-	background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
-	/*background-image: url('images/unlocked-hover.png');*/
-	background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
-	/*background-image: url('images/locked.png');*/
-	background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
-	/*background-image: url('images/lock-hover.png');*/
-	background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
-	width: 100%;
-	height: 300px;
-	min-height: 250px;
-	border-top: 1px solid #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	position: relative;
-	float: left;
-}
-
-#canvas[data-tutorial='drop'] {
-	text-align: center;
-	font-size: 30px;
-	color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
-	content: "Drop colors here to compare";
-	width: 40%;
-	padding: 30px 9% 70px 11%;
-
-	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-	background-repeat: no-repeat;
-	background-position: left 35px top 60%;
-
-	text-align: right;
-
-	border: 3px dashed rgb(221, 221, 221);
-	border-radius: 15px;
-
-	position: absolute;
-	top: 50px;
-	left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
-	content: "adjust, change or modify";
-	width: 40%;
-	font-size: 24px;
-	position: absolute;
-	top: 130px;
-	left: 32%;
-	z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
-	background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
-	content: "double click to activate";
-	width: 80px;
-	color: #FFF;
-	position: absolute;
-	top: 10%;
-	left: 20%;
-	z-index: 2;
-}
-
-#canvas .sample {
-	width: 100px;
-	height: 100px;
-	min-width: 20px;
-	min-height: 20px;
-	position: absolute;
-	border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
-	cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#canvas .sample:hover > * {
-	cursor: pointer;
-	display: block !important;
-}
-
-#canvas .sample .resize-handle {
-	display: none;
-}
-
-#canvas .sample .pick {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#canvas .sample .delete {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
-	width: 16px;
-	height: 16px;
-	margin: 5px;
-	background: url("images/canvas-controls.png") center left no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
-#canvas .toggle-bg:hover {
-	cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
-	background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
-	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
-	height: 20px;
-	margin: 5px;
-	font-size: 16px;
-	position: absolute;
-	opacity: 0;
-	top: -10000px;
-	left: 0;
-	color: #777;
-	float: left;
-	transition: opacity 1s;
-}
-
-#zindex input {
-	border: 1px solid #DDD;
-	font-size: 16px;
-	color: #777;
-}
-
-#zindex .ui-input-slider-info {
-	width: 60px;
-}
-
-#zindex[data-active='true'] {
-	top: 0;
-	opacity: 1;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	var subscribers = [];
-	var pickers = [];
-
-	/**
-	 * RGBA Color class
-	 *
-	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 * @param lightness		0-100
-	 */
-
-	function Color(color) {
-
-		if(color instanceof Color === true) {
-			this.copy(color);
-			return;
-		}
-
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-		this.lightness = 0;
-		this.format = 'HSV';
-	}
-
-	function RGBColor(r, g, b) {
-		var color = new Color();
-		color.setRGBA(r, g, b, 1);
-		return color;
-	}
-
-	function RGBAColor(r, g, b, a) {
-		var color = new Color();
-		color.setRGBA(r, g, b, a);
-		return color;
-	}
-
-	function HSVColor(h, s, v) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		return color;
-	}
-
-	function HSVAColor(h, s, v, a) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		color.a = a;
-		return color;
-	}
-
-	function HSLColor(h, s, l) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		return color;
-	}
-
-	function HSLAColor(h, s, l, a) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		color.a = a;
-		return color;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-		this.format = '' + obj.format;
-		this.lightness = obj.lightness;
-	};
-
-	Color.prototype.setFormat = function setFormat(format) {
-		if (format === 'HSV')
-			this.format = 'HSV';
-		if (format === 'HSL')
-			this.format = 'HSL';
-	};
-
-	/*========== Methods to set Color Properties ==========*/
-
-	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-		return (typeof(value) === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 255);
-	};
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (this.isValidRGBValue(red) === false ||
-			this.isValidRGBValue(green) === false ||
-			this.isValidRGBValue(blue) === false)
-			return;
-
-			this.r = red | 0;
-			this.g = green | 0;
-			this.b = blue | 0;
-
-		if (this.isValidRGBValue(alpha) === true)
-			this.a = alpha | 0;
-	};
-
-	Color.prototype.setByName = function setByName(name, value) {
-		if (name === 'r' || name === 'g' || name === 'b') {
-			if(this.isValidRGBValue(value) === false)
-				return;
-
-			this[name] = value;
-			this.updateHSX();
-		}
-	};
-
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.lightness = lightness;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHue = function setHue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 359)
-			return;
-		this.hue = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setSaturation = function setSaturation(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.saturation = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setValue = function setValue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setLightness = function setLightness(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.lightness = value;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-		this.RGBtoHSV();
-	};
-
-	/*========== Conversion Methods ==========*/
-
-	Color.prototype.convertToHSL = function convertToHSL() {
-		if (this.format === 'HSL')
-			return;
-
-		this.setFormat('HSL');
-		this.RGBtoHSL();
-	};
-
-	Color.prototype.convertToHSV = function convertToHSV() {
-		if (this.format === 'HSV')
-			return;
-
-		this.setFormat('HSV');
-		this.RGBtoHSV();
-	};
-
-	/*========== Update Methods ==========*/
-
-	Color.prototype.updateRGB = function updateRGB() {
-		if (this.format === 'HSV') {
-			this.HSVtoRGB();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.HSLtoRGB();
-			return;
-		}
-	};
-
-	Color.prototype.updateHSX = function updateHSX() {
-		if (this.format === 'HSV') {
-			this.RGBtoHSV();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.RGBtoHSL();
-			return;
-		}
-	};
-
-	Color.prototype.HSVtoRGB = function HSVtoRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.HSLtoRGB = function HSLtoRGB() {
-		var sat = this.saturation / 100;
-		var light = this.lightness / 100;
-		var C = sat * (1 - Math.abs(2 * light - 1));
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = light - C/2;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.RGBtoHSV = function RGBtoHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	};
-
-	Color.prototype.RGBtoHSL = function RGBtoHSL() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-		var lightness = (cmax + cmin) / 2;
-		var X = (1 - Math.abs(2 * lightness - 1));
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / X;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.lightness = (lightness * 100) | 0;
-	};
-
-	/*========== Get Methods ==========*/
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	};
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-		var a = '';
-		var v = '';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'rgb' + a + rgb + v + ')';
-		return value;
-	};
-
-	Color.prototype.getHSLA = function getHSLA() {
-		if (this.format === 'HSV') {
-			var color = new Color(this);
-			color.setFormat('HSL');
-			color.updateHSX();
-			return color.getHSLA();
-		}
-
-		var a = '';
-		var v = '';
-		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'hsl' + a + hsl + v + ')';
-		return value;
-	};
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	};
-
-	/*=======================================================================*/
-	/*=======================================================================*/
-
-	/*========== Capture Mouse Movement ==========*/
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener('mousedown', function(e) {
-			callback(e);
-			document.addEventListener('mousemove', callback);
-		});
-
-		document.addEventListener('mouseup', function(e) {
-			document.removeEventListener('mousemove', callback);
-		});
-	};
-
-	/*====================*/
-	// Color Picker Class
-	/*====================*/
-
-	function ColorPicker(node) {
-		this.color = new Color();
-		this.node = node;
-		this.subscribers = [];
-
-		var type = this.node.getAttribute('data-mode');
-		var topic = this.node.getAttribute('data-topic');
-
-		this.topic = topic;
-		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-		this.color.setFormat(this.picker_mode);
-
-		this.createPickingArea();
-		this.createHueArea();
-
-		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-		this.createAlphaArea();
-
-		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-		this.createPreviewBox();
-		this.createChangeModeButton();
-
-		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-		this.setColor(this.color);
-		pickers[topic] = this;
-	}
-
-	/*************************************************************************/
-	//				Function for generating the color-picker
-	/*************************************************************************/
-
-	ColorPicker.prototype.createPickingArea = function createPickingArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'picking-area';
-		picker.className = 'picker';
-
-		this.picking_area = area;
-		this.color_picker = picker;
-		setMouseTracking(area, this.updateColor.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createHueArea = function createHueArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'hue';
-		picker.className ='slider-picker';
-
-		this.hue_area = area;
-		this.hue_picker = picker;
-		setMouseTracking(area, this.updateHueSlider.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-		var area = document.createElement('div');
-		var mask = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'alpha';
-		mask.className = 'alpha-mask';
-		picker.className = 'slider-picker';
-
-		this.alpha_area = area;
-		this.alpha_mask = mask;
-		this.alpha_picker = picker;
-		setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
-		area.appendChild(mask);
-		mask.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-		var preview_box = document.createElement('div');
-		var preview_color = document.createElement('div');
-
-		preview_box.className = 'preview';
-		preview_color.className = 'preview-color';
-
-		this.preview_color = preview_color;
-
-		preview_box.appendChild(preview_color);
-		this.node.appendChild(preview_box);
-	};
-
-	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-		var wrapper = document.createElement('div');
-		var input = document.createElement('input');
-		var info = document.createElement('span');
-
-		wrapper.className = 'input';
-		wrapper.setAttribute('data-topic', topic);
-		info.textContent = title;
-		info.className = 'name';
-		input.setAttribute('type', 'text');
-
-		wrapper.appendChild(info);
-		wrapper.appendChild(input);
-		this.node.appendChild(wrapper);
-
-		input.addEventListener('change', onChangeFunc);
-		input.addEventListener('click', function() {
-			this.select();
-		});
-
-		this.subscribe(topic, function(value) {
-			input.value = value;
-		});
-	};
-
-	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
-		var button = document.createElement('div');
-		button.className = 'switch_mode';
-		button.addEventListener('click', function() {
-			if (this.picker_mode === 'HSV')
-				this.setPickerMode('HSL');
-			else
-				this.setPickerMode('HSV');
-
-		}.bind(this));
-
-		this.node.appendChild(button);
-	};
-
-	/*************************************************************************/
-	//					Updates properties of UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updateColor = function updateColor(e) {
-		var x = e.pageX - this.picking_area.offsetLeft;
-		var y = e.pageY - this.picking_area.offsetTop;
-		var picker_offset = 5;
-
-		// width and height should be the same
-		var size = this.picking_area.clientWidth;
-
-		if (x > size) x = size;
-		if (y > size) y = size;
-		if (x < 0) x = 0;
-		if (y < 0) y = 0;
-
-		var value = 100 - (y * 100 / size) | 0;
-		var saturation = x * 100 / size | 0;
-
-		if (this.picker_mode === 'HSV')
-			this.color.setHSV(this.color.hue, saturation, value);
-		if (this.picker_mode === 'HSL')
-			this.color.setHSL(this.color.hue, saturation, value);
-
-		this.color_picker.style.left = x - picker_offset + 'px';
-		this.color_picker.style.top = y - picker_offset + 'px';
-
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('value', value);
-		this.notify('lightness', value);
-		this.notify('saturation', saturation);
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-		var x = e.pageX - this.hue_area.offsetLeft;
-		var width = this.hue_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		// TODO 360 => 359
-		var hue = ((359 * x) / width) | 0;
-		// if (hue === 360) hue = 359;
-
-		this.updateSliderPosition(this.hue_picker, x);
-		this.setHue(hue);
-	};
-
-	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-		var x = e.pageX - this.alpha_area.offsetLeft;
-		var width = this.alpha_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		this.color.a = (x / width).toFixed(2);
-
-		this.updateSliderPosition(this.alpha_picker, x);
-		this.updatePreviewColor();
-
-		this.notify('alpha', this.color.a);
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setHue = function setHue(value) {
-		this.color.setHue(value);
-
-		this.updatePickerBackground();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-		this.notify('hue', this.color.hue);
-
-		notify(this.topic, this.color);
-	};
-
-	// Updates when one of Saturation/Value/Lightness changes
-	ColorPicker.prototype.updateSLV = function updateSLV() {
-		this.updatePickerPosition();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	/*************************************************************************/
-	//				Update positions of various UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-		var size = this.picking_area.clientWidth;
-		var value = 0;
-		var offset = 5;
-
-		if (this.picker_mode === 'HSV')
-			value = this.color.value;
-		if (this.picker_mode === 'HSL')
-			value = this.color.lightness;
-
-		var x = (this.color.saturation * size / 100) | 0;
-		var y = size - (value * size / 100) | 0;
-
-		this.color_picker.style.left = x - offset + 'px';
-		this.color_picker.style.top = y - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-		elem.style.left = Math.max(pos - 3, -2) + 'px';
-	};
-
-	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-		var size = this.hue_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.hue * size / 360 ) | 0;
-		this.hue_picker.style.left = pos - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-		var size = this.alpha_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.a * size) | 0;
-		this.alpha_picker.style.left = pos - offset + 'px';
-	};
-
-	/*************************************************************************/
-	//						Update background colors
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-		var nc = new Color(this.color);
-		nc.setHSV(nc.hue, 100, 100);
-		this.picking_area.style.backgroundColor = nc.getHexa();
-	};
-
-	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-		this.alpha_mask.style.backgroundColor = this.color.getHexa();
-	};
-
-	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-		this.preview_color.style.backgroundColor = this.color.getColor();
-	};
-
-	/*************************************************************************/
-	//						Update input elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-		var value = parseInt(e.target.value);
-		this.setHue(value);
-		this.updateHuePicker();
-	};
-
-	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-		var value = parseInt(e.target.value);
-		this.color.setSaturation(value);
-		e.target.value = this.color.saturation;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setValue(value);
-		e.target.value = this.color.value;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-		var value = parseInt(e.target.value);
-		this.color.setLightness(value);
-		e.target.value = this.color.lightness;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('r', value);
-		e.target.value = this.color.r;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('g', value);
-		e.target.value = this.color.g;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('b', value);
-		e.target.value = this.color.b;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-		var value = parseFloat(e.target.value);
-
-		if (typeof value === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 1)
-			this.color.a = value.toFixed(2);
-
-		e.target.value = this.color.a;
-		this.updateAlphaPicker();
-	};
-
-	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-		var value = e.target.value;
-		this.color.setHexa(value);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//							Internal Pub/Sub
-	/*************************************************************************/
-
-	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-		this.subscribers[topic] = callback;
-	};
-
-	ColorPicker.prototype.notify = function notify(topic, value) {
-		if (this.subscribers[topic])
-			this.subscribers[topic](value);
-	};
-
-	/*************************************************************************/
-	//							Set Picker Properties
-	/*************************************************************************/
-
-	ColorPicker.prototype.setColor = function setColor(color) {
-		if(color instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		if (color.format !== this.picker_mode) {
-			color.setFormat(this.picker_mode);
-			color.updateHSX();
-		}
-
-		this.color.copy(color);
-		this.updateHuePicker();
-		this.updatePickerPosition();
-		this.updatePickerBackground();
-		this.updateAlphaPicker();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-
-		this.notify('hue', this.color.hue);
-		this.notify('saturation', this.color.saturation);
-		this.notify('value', this.color.value);
-		this.notify('lightness', this.color.lightness);
-
-		this.notify('alpha', this.color.a);
-		this.notify('hexa', this.color.getHexa());
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-		if (mode !== 'HSV' && mode !== 'HSL')
-			return;
-
-		this.picker_mode = mode;
-		this.node.setAttribute('data-mode', this.picker_mode);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//								UNUSED
-	/*************************************************************************/
-
-	var setPickerMode = function setPickerMode(topic, mode) {
-		if (pickers[topic])
-			pickers[topic].setPickerMode(mode);
-	};
-
-	var setColor = function setColor(topic, color) {
-		if (pickers[topic])
-			pickers[topic].setColor(color);
-	};
-
-	var getColor = function getColor(topic) {
-		if (pickers[topic])
-			return new Color(pickers[topic].color);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(callback) {
-		subscribers.indexOf(callback);
-		subscribers.splice(index, 1);
-	};
-
-	var notify = function notify(topic, value) {
-		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-			return;
-
-		var color = new Color(value);
-		for (var i in subscribers[topic])
-			subscribers[topic][i](color);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-color-picker');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new ColorPicker(elem[i]);
-	};
-
-	return {
-		init : init,
-		Color : Color,
-		RGBColor : RGBColor,
-		RGBAColor : RGBAColor,
-		HSVColor : HSVColor,
-		HSVAColor : HSVAColor,
-		HSLColor : HSLColor,
-		HSLAColor : HSLAColor,
-		setColor : setColor,
-		getColor : getColor,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPickerMode : setPickerMode
-	};
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
-	ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
-	/*========== Get DOM Element By ID ==========*/
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	function allowDropEvent(e) {
-		e.preventDefault();
-	}
-
-	/*========== Make an element resizable relative to it's parent ==========*/
-
-	var UIComponent = (function UIComponent() {
-
-		function makeResizable(elem, axis) {
-			var valueX = 0;
-			var valueY = 0;
-			var action = 0;
-
-			var resizeStart = function resizeStart(e) {
-				e.stopPropagation();
-				e.preventDefault();
-				if (e.button !== 0)
-					return;
-
-				valueX = e.clientX - elem.clientWidth;
-				valueY = e.clientY - elem.clientHeight;
-
-				document.body.setAttribute('data-resize', axis);
-				document.addEventListener('mousemove', mouseMove);
-				document.addEventListener('mouseup', resizeEnd);
-			};
-
-			var mouseMove = function mouseMove(e) {
-				if (action >= 0)
-					elem.style.width = e.clientX - valueX + 'px';
-				if (action <= 0)
-					elem.style.height = e.clientY - valueY + 'px';
-			};
-
-			var resizeEnd = function resizeEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.body.removeAttribute('data-resize', axis);
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('mouseup', resizeEnd);
-			};
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			if (axis === 'width') action = 1;
-			else if (axis === 'height') action = -1;
-			else axis = 'both';
-
-			handle.className = 'resize-handle';
-			handle.setAttribute('data-resize', axis);
-			handle.addEventListener('mousedown', resizeStart);
-			elem.appendChild(handle);
-		};
-
-		/*========== Make an element draggable relative to it's parent ==========*/
-
-		var makeDraggable = function makeDraggable(elem, endFunction) {
-
-			var offsetTop;
-			var offsetLeft;
-
-			elem.setAttribute('data-draggable', 'true');
-
-			var dragStart = function dragStart(e) {
-				e.preventDefault();
-				e.stopPropagation();
-
-				if (e.target.getAttribute('data-draggable') !== 'true' ||
-					e.target !== elem || e.button !== 0)
-					return;
-
-				offsetLeft = e.clientX - elem.offsetLeft;
-				offsetTop = e.clientY - elem.offsetTop;
-
-				document.addEventListener('mousemove', mouseDrag);
-				document.addEventListener('mouseup', dragEnd);
-			};
-
-			var dragEnd = function dragEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.removeEventListener('mousemove', mouseDrag);
-				document.removeEventListener('mouseup', dragEnd);
-			};
-
-			var mouseDrag = function mouseDrag(e) {
-				elem.style.left = e.clientX - offsetLeft + 'px';
-				elem.style.top = e.clientY - offsetTop + 'px';
-			};
-
-			elem.addEventListener('mousedown', dragStart, false);
-		};
-
-		return {
-			makeResizable : makeResizable,
-			makeDraggable : makeDraggable
-		};
-
-	})();
-
-	/*========== Color Class ==========*/
-
-	var Color = UIColorPicker.Color;
-	var HSLColor = UIColorPicker.HSLColor;
-
-	/**
-	 * ColorPalette
-	 */
-	var ColorPalette = (function ColorPalette() {
-
-		var samples = [];
-		var color_palette;
-		var complementary;
-
-		var hideNode = function(node) {
-			node.setAttribute('data-hidden', 'true');
-		};
-
-		var ColorSample = function ColorSample(id) {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = new Color();
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('click', this.pickColor.bind(this));
-
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-			this.color.copy(color);
-			var hue = (steps * degree + this.color.hue) % 360;
-			if (hue < 0) hue += 360;
-			this.color.setHue(hue);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-			var saturation = color.saturation + value * steps;
-			if (saturation <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setSaturation(saturation);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-			var lightness = color.lightness + value * steps;
-			if (lightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setLightness(lightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-			var brightness = color.value + value * steps;
-			if (brightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setValue(brightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-			var alpha = parseFloat(color.a) + value * steps;
-			if (alpha <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.a = parseFloat(alpha.toFixed(2));
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.pickColor = function pickColor() {
-			UIColorPicker.setColor('picker', this.color);
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'palette-samples');
-		};
-
-		var Palette = function Palette(text, size) {
-			this.samples = [];
-			this.locked = false;
-
-			var palette = document.createElement('div');
-			var title = document.createElement('div');
-			var controls = document.createElement('div');
-			var container = document.createElement('div');
-			var lock = document.createElement('div');
-
-			container.className = 'container';
-			title.className = 'title';
-			palette.className = 'palette';
-			controls.className = 'controls';
-			lock.className = 'lock';
-			title.textContent = text;
-
-			controls.appendChild(lock);
-			container.appendChild(title);
-			container.appendChild(controls);
-			container.appendChild(palette);
-
-			lock.addEventListener('click', function () {
-				this.locked = !this.locked;
-				lock.setAttribute('locked-state', this.locked);
-			}.bind(this));
-
-			for(var i = 0; i < size; i++) {
-				var sample = new ColorSample();
-				this.samples.push(sample);
-				palette.appendChild(sample.node);
-			}
-
-			this.container = container;
-			this.title = title;
-		};
-
-		var createHuePalette = function createHuePalette() {
-			var palette = new Palette('Hue', 12);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 12; i++) {
-					palette.samples[i].updateHue(color, 30, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var createSaturationPalette = function createSaturationPalette() {
-			var palette = new Palette('Saturation', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 11; i++) {
-					palette.samples[i].updateSaturation(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		/* Brightness or Lightness - depends on the picker mode */
-		var createVLPalette = function createSaturationPalette() {
-			var palette = new Palette('Lightness', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				if(color.format === 'HSL') {
-					palette.title.textContent = 'Lightness';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateLightness(color, -10, i);
-				}
-				else {
-					palette.title.textContent = 'Value';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateBrightness(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var isBlankPalette = function isBlankPalette(container, value) {
-			if (value === 0) {
-				container.setAttribute('data-collapsed', 'true');
-				return true;
-			}
-
-			container.removeAttribute('data-collapsed');
-			return false;
-		};
-
-		var createAlphaPalette = function createAlphaPalette() {
-			var palette = new Palette('Alpha', 10);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 10; i++) {
-					palette.samples[i].updateAlpha(color, -0.1, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var init = function init() {
-			color_palette = getElemById('color-palette');
-
-			createHuePalette();
-			createSaturationPalette();
-			createVLPalette();
-			createAlphaPalette();
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor
-		};
-
-	})();
-
-	/**
-	 * ColorInfo
-	 */
-	var ColorInfo = (function ColorInfo() {
-
-		var info_box;
-		var select;
-		var RGBA;
-		var HEXA;
-		var HSLA;
-
-		var updateInfo = function updateInfo(color) {
-			if (color.a | 0 === 1) {
-				RGBA.info.textContent = 'RGB';
-				HSLA.info.textContent = 'HSL';
-			}
-			else {
-				RGBA.info.textContent = 'RGBA';
-				HSLA.info.textContent = 'HSLA';
-			}
-
-			RGBA.value.value = color.getRGBA();
-			HSLA.value.value = color.getHSLA();
-			HEXA.value.value = color.getHexa();
-		};
-
-		var InfoProperty = function InfoProperty(info) {
-
-			var node = document.createElement('div');
-			var title = document.createElement('div');
-			var value = document.createElement('input');
-			var copy = document.createElement('div');
-
-			node.className = 'property';
-			title.className = 'type';
-			value.className = 'value';
-			copy.className = 'copy';
-
-			title.textContent = info;
-			value.setAttribute('type', 'text');
-
-			copy.addEventListener('click', function() {
-				value.select();
-			});
-
-			node.appendChild(title);
-			node.appendChild(value);
-			node.appendChild(copy);
-
-			this.node = node;
-			this.value = value;
-			this.info = title;
-
-			info_box.appendChild(node);
-		};
-
-		var init = function init() {
-
-			info_box = getElemById('color-info');
-
-			RGBA = new InfoProperty('RGBA');
-			HSLA = new InfoProperty('HSLA');
-			HEXA = new InfoProperty('HEXA');
-
-			UIColorPicker.subscribe('picker', updateInfo);
-
-		};
-
-		return {
-			init: init
-		};
-
-	})();
-
-	/**
-	 * ColorPicker Samples
-	 */
-	var ColorPickerSamples = (function ColorPickerSamples() {
-
-		var samples = [];
-		var nr_samples = 0;
-		var active = null;
-		var container = null;
-		var	samples_per_line = 10;
-		var trash_can = null;
-		var base_color = new HSLColor(0, 50, 100);
-		var add_btn;
-		var add_btn_pos;
-
-		var ColorSample = function ColorSample() {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.index = nr_samples++;
-			this.node = node;
-			this.color = new Color(base_color);
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('dragover' , allowDropEvent);
-			node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-			this.updatePosition(this.index);
-			this.updateBgColor();
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updatePosition = function updatePosition(index) {
-			this.index = index;
-			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-			this.node.style.top  = this.posY + 'px';
-			this.node.style.left = this.posX + 'px';
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.activate = function activate() {
-			UIColorPicker.setColor('picker', this.color);
-			this.node.setAttribute('data-active', 'true');
-		};
-
-		ColorSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'picker-samples');
-		};
-
-		ColorSample.prototype.dragDrop = function dragDrop(e) {
-			e.stopPropagation();
-			this.color = Tool.getSampleColorFrom(e);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.deleteSample = function deleteSample() {
-			container.removeChild(this.node);
-			samples[this.uid] = null;
-			nr_samples--;
-		};
-
-		var updateUI = function updateUI() {
-			updateContainerProp();
-
-			var index = 0;
-			var nr = samples.length;
-			for (var i=0; i < nr; i++)
-				if (samples[i] !== null) {
-					samples[i].updatePosition(index);
-					index++;
-				}
-
-			AddSampleButton.updatePosition(index);
-		};
-
-		var deleteSample = function deleteSample(e) {
-			trash_can.parentElement.setAttribute('drag-state', 'none');
-
-			var location = e.dataTransfer.getData('location');
-			if (location !== 'picker-samples')
-				return;
-
-			var sampleID = e.dataTransfer.getData('sampleID');
-			samples[sampleID].deleteSample();
-			console.log(samples);
-
-			updateUI();
-		};
-
-		var createDropSample = function createDropSample() {
-			var sample = document.createElement('div');
-			sample.id = 'drop-effect-sample';
-			sample.className = 'sample';
-			container.appendChild(sample);
-		};
-
-		var setActivateSample = function setActivateSample(e) {
-			if (e.target.className !== 'sample')
-				return;
-
-			unsetActiveSample(active);
-			Tool.unsetVoidSample();
-			CanvasSamples.unsetActiveSample();
-			active = samples[e.target.getAttribute('sample-id')];
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var updateContainerProp = function updateContainerProp() {
-			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-			container.style.height = height + 10 + 'px';
-		};
-
-		var AddSampleButton = (function AddSampleButton() {
-			var node;
-			var _index = 0;
-			var _posX;
-			var _posY;
-
-			var updatePosition = function updatePosition(index) {
-				_index = index;
-				_posY = 5 + ((index / samples_per_line) | 0) * 52;
-				_posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-				node.style.top  = _posY + 'px';
-				node.style.left = _posX + 'px';
-			};
-
-			var addButtonClick = function addButtonClick() {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-				updatePosition(_index + 1);
-				updateUI();
-			};
-
-			var init = function init() {
-				node = document.createElement('div');
-				var icon = document.createElement('div');
-
-				node.className = 'sample';
-				icon.id = 'add-icon';
-				node.appendChild(icon);
-				node.addEventListener('click', addButtonClick);
-
-				updatePosition(0);
-				container.appendChild(node);
-			};
-
-			return {
-				init : init,
-				updatePosition : updatePosition
-			};
-		})();
-
-		var init = function init() {
-			container = getElemById('picker-samples');
-			trash_can = getElemById('trash-can');
-
-			AddSampleButton.init();
-
-			for (var i=0; i<16; i++) {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-			}
-
-			AddSampleButton.updatePosition(samples.length);
-			updateUI();
-
-			active = samples[0];
-			active.activate();
-
-			container.addEventListener('click', setActivateSample);
-
-			trash_can.addEventListener('dragover', allowDropEvent);
-			trash_can.addEventListener('dragenter', function() {
-				this.parentElement.setAttribute('drag-state', 'enter');
-			});
-			trash_can.addEventListener('dragleave', function(e) {
-				this.parentElement.setAttribute('drag-state', 'none');
-			});
-			trash_can.addEventListener('drop', deleteSample);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)
-					active.updateColor(color);
-			});
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	/**
-	 * Canvas Samples
-	 */
-	var CanvasSamples = (function CanvasSamples() {
-
-		var active = null;
-		var canvas = null;
-		var samples = [];
-		var zindex = null;
-		var tutorial = true;
-
-		var CanvasSample = function CanvasSample(color, posX, posY) {
-
-			var node = document.createElement('div');
-			var pick = document.createElement('div');
-			var delete_btn = document.createElement('div');
-			node.className = 'sample';
-			pick.className = 'pick';
-			delete_btn.className = 'delete';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = color;
-			this.updateBgColor();
-			this.zIndex = 1;
-
-			node.style.top = posY - 50 + 'px';
-			node.style.left = posX - 50 + 'px';
-			node.setAttribute('sample-id', this.uid);
-
-			node.appendChild(pick);
-			node.appendChild(delete_btn);
-
-			var activate = function activate() {
-				setActiveSample(this);
-			}.bind(this);
-
-			node.addEventListener('dblclick', activate);
-			pick.addEventListener('click', activate);
-			delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-			UIComponent.makeDraggable(node);
-			UIComponent.makeResizable(node);
-
-			samples.push(this);
-			canvas.appendChild(node);
-			return this;
-		};
-
-		CanvasSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		CanvasSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-			this.zIndex = value;
-			this.node.style.zIndex = value;
-		};
-
-		CanvasSample.prototype.activate = function activate() {
-			this.node.setAttribute('data-active', 'true');
-			zindex.setAttribute('data-active', 'true');
-
-			UIColorPicker.setColor('picker', this.color);
-			InputSliderManager.setValue('z-index', this.zIndex);
-		};
-
-		CanvasSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-			zindex.removeAttribute('data-active');
-		};
-
-		CanvasSample.prototype.deleteSample = function deleteSample() {
-			if (active === this)
-				unsetActiveSample();
-			canvas.removeChild(this.node);
-			samples[this.uid] = null;
-		};
-
-		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-			this.node.style.top = posY - this.startY + 'px';
-			this.node.style.left = posX - this.startX + 'px';
-		};
-
-		var canvasDropEvent = function canvasDropEvent(e) {
-			var color = Tool.getSampleColorFrom(e);
-
-			if (color) {
-				var offsetX = e.pageX - canvas.offsetLeft;
-				var offsetY = e.pageY - canvas.offsetTop;
-				var sample = new CanvasSample(color, offsetX, offsetY);
-				if (tutorial) {
-					tutorial = false;
-					canvas.removeAttribute('data-tutorial');
-					var info = new CanvasSample(new Color(), 100, 100);
-					info.node.setAttribute('data-tutorial', 'dblclick');
-				}
-			}
-
-		};
-
-		var setActiveSample = function setActiveSample(sample) {
-			ColorPickerSamples.unsetActiveSample();
-			Tool.unsetVoidSample();
-			unsetActiveSample();
-			active = sample;
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var createToggleBgButton = function createToggleBgButton() {
-			var button = document.createElement('div');
-			var state = false;
-			button.className = 'toggle-bg';
-			canvas.appendChild(button);
-
-			button.addEventListener('click', function() {
-				console.log(state);
-				state = !state;
-				canvas.setAttribute('data-bg', state);
-			});
-		};
-
-		var init = function init() {
-			canvas = getElemById('canvas');
-			zindex = getElemById('zindex');
-
-			canvas.addEventListener('dragover', allowDropEvent);
-			canvas.addEventListener('drop', canvasDropEvent);
-
-			createToggleBgButton();
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)	active.updateColor(color);
-			});
-
-			InputSliderManager.subscribe('z-index', function (value) {
-				if (active)	active.updateZIndex(value);
-			});
-
-			UIComponent.makeResizable(canvas, 'height');
-		};
-
-		return {
-			init : init,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	var StateButton = function StateButton(node, state) {
-		this.state = false;
-		this.callback = null;
-
-		node.addEventListener('click', function() {
-			this.state = !this.state;
-			if (typeof this.callback === "function")
-				this.callback(this.state);
-		}.bind(this));
-	};
-
-	StateButton.prototype.set = function set() {
-		this.state = true;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.unset = function unset() {
-		this.state = false;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.subscribe = function subscribe(func) {
-		this.callback = func;
-	};
-
-
-	/**
-	 * Tool
-	 */
-	var Tool = (function Tool() {
-
-		var samples = [];
-		var controls = null;
-		var void_sw;
-
-		var createPickerModeSwitch = function createPickerModeSwitch() {
-			var parent = getElemById('controls');
-			var icon = document.createElement('div');
-			var button = document.createElement('div');
-			var hsv = document.createElement('div');
-			var hsl = document.createElement('div');
-			var active = null;
-
-			icon.className = 'icon picker-icon';
-			button.className = 'switch';
-			button.appendChild(hsv);
-			button.appendChild(hsl);
-
-			hsv.textContent = 'HSV';
-			hsl.textContent = 'HSL';
-
-			active = hsl;
-			active.setAttribute('data-active', 'true');
-
-			function switchPickingModeTo(elem) {
-				active.removeAttribute('data-active');
-				active = elem;
-				active.setAttribute('data-active', 'true');
-				UIColorPicker.setPickerMode('picker', active.textContent);
-			};
-
-			var picker_sw = new StateButton(icon);
-			picker_sw.subscribe(function() {
-				if (active === hsv)
-					switchPickingModeTo(hsl);
-				else
-					switchPickingModeTo(hsv);
-			});
-
-			hsv.addEventListener('click', function() {
-				switchPickingModeTo(hsv);
-			});
-			hsl.addEventListener('click', function() {
-				switchPickingModeTo(hsl);
-			});
-
-			parent.appendChild(icon);
-			parent.appendChild(button);
-		};
-
-		var setPickerDragAndDrop = function setPickerDragAndDrop() {
-			var preview = document.querySelector('#picker .preview-color');
-			var picking_area = document.querySelector('#picker .picking-area');
-
-			preview.setAttribute('draggable', 'true');
-			preview.addEventListener('drop', drop);
-			preview.addEventListener('dragstart', dragStart);
-			preview.addEventListener('dragover', allowDropEvent);
-
-			picking_area.addEventListener('drop', drop);
-			picking_area.addEventListener('dragover', allowDropEvent);
-
-			function drop(e) {
-				var color = getSampleColorFrom(e);
-				UIColorPicker.setColor('picker', color);
-			};
-
-			function dragStart(e) {
-				e.dataTransfer.setData('sampleID', 'picker');
-				e.dataTransfer.setData('location', 'picker');
-			};
-		};
-
-		var getSampleColorFrom = function getSampleColorFrom(e) {
-			var sampleID = e.dataTransfer.getData('sampleID');
-			var location = e.dataTransfer.getData('location');
-
-			if (location === 'picker')
-				return UIColorPicker.getColor(sampleID);
-			if (location === 'picker-samples')
-				return ColorPickerSamples.getSampleColor(sampleID);
-			if (location === 'palette-samples')
-				return ColorPalette.getSampleColor(sampleID);
-		};
-
-		var setVoidSwitch = function setVoidSwitch() {
-			var void_sample = getElemById('void-sample');
-			void_sw = new StateButton(void_sample);
-			void_sw.subscribe( function (state) {
-				void_sample.setAttribute('data-active', state);
-				if (state === true) {
-					ColorPickerSamples.unsetActiveSample();
-					CanvasSamples.unsetActiveSample();
-				}
-			});
-		};
-
-		var unsetVoidSample = function unsetVoidSample() {
-			void_sw.unset();
-		};
-
-		var init = function init() {
-			controls = getElemById('controls');
-
-			var color = new Color();
-			color.setHSL(0, 51, 51);
-			UIColorPicker.setColor('picker', color);
-
-			setPickerDragAndDrop();
-			createPickerModeSwitch();
-			setVoidSwitch();
-		};
-
-		return {
-			init : init,
-			unsetVoidSample : unsetVoidSample,
-			getSampleColorFrom : getSampleColorFrom
-		};
-
-	})();
-
-	var init = function init() {
-		UIColorPicker.init();
-		InputSliderManager.init();
-		ColorInfo.init();
-		ColorPalette.init();
-		ColorPickerSamples.init();
-		CanvasSamples.init();
-		Tool.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- -

{{CSSRef}}

- -

To narzędzie ułatwia tworzenie, wybieranie i eksperymentowanie z niestandadrowymi kolorami w sieci. Umożliwia także konwersję pomiędzy różnymi formatami kolorów obsługiwanymi przez CSS, w tym: kolory HEXA, RGB (Red/Green/Blue) i HSL (Hue/Saturation/Lightness). Możliwa jest też kontrola kanału alpha w formatach RGB (rgba) i HSL.

- -

Każdy wybrany kolor prezentowany jest we wszystkich trzech standardowych formatach CSS . Dodatkowo, bazując na obecnie wybranym kolorze, tworzona jest paleta HSL, HSV oraz alpha. Okno wyboru koloru "zakraplacz" można przełączać pomiędzy formatami HSL i HSV. Przeciągając kolory do pojemnika na dole i poruszając nimi nad sobą możesz przetestować jak wyglądają obok siebie. Zmieniaj względną wartość z-index aby przesunąc kolor na wierzch lub schować za innym.

- -

To narzędzie pozwoli ci odnależć idealne kolory CSS do wykorzystania w twoim HTML.

- -
{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}
- -

Wygenerowane kolory można użyć wszędzie gdzie potrzeba w obrębie CSS i HTML, chyba że stwierdzono inaczej.

- -

Zobacz też

- -

Więcej o używaniu kolrów, sprawdź:

- - diff --git a/files/pl/web/css/css_columns/using_multi-column_layouts/index.html b/files/pl/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..19d3c4285a --- /dev/null +++ b/files/pl/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,65 @@ +--- +title: Kolumny CSS3 +slug: Web/Guide/CSS/Kolumny_CSS3 +tags: + - CSS + - CSS_3 + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +

+

+

Wprowadzenie

+

Czytanie tekstu wyświetlanego w długich wierszach jest trudne i męczące dla oczu - jeśli przenoszenie wzroku z końca jednej linii na początek drugiej zajmuje zbyt wiele czasu, łatwo jest zgubić się w tekście i rozpocząć czytanie niewłaściwego wiersza. Z tego powodu i aby w pełni wykorzystać szerokość ekranu, tekst na stronach internetowych - tak samo jak w gazetach - powinien być układany w sąsiadujących kolumnach o stałej szerokości. Niestety osiągnięcie tego efektu nie jest możliwe przy użyciu języków HTML i obecnego CSS bez wymuszania sztywnej wysokości kolumn, znacznego ograniczania dozwolonej składni wewnątrz tekstu bądź też bez stosowania skomplikowanych skryptów. +

Szkic specyfikacji CSS3 proponuje kilka nowych własności CSS, które rozwiązałyby ten problem. W Firefoksie 1.5 i następnych zaimplementowana została część tych własności i zachowują się one w sposób opisany przez szkic specyfikacji (z jednym wyjątkiem opisanym niżej).

Aby zobaczyć, jak działają kolumny CSS, odwiedź (korzystając z Firefoksa 1.5) blog Roberta O'Callahana. +

+

Stosowanie kolumn

+

Liczba i szerokość kolumn

+

Własności CSS pozwalają okreslić liczbę i szerokość kolumn, w jakich zostanie wyświetlony tekst na stronie: -moz-column-count oraz -moz-column-width. +

-moz-column-count pozwala ustalić liczbę kolumn. Na przykład: +

+
<div style="-moz-column-count:2">Z powodu trwających przygotowań do wydania Mozilli
+Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00).
+Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1,
+którego wydanie zaplanowane jest na czwartek.</div>
+
+

Powyższy tekst powinien zostać w Firefoksie 1.5 wyświetlony w dwu kolumnach: +

+
Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.
+

-moz-column-width pozwala natomiast określić minimalną pożądaną szerokość kolumn. Jeśli przy okazji własność -moz-column-count nie jest ustalona, przeglądarka automatycznie wyświetli tyle kolumn, ile zmieści się w jej oknie. Na przykład tekst: +

+
<div style="-moz-column-width:20em;">Z powodu trwających przygotowań do wydania Mozilli
+Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00).
+Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1,
+którego wydanie zaplanowane jest na czwartek.</div>
+
+

przeglądarka wyświetli następująco: +

+
Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.
+

Szczegóły dotyczące kolumn CSS opisano w szkicu specyfikacji CSS3. +

W przypadku wyświetlania wielokolumnowego, treść automatycznie przepływa do następnych kolumn, jeśli zachodzi taka potrzeba. Cała funkcjonalność HTML, CSS oraz DOM jest zachowana, podobnie jak możliwość edycji i drukowania. +


+

+

Wyrówywanie wysokości kolumn

+

Szkic specyfikacji CSS3 zakłada, że wysokości kolumn powinny być wyrównywane przez przeglądarkę w taki sposób, by wysokości treści w każdej kolumnie były możliwie najbardziej zbliżone. I to właśnie robi Firefox. +

Czasami jednak pojawia się potrzeba jednoznacznego zdefiniowania wysokości kolumn. W takim przypadku treść - w zależności od długości - wyświetlana powinna być w różnej, nieznanej projektantowi liczbie kolumn. Efekt ten zastosowano na stronach International Herald Tribune, gdzie jednak użyto w tym celu odpowiednich skryptów. Firefox rozszerza szkic specyfikacji CSS w taki sposób, że nadanie blokowi kolumn własności height powoduje wydłużanie się kolumn do określonej wysokości, a po osiągnięciu tejże - utworzeniu nowej kolumny. Zachowanie to jest bardzo przydatne przy tworzeniu układów stron WWW. +

+

Odstęp między kolumnami

+

Domyślnie, przeglądarka wyświetla kolumny jedna tuż obok drugiej, przylegające do siebie. Zazwyczaj jednak nie jest to zachowanie pożądane. Aby poprawić tę sytuację, można za pomocą CSS ustawić dla kolumn odpowiednie wartości marginesów wewnętrznych, często jednak o wiele łatwiej zastosować jest własność -moz-column-gap ustawianą dla bloku kolumn: +

+
<div style="-moz-column-width:20em; -moz-column-gap:2em;">Z powodu trwających
+przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś
+w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą
+przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.</div>
+
+
Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.
+

Czytelność w starszych przeglądarkach

+

Starsze przeglądarki ignorują własności -moz-column, dzięki czemu stosunkowo łatwo jest utworzyć stronę, której treść będzie wyświetlana w pojedynczej kolumnie w starszych przeglądarkach, a w wielu kolumnach w Firefoksie 1.5. +

+

Zakończenie

+

Kolumny w CSS3 to nowe narzędzie, które pomoże projektantom stron internetowych w najlepszy możliwy sposób wykorzystywać cenną powierzchnię ekranów uzytkowników. Dzięki takim opcjom jak automatycze wyrównywanie wysokości, kolumny na pewno znajdą wiele zastosowań w tworzeniu stron internetowych. +

+

Dodatkowe zasoby

+ +{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns" } ) }} diff --git a/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html b/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html deleted file mode 100644 index 93ac130fce..0000000000 --- a/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html +++ /dev/null @@ -1,594 +0,0 @@ ---- -title: Projektowanie typowych układów za pomocą układu siatki CSS -slug: >- - Web/CSS/CSS_Grid_Layout/Realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_CSS -translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout ---- -

Na zakończenie tego zestawu poradników do Układów Siatki CSS (ang. CSS Grid Layout), przejdę przez kilka różnych układów, demonstrujących niektóre z  technik, których można użyć podczas projektowania z użyciem tej technologii. Przyjrzymy się przykładowi, korzystającemu z wartości grid-template-areas, typowemu 12-kolumnowemu systemowi elastycznej siatki, a także wykazowi produktów stworzonemu za pomocą automatycznego rozmieszczania. Jak wynika z wyżej przedstawionych przykładów, często istnieje więcej niż jeden sposób, aby osiągnąć pożądany efekt z układem siatki. Wybierz  tę metodę, która jest najbardziej pomocna w rozwiązaniu problemów przed którymi stoisz i  dla projektów, które realizujesz.

- -

Responsywny układ strony korzystający z 1 do 3 kolumn o zmiennej pozycji elementów przy użyciu grid-template-areas

- -

Znacząca część stron internetowych jest odmianą tego typu układu; zawierającego treść, panele boczne, nagłówek oraz stopkę. Podczas projektowania responsywnej witryny, możesz zechcieć wyświetlić stronę w układzie pojedynczej kolumny dla małych ekranów, dla  wyświetlacza o wartości granicznej dodać panel boczny, a dla najszerszych ekranów wprowadzić układ w trzech kolumnach.

- -

Image of the three different layouts created by redefining our grid at two breakpoints.

- -

Zamierzam stworzyć taki układ korzystając z  nazwanych pól szablonu, o których możecie dowiedzieć się więcej z kursu Grid template areas.

- -

Mój szkielet  składa się z pojemnika zawierającego elementy z przeznaczeniem na: nagłówek i stopkę, główną zawartość strony, menu, panel boczny oraz blok przeznaczony na reklamę.

- -
- - -
<div class="wrapper">
-        <header class="main-head">The header</header>
-        <nav class="main-nav">
-            <ul>
-                <li><a href="">Nav 1</a></li>
-                <li><a href="">Nav 2</a></li>
-                <li><a href="">Nav 3</a></li>
-            </ul>
-        </nav>
-        <article class="content">
-            <h1>Main article area</h1>
-            <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
-        </article>
-        <aside class="side">Sidebar</aside>
-        <div class="ad">Advertising</div>
-        <footer class="main-footer">The footer</footer>
-</div>
-
- -

Używamy cechy {{cssxref("grid-template-areas")}} by stworzyć układ strony. Nie korzystamy jeszcze z zapytań o środki dostępu (ang. media-queries). Musimy teraz nadać odpowiednie nazwy polom. Żeby to zrobić skorzystamy z właściwości {{cssxref("grid-area")}}.

- -
.main-head {
-  grid-area: header;
-}
-.content {
-  grid-area: content;
-}
-.main-nav {
-  grid-area: nav;
-}
-.side {
-  grid-area: sidebar;
-}
-.ad {
-  grid-area: ad;
-}
-.main-footer {
-  grid-area: footer;
-}
-
- -

Sama w sobie, operacja ta nie tworzy żadnego układu, aczkolwiek pozwala nam na to, dzięki nadanym nazwom.   Nadal nie korzystając z zapytań o urządzenie dostępu, nadam teraz stronie układ tworzony z myślą o wyświetlaczach mobilnych. W tym wypadku zachowam pierwotną kolejność elementów, taką jak w układzie szkieletu, starając się uniknąć najmniejszego rozdźwięku pomiędzy szablonem znaczników, a ukladem siatki, zgodnie z poradami zawartymi w Grid layout and accessibility. Nie definuję kolumn, ani rzędów, jednak taka stylizacja tworzy nam układ jednokolumnowy, co się zaś tyczy rzędów, zostaną stworzone samoistnie dla każdego elementu wskazanej siatki.

- -
.wrapper {
-  display: grid;
-  grid-gap: 20px;
-  grid-template-areas:
-    "header"
-    "nav"
-    "content"
-    "sidebar"
-    "ad"
-    "footer";
-}
-
- -

Zdefiniowany mobilny układ strony (jedna kolumna) będzie się teraz wyświetlał jednakowo na każdym urządzeniu, nieleżnie od jego rozmiarów. Żeby to zmienić możemy posłużyć się zapytaniem o środek dostępu i przedefiniować nasz układ na wypadek, gdyby pojawiło się wystarczająco dużo miejsca na ekranie, żeby zmieścić kolejną kolumnę.

- -
@media (min-width: 500px) {
-  .wrapper {
-    grid-template-columns: 1fr 3fr;
-    grid-template-areas:
-      "header  header"
-      "nav     nav"
-      "sidebar content"
-      "ad      footer";
-  }
-  nav ul {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
- -

Możesz zaobserwować, jak będzie wyglądał nowy układ przyglądając się wartości cechy {{cssxref("grid-template-areas")}}. Element header  (nagłówek) rozciąga się na dwie kolumny, tak, jak i element nav (menu). Wtrzecim rzędzie sąsiaduje element sidebar (panel boczny) oraz element content (zawartość strony). W czwartym rzędzie umieściłem element ad (blok reklamowy) zamiast panelu bocznego, a na samym końcu element footer (stopkę) rozciągnietą na cały piąty rząd. Użyłem elastycznego bloku (flexbox) dla menu, tak by wyświetliło się w oddalonym rzędzie.

- -

Mogę teraz dodać ostatnią wartość graniczną, wyznaczającą przejście do układu w trzech kolumnach.

- -
@media (min-width: 700px) {
-  .wrapper {
-    grid-template-columns: 1fr 4fr 1fr;
-    grid-template-areas:
-      "header header  header"
-      "nav    content sidebar"
-      "nav    content ad"
-      "footer footer  footer"
-   }
-   nav ul {
-     flex-direction: column;
-   }
-}
-
- -

The three-column layout has two 1fr unit side columns and a middle column that has 4fr as the track size. This means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center.

- -

In this layout I am displaying the nav in the left column, alongside the content. In the right column we have the sidebar and underneath it the advertisements (ad). The footer now spans right across the bottom of the layout. I then use a flexbox to display the navigation as a column.

- -

{{ EmbedLiveSample('layout_1', '800', '500') }}

-
- -

This is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. In particular I am changing the location of that ad block, as appropriate in my different column setups. I find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. You could always begin to use grid in this way for prototyping, even if you can’t rely on it fully in production due to the browsers that visit your site.

- -

A flexible 12-column layout

- -

If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, I am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. This means that we will have twelve grid lines named col-start.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-  grid-gap: 20px;
-}
-
- -

To demonstrate how this grid system works I have four child elements inside my wrapper.

- -
<div class="wrapper">
-  <div class="item1">Start column line 1, span 3 column tracks.</div>
-  <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div>
-  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
-  <div class="item4">Start at column line 3, span to the end of the grid (-1).</div>
-</div>
-
- -

I can then place these on the grid using the named lines, and also the span keyword.

- -
.item1 {
-  grid-column: col-start / span 3;
-}
-.item2 {
-  grid-column: col-start 6 / span 4 ;
-  grid-row: 1 / 3;
-}
-.item3 {
-  grid-column: col-start 2 / span 2;
-  grid-row: 2;
-}
-.item4 {
-  grid-column: col-start 3 / -1;
-  grid-row: 3;
-}
-
- -

{{ EmbedLiveSample('layout_2', '800', '400') }}

-
- -

As described in the guide to named lines, we are using the named line to place our item. As we have 12 lines all with the same name we use the name, and then the index of the line. You could also use the line index itself if you prefer and avoid using named lines at all.

- -

Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the span keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the Firefox Grid Inspector. It clearly demonstrates how our items are placed.

- -

Showing the items placed on the grid with grid tracks highlighted.

- -

There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS Grid Layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this strict column and row placement we can also easily leave white space in our layout. We also don’t need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item.

- -

Building a layout using the 12-column system

- -

To see how this layout method works in practice, we can create the same layout that we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. I am starting with the same markup as used for the grid template areas example.

- -
- - -
<div class="wrapper">
-        <header class="main-head">The header</header>
-        <nav class="main-nav">
-            <ul>
-                <li><a href="">Nav 1</a></li>
-                <li><a href="">Nav 2</a></li>
-                <li><a href="">Nav 3</a></li>
-            </ul>
-        </nav>
-        <article class="content"><h1>Main article area</h1>
-        <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p></article>
-        <aside class="side">Sidebar</aside>
-        <div class="ad">Advertising</div>
-        <footer class="main-footer">The footer</footer>
-    </div>
-
- -

I can then set up our grid, as for the example 12-column layout above.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-  grid-gap: 20px;
-}
-
- -

We are once again going to make this a responsive layout, this time however using named lines. Every breakpoint will use a 12-column grid, however the number of tracks that items will span changes depending on the size of the screen.

- -

We start mobile first, and all we want for the narrowest screens is for the items to remain in source order, and all span right across the grid.

- -
.wrapper > * {
-  grid-column: col-start / span 12;
-}
-
- -

At the next breakpoint we want to move to a two-column layout. Our header and navigation still span the full grid, so we do not need to specify any positioning for them. The sidebar is starting on the first column line named col-start, spanning 3 lines. It goes after row line 3, as the header and navigation are in the first two row tracks.

- -

The ad panel is below the sidebar, so starts at grid row line 4. Then we have the content and footer starting at col-start 4 and spanning 9 tracks taking them to the end of the grid.

- -
@media (min-width: 500px) {
-
-  .side {
-    grid-column: col-start / span 3;
-    grid-row: 3;
-  }
-  .ad {
-    grid-column: col-start / span 3;
-    grid-row: 4;
-  }
-  .content, .main-footer {
-    grid-column: col-start 4 / span 9;
-  }
-  nav ul {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
- -

Finally we go to the three-column version of this layout. The header continues to span right across the grid, but now the navigation moves down to become the first sidebar, with the content and then the sidebar next to it. The footer now also spans across the full layout.

- -
@media (min-width: 700px) {
-  .main-nav {
-    grid-column: col-start / span 2;
-    grid-row: 2 / 4;
-  }
-  .content {
-    grid-column: col-start 3 / span 8;
-    grid-row: 2 / 4;
-  }
-  .side {
-    grid-column: col-start 11 / span 2;
-    grid-row: 2;
-  }
-  .ad {
-    grid-column: col-start 11 / span 2;
-    grid-row: 3;
-  }
-  .main-footer {
-    grid-column: col-start / span 12;
-  }
-  nav ul {
-    flex-direction: column;
-  }
-}
-
- -

{{ EmbedLiveSample('layout_3', '800', '450') }}

-
- -

Once again the Grid Inspector is useful to help us see how our layout has taken shape.

- -

Showing the layout with grid tracks highlighted by the grid inspector.

- -

Something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. We have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. We are also able to take advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. In the final example in this guide we will create a layout that entirely relies on auto-placement.

- -

A product listing with auto-placement

- -

Many layouts are essentially sets of “cards” – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add media queries to make it so. In this next example I’m combining CSS Grid and Flexbox Layouts to make a simple product listing layout.

- -

The markup for my listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link.

- -
-
<ul class="listing">
-  <li>
-    <h2>Item One</h2>
-    <div class="body"><p>The content of this listing item goes here.</p></div>
-    <div class="cta"><a href="">Call to action!</a></div>
-  </li>
-   <li>
-     <h2>Item Two</h2>
-     <div class="body"><p>The content of this listing item goes here.</p></div>
-     <div class="cta"><a href="">Call to action!</a></div>
-   </li>
-   <li class="wide">
-     <h2>Item Three</h2>
-     <div class="body"><p>The content of this listing item goes here.</p>
-     <p>This one has more text than the other items.</p>
-     <p>Quite a lot more</p>
-     <p>Perhaps we could do something different with it?</p></div>
-     <div class="cta"><a href="">Call to action!</a></div>
-    </li>
-    <li>
-     <h2>Item Four</h2>
-     <div class="body"><p>The content of this listing item goes here.</p></div>
-     <div class="cta"><a href="">Call to action!</a></div>
-    </li>
-     <li>
-     <h2>Item Five</h2>
-     <div class="body"><p>The content of this listing item goes here.</p></div>
-      <div class="cta"><a href="">Call to action!</a></div>
-    </li>
-</ul>
-
- - - -

We are going to create a grid with a flexible number of flexible columns. I want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. We achieve this with the minmax() function in our repeat notation for track sizing.

- -
.listing {
-  list-style: none;
-  margin: 2em;
-  display: grid;
-  grid-gap: 20px;
-  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
-}
-
- -

As soon as I add this CSS, the items start to lay out as a grid. If I make the window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid.

- -

I can then tidy up the internals of the boxes using a little touch of flexbox. I set the list item to display: flex and the flex-direction to column. I can then use an auto margin on the .cta to push this bar down to the bottom of the box.

- -
.listing li {
-  border: 1px solid #ffe066;
-  border-radius: 5px;
-  display: flex;
-  flex-direction: column;
-}
-.listing .cta {
-  margin-top: auto;
-  border-top: 1px solid #ffe066;
-  padding: 10px;
-  text-align: center;
-}
-.listing .body {
-  padding: 10px;
-}
-
- -

This is really one of the key reasons I would use flexbox rather than grid, if I am just aligning or distributing something in a single dimension, that’s a flexbox use case. 

- -

{{ EmbedLiveSample('layout_4', '800', '900') }}

-
- -

This is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. It might be nice to cause those to span two tracks, and then they won’t be so tall. I have a class of wide on my larger item, and I add a rule {{cssxref("grid-column-end")}} with a value of span 2. Now when grid encounters this item, it will assign it two tracks. At some breakpoints, this means that we'll get a gap in the grid – where there isn’t space to lay out a two-track item.

- -

The layout has gaps as there is not space to layout a two track item.

- -

I can cause a grid to backfill those gaps by setting {{cssxref("grid-auto-flow")}}: dense on the grid container. Take care when doing this however as it does take items away from their logical source order. You should only do this if your items do not have a set order – and be aware of the issues of the tab order following the source and not your reordered display.

- -
- - -
.listing {
-  list-style: none;
-  margin: 2em;
-  display: grid;
-  grid-gap: 20px;
-  grid-auto-flow: dense;
-  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
-}
-.listing .wide {
-  grid-column-end: span 2;
-}
-
- -

{{ EmbedLiveSample('layout_5', '800', '900') }}

- -

This technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.

-
- -

Further exploration

- -

The best way to learn to use grid layout is to continue to build examples like the ones we have covered here. Pick something that you normally build using your framework of choice, or using floats, and see if you can build it using grid. Don’t forget to find examples that are impossible to build with current methods. That might mean taking inspiration from magazines or other non-web sources. Grid Layout opens up possibilities that we have not had before, we don’t need to be tied to the same old layouts to use it.

- - - - diff --git a/files/pl/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html new file mode 100644 index 0000000000..93ac130fce --- /dev/null +++ b/files/pl/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -0,0 +1,594 @@ +--- +title: Projektowanie typowych układów za pomocą układu siatki CSS +slug: >- + Web/CSS/CSS_Grid_Layout/Realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_CSS +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +

Na zakończenie tego zestawu poradników do Układów Siatki CSS (ang. CSS Grid Layout), przejdę przez kilka różnych układów, demonstrujących niektóre z  technik, których można użyć podczas projektowania z użyciem tej technologii. Przyjrzymy się przykładowi, korzystającemu z wartości grid-template-areas, typowemu 12-kolumnowemu systemowi elastycznej siatki, a także wykazowi produktów stworzonemu za pomocą automatycznego rozmieszczania. Jak wynika z wyżej przedstawionych przykładów, często istnieje więcej niż jeden sposób, aby osiągnąć pożądany efekt z układem siatki. Wybierz  tę metodę, która jest najbardziej pomocna w rozwiązaniu problemów przed którymi stoisz i  dla projektów, które realizujesz.

+ +

Responsywny układ strony korzystający z 1 do 3 kolumn o zmiennej pozycji elementów przy użyciu grid-template-areas

+ +

Znacząca część stron internetowych jest odmianą tego typu układu; zawierającego treść, panele boczne, nagłówek oraz stopkę. Podczas projektowania responsywnej witryny, możesz zechcieć wyświetlić stronę w układzie pojedynczej kolumny dla małych ekranów, dla  wyświetlacza o wartości granicznej dodać panel boczny, a dla najszerszych ekranów wprowadzić układ w trzech kolumnach.

+ +

Image of the three different layouts created by redefining our grid at two breakpoints.

+ +

Zamierzam stworzyć taki układ korzystając z  nazwanych pól szablonu, o których możecie dowiedzieć się więcej z kursu Grid template areas.

+ +

Mój szkielet  składa się z pojemnika zawierającego elementy z przeznaczeniem na: nagłówek i stopkę, główną zawartość strony, menu, panel boczny oraz blok przeznaczony na reklamę.

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content">
+            <h1>Main article area</h1>
+            <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
+        </article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+</div>
+
+ +

Używamy cechy {{cssxref("grid-template-areas")}} by stworzyć układ strony. Nie korzystamy jeszcze z zapytań o środki dostępu (ang. media-queries). Musimy teraz nadać odpowiednie nazwy polom. Żeby to zrobić skorzystamy z właściwości {{cssxref("grid-area")}}.

+ +
.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+ +

Sama w sobie, operacja ta nie tworzy żadnego układu, aczkolwiek pozwala nam na to, dzięki nadanym nazwom.   Nadal nie korzystając z zapytań o urządzenie dostępu, nadam teraz stronie układ tworzony z myślą o wyświetlaczach mobilnych. W tym wypadku zachowam pierwotną kolejność elementów, taką jak w układzie szkieletu, starając się uniknąć najmniejszego rozdźwięku pomiędzy szablonem znaczników, a ukladem siatki, zgodnie z poradami zawartymi w Grid layout and accessibility. Nie definuję kolumn, ani rzędów, jednak taka stylizacja tworzy nam układ jednokolumnowy, co się zaś tyczy rzędów, zostaną stworzone samoistnie dla każdego elementu wskazanej siatki.

+ +
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+
+ +

Zdefiniowany mobilny układ strony (jedna kolumna) będzie się teraz wyświetlał jednakowo na każdym urządzeniu, nieleżnie od jego rozmiarów. Żeby to zmienić możemy posłużyć się zapytaniem o środek dostępu i przedefiniować nasz układ na wypadek, gdyby pojawiło się wystarczająco dużo miejsca na ekranie, żeby zmieścić kolejną kolumnę.

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Możesz zaobserwować, jak będzie wyglądał nowy układ przyglądając się wartości cechy {{cssxref("grid-template-areas")}}. Element header  (nagłówek) rozciąga się na dwie kolumny, tak, jak i element nav (menu). Wtrzecim rzędzie sąsiaduje element sidebar (panel boczny) oraz element content (zawartość strony). W czwartym rzędzie umieściłem element ad (blok reklamowy) zamiast panelu bocznego, a na samym końcu element footer (stopkę) rozciągnietą na cały piąty rząd. Użyłem elastycznego bloku (flexbox) dla menu, tak by wyświetliło się w oddalonym rzędzie.

+ +

Mogę teraz dodać ostatnią wartość graniczną, wyznaczającą przejście do układu w trzech kolumnach.

+ +
@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+
+ +

The three-column layout has two 1fr unit side columns and a middle column that has 4fr as the track size. This means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center.

+ +

In this layout I am displaying the nav in the left column, alongside the content. In the right column we have the sidebar and underneath it the advertisements (ad). The footer now spans right across the bottom of the layout. I then use a flexbox to display the navigation as a column.

+ +

{{ EmbedLiveSample('layout_1', '800', '500') }}

+
+ +

This is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. In particular I am changing the location of that ad block, as appropriate in my different column setups. I find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. You could always begin to use grid in this way for prototyping, even if you can’t rely on it fully in production due to the browsers that visit your site.

+ +

A flexible 12-column layout

+ +

If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, I am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. This means that we will have twelve grid lines named col-start.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

To demonstrate how this grid system works I have four child elements inside my wrapper.

+ +
<div class="wrapper">
+  <div class="item1">Start column line 1, span 3 column tracks.</div>
+  <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div>
+  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
+  <div class="item4">Start at column line 3, span to the end of the grid (-1).</div>
+</div>
+
+ +

I can then place these on the grid using the named lines, and also the span keyword.

+ +
.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+
+ +

{{ EmbedLiveSample('layout_2', '800', '400') }}

+
+ +

As described in the guide to named lines, we are using the named line to place our item. As we have 12 lines all with the same name we use the name, and then the index of the line. You could also use the line index itself if you prefer and avoid using named lines at all.

+ +

Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the span keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the Firefox Grid Inspector. It clearly demonstrates how our items are placed.

+ +

Showing the items placed on the grid with grid tracks highlighted.

+ +

There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS Grid Layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this strict column and row placement we can also easily leave white space in our layout. We also don’t need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item.

+ +

Building a layout using the 12-column system

+ +

To see how this layout method works in practice, we can create the same layout that we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. I am starting with the same markup as used for the grid template areas example.

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content"><h1>Main article area</h1>
+        <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p></article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+    </div>
+
+ +

I can then set up our grid, as for the example 12-column layout above.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

We are once again going to make this a responsive layout, this time however using named lines. Every breakpoint will use a 12-column grid, however the number of tracks that items will span changes depending on the size of the screen.

+ +

We start mobile first, and all we want for the narrowest screens is for the items to remain in source order, and all span right across the grid.

+ +
.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+ +

At the next breakpoint we want to move to a two-column layout. Our header and navigation still span the full grid, so we do not need to specify any positioning for them. The sidebar is starting on the first column line named col-start, spanning 3 lines. It goes after row line 3, as the header and navigation are in the first two row tracks.

+ +

The ad panel is below the sidebar, so starts at grid row line 4. Then we have the content and footer starting at col-start 4 and spanning 9 tracks taking them to the end of the grid.

+ +
@media (min-width: 500px) {
+
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Finally we go to the three-column version of this layout. The header continues to span right across the grid, but now the navigation moves down to become the first sidebar, with the content and then the sidebar next to it. The footer now also spans across the full layout.

+ +
@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+
+ +

{{ EmbedLiveSample('layout_3', '800', '450') }}

+
+ +

Once again the Grid Inspector is useful to help us see how our layout has taken shape.

+ +

Showing the layout with grid tracks highlighted by the grid inspector.

+ +

Something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. We have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. We are also able to take advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. In the final example in this guide we will create a layout that entirely relies on auto-placement.

+ +

A product listing with auto-placement

+ +

Many layouts are essentially sets of “cards” – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add media queries to make it so. In this next example I’m combining CSS Grid and Flexbox Layouts to make a simple product listing layout.

+ +

The markup for my listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link.

+ +
+
<ul class="listing">
+  <li>
+    <h2>Item One</h2>
+    <div class="body"><p>The content of this listing item goes here.</p></div>
+    <div class="cta"><a href="">Call to action!</a></div>
+  </li>
+   <li>
+     <h2>Item Two</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+   </li>
+   <li class="wide">
+     <h2>Item Three</h2>
+     <div class="body"><p>The content of this listing item goes here.</p>
+     <p>This one has more text than the other items.</p>
+     <p>Quite a lot more</p>
+     <p>Perhaps we could do something different with it?</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+    <li>
+     <h2>Item Four</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+     <li>
+     <h2>Item Five</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+      <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+</ul>
+
+ + + +

We are going to create a grid with a flexible number of flexible columns. I want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. We achieve this with the minmax() function in our repeat notation for track sizing.

+ +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+
+ +

As soon as I add this CSS, the items start to lay out as a grid. If I make the window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid.

+ +

I can then tidy up the internals of the boxes using a little touch of flexbox. I set the list item to display: flex and the flex-direction to column. I can then use an auto margin on the .cta to push this bar down to the bottom of the box.

+ +
.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+
+ +

This is really one of the key reasons I would use flexbox rather than grid, if I am just aligning or distributing something in a single dimension, that’s a flexbox use case. 

+ +

{{ EmbedLiveSample('layout_4', '800', '900') }}

+
+ +

This is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. It might be nice to cause those to span two tracks, and then they won’t be so tall. I have a class of wide on my larger item, and I add a rule {{cssxref("grid-column-end")}} with a value of span 2. Now when grid encounters this item, it will assign it two tracks. At some breakpoints, this means that we'll get a gap in the grid – where there isn’t space to lay out a two-track item.

+ +

The layout has gaps as there is not space to layout a two track item.

+ +

I can cause a grid to backfill those gaps by setting {{cssxref("grid-auto-flow")}}: dense on the grid container. Take care when doing this however as it does take items away from their logical source order. You should only do this if your items do not have a set order – and be aware of the issues of the tab order following the source and not your reordered display.

+ +
+ + +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+
+ +

{{ EmbedLiveSample('layout_5', '800', '900') }}

+ +

This technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.

+
+ +

Further exploration

+ +

The best way to learn to use grid layout is to continue to build examples like the ones we have covered here. Pick something that you normally build using your framework of choice, or using floats, and see if you can build it using grid. Don’t forget to find examples that are impossible to build with current methods. That might mean taking inspiration from magazines or other non-web sources. Grid Layout opens up possibilities that we have not had before, we don’t need to be tied to the same old layouts to use it.

+ + + + diff --git a/files/pl/web/css/css_lists_and_counters/using_css_counters/index.html b/files/pl/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..3c494e6af3 --- /dev/null +++ b/files/pl/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,86 @@ +--- +title: Liczniki CSS +slug: Web/Guide/Liczniki_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +

 

+ +

Podsumowanie

+ +

Liczniki w CSS zostały opisane w sekcji Automatic counters and numbering dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności counter-reset oraz counter-increment, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności content.

+ +

Zastosowanie liczników

+ +

Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności reset. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu h1 "Sekcja wartość licznika:".

+ +
  body {
+    counter-reset: sekcja;           /* Ustawienie licznika sekcja na 0 */
+  }
+  h1::before {
+    counter-increment: sekcja;               /* Zwiększa licznik sekcja */
+    content: "Sekcja " counter(sekcja) ": ";       /* Wyświetla licznik */
+  }
+
+ +

Zagnieżdżanie liczników

+ +

Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (ol), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:

+ +
  ol {
+    counter-reset: sekcja;                /* Tworzy nową instancję licznika
+                                             sekcja w każdym elemencie ol */
+    list-style-type: none;                /* Usuwa domyślnie wyświetlany licznik */
+  }
+  li::before {
+    counter-increment: sekcja;            /* Zwiększa tylko tę instancję
+                                             licznika sekcja */
+    content: counters(sekcja, ".") " ";   /* Wyświetla wartości wszystkich
+                                             instancji licznika sekcja,
+                                             oddzielając je ciągiem ".". */
+  }
+
+ +

Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):

+ +
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+
+ +

Zobacz także

+ + + +

potrzebna treść do artykułu

+ +

{{ languages( { "en": "en/CSS_Counters", "fr": "fr/Compteurs_CSS" } ) }}

diff --git a/files/pl/web/css/css_reference/index.html b/files/pl/web/css/css_reference/index.html deleted file mode 100644 index c6b8ea66c6..0000000000 --- a/files/pl/web/css/css_reference/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Dokumentacja CSS -slug: Web/CSS/CSS_Reference -translation_of: Web/CSS/Reference ---- -

Specyfikacja CSS zawiera wszystkie standardowe właściwości CSS, w tym  pseudo-klas i pseudo-elementow, zasad używania znaku @, i selektorów w porządku alfabetycznym. Taka organizacja specyfikacji pozwala na szybki dostęp do szczegółowych informacji o każdym elemencie specyfikacji.
-
- Specyfikacja CSS nie tylko opisuje ustandaryzowane właściwości CSS1 i CSS2.1, ale odnosi się również do specyfikacji najnowszej wersji - CSS3, zarówno elementów w fazie koncepcji jak i elementów zatwierdzonych.

-
- Zobacz także rozszerzenie CSS Mozilli skonstrułowanych dla programów opartych na Gecko, z prefiksem -moz; oraz rozszerzenia CSS WebKit dla programów opartych na tym silniku. Sprawdź zestawienie właściwości wszystko prefiksów CSS autorstwa Petera Beverloo.
-

 

-
- {{ CSS_Ref() }}
-

Selektory

- -

diverso

- -

Pojęcia

- diff --git a/files/pl/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/pl/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..ff4ec92e20 --- /dev/null +++ b/files/pl/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,64 @@ +--- +title: 'Użycie pseudoklasy :target w selektorach' +slug: 'Web/CSS/CSS_Selectors/Użycie_pseudoklasy_:target_w_selektorach' +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Czasami adres URL wskazuje na konkretny fragment dokumentu, ale użytkownikowi może być ciężko to zauważyć. Sprawdź, jak można łatwo zwrócić uwagę użytkownika na target naszego adresu URL za pomocą CSS.

+ +

Wybór targetu

+ +

Pseudoklasy {{cssxref(":target")}} używa się, aby ostylować targetowany element adresu URL, który zawiera identyfikator fragmentu.

+ +

Przykładowo, adres URL http://developer.mozilla.org/en/docs/Using_the_:target_selector#example zawiera identyfikator fragmentu o treści #example. W HTML identyfikatory fragmentu to wartości atrybutów id lub name jako że atrybuty te dzielą tę samą przestrzeń na nazwy. A więc adres URL z naszego przykładu wskazywałby nam część strony o tytule "example".

+ +

Przypuśćmy, że chcesz ostylować każdy element h2, który jest targetem URL i nie chcesz, żeby elementy innego rodzaju dostały ostylowane w ten sposób. To proste:

+ +
h2:target { font-weight: bold; }
+ +

Można też stworzyć style, które dotyczą jedynie konkretnego fragmentu naszej strony. Robi się to używając tego samego identyfikatora, który znajduje się w naszym URL. Tak więc aby dodać obramowanie do fragmentu strony zawierającego element #example, napisalibyśmy:

+ +
#example:target { border: 1px solid black; }
+ +

Targetowanie wszystkich elementów

+ +

Jeżeli chcemy stworzyć uniwersalne stylowanie, którego będziemy używać do wszystkich targetowanych elementów, możemy użyć uniwersalnego selektora:

+ +
:target { color: red; }
+
+ +

Przykład

+ +

W poniższym przykładzie jest pięć odnośników, które przenoszą nas do różnych elementów należących do jednego dokumentu. Wybierając link "Pierwszy" sprawi, że <h1 id="one"> zostanie naszym pierwszym targetowanym elementem. Zwróć uwagę, że dokument zostać przewinięty przewinąć do nowej pozycji, jako że targetowane elementy umieszcza się w miarę możliwości na górze okna przeglądarki.

+ +
+
<h4 id="jeden">...</h4> <p id="dwa">...</p>
+<div id="trzy">...</div> <a id="cztery">...</a> <em id="piec">...</em>
+
+<a href="#jeden">Pierwszy</a>
+<a href="#dwa">Drugi</a>
+<a href="#trzy">Trzeci</a>
+<a href="#cztery">Czwarty</a>
+<a href="#piec">Piąty</a>
+
+ +

Podsumowanie

+ +

W przypadkach, gdy identyfikator fragmentu wskazuje na dany kawałek dokumentu, użytkownik może nie być pewny, którą część dokumentu ma czytać. Dzięki ostylowaniu targetu adresu URL można tego uniknąć.

+ + + + + +
+

Original Document Information

+ + +
diff --git "a/files/pl/web/css/css_selectors/u\305\274ycie_pseudoklasy__colon_target_w_selektorach/index.html" "b/files/pl/web/css/css_selectors/u\305\274ycie_pseudoklasy__colon_target_w_selektorach/index.html" deleted file mode 100644 index ff4ec92e20..0000000000 --- "a/files/pl/web/css/css_selectors/u\305\274ycie_pseudoklasy__colon_target_w_selektorach/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'Użycie pseudoklasy :target w selektorach' -slug: 'Web/CSS/CSS_Selectors/Użycie_pseudoklasy_:target_w_selektorach' -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -
{{CSSRef}}
- -

Czasami adres URL wskazuje na konkretny fragment dokumentu, ale użytkownikowi może być ciężko to zauważyć. Sprawdź, jak można łatwo zwrócić uwagę użytkownika na target naszego adresu URL za pomocą CSS.

- -

Wybór targetu

- -

Pseudoklasy {{cssxref(":target")}} używa się, aby ostylować targetowany element adresu URL, który zawiera identyfikator fragmentu.

- -

Przykładowo, adres URL http://developer.mozilla.org/en/docs/Using_the_:target_selector#example zawiera identyfikator fragmentu o treści #example. W HTML identyfikatory fragmentu to wartości atrybutów id lub name jako że atrybuty te dzielą tę samą przestrzeń na nazwy. A więc adres URL z naszego przykładu wskazywałby nam część strony o tytule "example".

- -

Przypuśćmy, że chcesz ostylować każdy element h2, który jest targetem URL i nie chcesz, żeby elementy innego rodzaju dostały ostylowane w ten sposób. To proste:

- -
h2:target { font-weight: bold; }
- -

Można też stworzyć style, które dotyczą jedynie konkretnego fragmentu naszej strony. Robi się to używając tego samego identyfikatora, który znajduje się w naszym URL. Tak więc aby dodać obramowanie do fragmentu strony zawierającego element #example, napisalibyśmy:

- -
#example:target { border: 1px solid black; }
- -

Targetowanie wszystkich elementów

- -

Jeżeli chcemy stworzyć uniwersalne stylowanie, którego będziemy używać do wszystkich targetowanych elementów, możemy użyć uniwersalnego selektora:

- -
:target { color: red; }
-
- -

Przykład

- -

W poniższym przykładzie jest pięć odnośników, które przenoszą nas do różnych elementów należących do jednego dokumentu. Wybierając link "Pierwszy" sprawi, że <h1 id="one"> zostanie naszym pierwszym targetowanym elementem. Zwróć uwagę, że dokument zostać przewinięty przewinąć do nowej pozycji, jako że targetowane elementy umieszcza się w miarę możliwości na górze okna przeglądarki.

- -
-
<h4 id="jeden">...</h4> <p id="dwa">...</p>
-<div id="trzy">...</div> <a id="cztery">...</a> <em id="piec">...</em>
-
-<a href="#jeden">Pierwszy</a>
-<a href="#dwa">Drugi</a>
-<a href="#trzy">Trzeci</a>
-<a href="#cztery">Czwarty</a>
-<a href="#piec">Piąty</a>
-
- -

Podsumowanie

- -

W przypadkach, gdy identyfikator fragmentu wskazuje na dany kawałek dokumentu, użytkownik może nie być pewny, którą część dokumentu ma czytać. Dzięki ostylowaniu targetu adresu URL można tego uniknąć.

- - - - - -
-

Original Document Information

- - -
diff --git "a/files/pl/web/css/cursor/u\305\274ycie_warto\305\233ci_url_dla_w\305\202asno\305\233ci_cursor/index.html" "b/files/pl/web/css/cursor/u\305\274ycie_warto\305\233ci_url_dla_w\305\202asno\305\233ci_cursor/index.html" deleted file mode 100644 index f6e786ee52..0000000000 --- "a/files/pl/web/css/cursor/u\305\274ycie_warto\305\233ci_url_dla_w\305\202asno\305\233ci_cursor/index.html" +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Użycie wartości URL dla własności cursor -slug: Web/CSS/cursor/Użycie_wartości_URL_dla_własności_cursor -tags: - - CSS - - CSS_2.1 - - Programowanie_WWW - - Programowanie_dla_wielu_przeglądarek - - Wszystkie_kategorie -translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property ---- -

 

-

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) wspiera wartości URL dla własności cursor CSS 2/2.1. To pozwala używać zewnętrzne obrazki jako kursory myszy — można użyć każdego formatu wspieranego przez Gecko.

-

Składnia

-

Składnia dla tej własności:

-
cursor: [<url>,]* słowo_kluczowe;
-
-

To oznacza, że można podać zero lub więcej adresów URL (oddzielonych przecinkiem), a na końcu musi pojawić się jedno ze słów kluczowych zdefiniowanych w specyfikacji CSS, takie jak auto czy pointer.

-

Na przykład, taka wartość jest dozwolona:

-
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
-
-

Najpierw nastąpi próba pobrania pliku foo.cur. Jeżeli ten plik nie istnieje, lub jest nieprawidłowy z jakiegoś powodu, nastąpi próba pobrania bar.gif, a jeśli to się nie uda, zostanie użyta wartość auto.

-

Wsparcie dla składni CSS3 dla wartości własności cursor zostało dodane w Gecko 1.8beta3 (Deer Partk Alpha 2); zatem działa ono w Firefoksie 1.5. Pozwala to na określanie punktu wiązania kursora, który musi być wewnątrz wymiarów obrazka kursora; koordynaty na zewnątrz obrazka będą przybliżane do krawędzi (n.p. ujemna wartość będzie interpretowana jako 0, a wartości wykraczające poza wymiary obrazka będą przycinane do najbliższego piksela w obrazku). Jeśli nie zostaną podane, dla plików CUR i XBM wartości zostaną pobrane z plików, a dla pozostałych zostanie ustalony lewy górny róg obrazka. Przykładem składni CSS3 jest:

-
cursor: url(foo.png) 4 12, auto;
-
-

Pierwsza liczba to wartość x, a drugi y. W tym przypadku punkt wiązania zostanie ustawiony w pikselu (4,12) licząc od lewego górnego rogu (0,0).

-

Ograniczenia

-

Można używać wszystkich formatów obrazków wspieranych przez Gecko. To oznacza, że możesz użyć BMP, JPG, CUR, GIF, itp. Jednak ANI nie jest wspierane. I nawet, jeżeli zostanie podany animowany GIF, kursor nie będzie animowany. To ograniczenie zostanie usunięte w przyszłych wersjach.

-

Gecko, samo w sobie, nie tworzy żadnych ograniczeń, co do rozmiaru kursora. Jednak powinieneś ograniczyć obrazek do 32x32 dla maksymalnej kompatybilności z różnymi systemami operacyjnymi. W szczególności kursory większe, niż podany rozmiar nie będą działały na Windows 9x (95, 98, ME).

-

Przezroczyste kursory nie są wspierane na systemie Windows w wersjach wcześniejszych niż XP. To ograniczenie systemu operacyjnego. Przezroczystość działa na pozostałych platformach.

-

Tylko wydania Mozilli na platformy Windows, OS/2 i Linux (z GTK+ 2.4 lub nowszym) wspierają wartości URL dla kursorów. Wsparcie dla innych platform może zostać dodane w przyszłości (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, Gtk 2.0/2.2: {{ Bug(308536) }})

-

Kompatybilność z innymi przeglądarkami

-

Microsoft Internet Explorer także wspiera wartości URI dla własności cursor. Jednak wspiera wyłącznie formaty CUR i ANI.

-

Jest także znacznie mniej restrykcyjny w zakresie składni. To oznacza, że wartości takie jak:

-
cursor: url(foo.cur);
-
-

lub:

-
cursor: url(foo.cur), pointer, url(bar.cur), auto;
-
-

będą działały w MSIE, ale nie będą w Gecko. Dla kompatybilności z Gecko i zgodności ze specyfikacja CSS, zawsze na początku należy podać URI, oraz użyć dokładnie jednego słowa kluczowego na końcu.

-

 

diff --git "a/files/pl/web/css/cz\304\231ste_pytania_o_css/index.html" "b/files/pl/web/css/cz\304\231ste_pytania_o_css/index.html" deleted file mode 100644 index 12a84d8c20..0000000000 --- "a/files/pl/web/css/cz\304\231ste_pytania_o_css/index.html" +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Częste pytania o CSS -slug: Web/CSS/Częste_pytania_o_CSS -tags: - - CSS - - Wszystkie_kategorie -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -

-

-

Często zadawane pytania

-

Stworzyłem poprawny CSS, ale przeglądarka go źle wyświetla

-

Jeśli chcesz, aby Twoja przeglądarka poprawnie wyświetlała strony stworzone zgodnie ze standardami HTML/CSS, to musisz zadeklarować na początku każdego pliku HTML Deklarację Typu Dokumentu (DTD - Document Type Declaration). -

Nowoczesne przeglądarki obsługują dwa główne tryby wyświetlania: -

- -

Jeśli Twoja deklaracja (DTD) jest niepełna, przestarzała lub jej brak, to przeglądarki będą wyświetlały strony używając trybu zgodności wstecznej. -

Oto lista najczęściej używanych DTD: -

-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
-

Różnice między id i class

-

Bloki i elementy HTML-a mogą mieć atrybut id i/lub class. Atrybut id pozwala nadać unikalną nazwę wybranemu elementowi. W jednym dokumencie nie może być dwóch elementów o tej samej nazwie (identyfikatorze). Atrybut class pozwala na grupowanie elementów w określonej klasie. Z założenia identyczny atrybut jest stosowany dla wielu elementów. CSS pozwala zdefiniować style, które mają być użyte do elementów z odpowiednim atrybutem id i/lub class. -

Używaj styli zależnych od id, gdy chcesz ograniczyć ich działanie do konkretnego bloku lub elementu. Dla przykładu - dobrym miejscem na użycie atrybutu id jest blok, w którym umieszczamy menu, ponieważ występuje on tylko raz na stronie. -

Używaj atrybutu class, gdy chcesz aby ten sam styl był stosowany do grupy elementów. -

Zobacz Selektory CSS -

-

Przywracanie domyślnej wartości własności

-

W CSS2 nie ma możliwości ustawienia standardowej wartości dla własności CSS. Jedyna droga, aby przywrócić standardową wartość, to przedeklarowanie (musisz znać standardową wartość, ponieważ CSS nie posiada słowa kluczowego default) -

Musisz zachować szczególną ostrożność pisząc reguły stylów, gdy używasz selektorów (np. selektorów po nazwie znacznika jak na przykład p), które możesz chcieć nadpisać bardziej szczegółowymi regułami (jak te przy użyciu ID lub selektorów klas), ponieważ oryginalna standardowa wartość nie może być automatycznie odzyskana. -

Z powodu kaskadowej natury CSS dobrą praktyką jest definiowanie reguł stylów najszczegółowiej jak się tylko da, żeby wpływały tylko na to, co chcesz. -

-

Style pochodne

-

CSS nie pozwala na definiowanie stylów w regułach innego, głównie z powodu user agents performance issues (Eric Meyer words about it). -

W każdym razie, dobrze zorganizowany dokument HTML nie potrzebuje zagnieżdżonych stylów, dzięki kaskadowej naturze stylów. W rzeczywistości, jeśli potrzebujesz dokonać drobnej zmiany konkretnej reguły, stwórz oddzielną regułę zawierającą tylko zmiany. W HTML-u zastosuj główną regułę, a potem tą ze zmianami (patrz następna sekcja na temat przydzielania kilku klas). -

-

Przydzielanie kilku klas

-

Elementy HTML-a mogą być opisane przez kilka klas. Robi się to wymieniając nazwy kolejnych klas w atrybucie class, oddzielając kolejne nazwy spacjami. -

-
<style type="text/css">
-.firstclass { background: black; color: white; }
-.secondclass { font-weight: bold; }
-</style>
-
-<div class="firstclass secondclass">
-... treść ...
-... treść ...
-... treść ...
-</div>
-
-

Jeśli ta sama własność jest zadeklarowana w dwóch regułach, to konflikt rozwiązywany jest najpierw poprzez ich specyfikę, a później kolejność w arkuszu stylów. Kolejność klas w atrybucie class jest nieistotna. -

-

Własności stylów, które nie działają

-

Często się zdarza, że poprawnie zdefiniowane style są ignorowane. Nie wynika to ani z błędu przeglądarki, ani z błędnej składni w CSS. Zwykle jest to zachowanie jak najbardziej prawidłowe, wynikające bezpośrednio ze składni i kolejności intepretacji reguł CSS. -

Najczęstsze powody ignorowania niektórych styli to: -

- -

Aby zlokalizować omówiony powyżej problem narzędziem zwanym " Inspektor DOM", w którym będziemy mogli zobaczyć jego lokalizację. -

Hierarchia elementów HTML-a -

Sposób, w jaki style CSS są stosowane do elementów HTML, zależy od hierarchii samych elementów HTML. Ważne jest, aby to zapamiętać, ponieważ reguła potomka jest zawsze ważniejsza od reguły elementu nadrzędnego. -

-
#section { font-weight: bold; }
-.redtext { font-weight: normal; color: red; }
-
-<div id="section">
-   To jest pogrubiony tekst
-   <span class="redtext"> ten ma normalną grubość, lecz jest czerwony,</span>
-   i znów pogrubiony
-</div>
-
-

Wydaje się to dość oczywiste, gdyż wynika z prostoty kaskadowych arkuszy stylów. Gdy w przypadku skomplikowanych hierarchii HTML jakaś reguła wydaje sie być ignorowana, najpierw sprawdź, czy podejrzany element nie jest wewnątrz innego ze zdefiniowanym innym stylem. -


-Przedefiniowywanie reguł stylów -

W arkuszach stylów kolejność jest istotna. W praktyce, jeśli zdefiniujesz regułę, a następnie zmienisz tą definicję w dalszej części arkusza stylów to użyta będzie ostatnia definicja. -

-
#sekcja { font-weight: bold; }
-.czerwony_tekst { color: red; }
-/* inne reguły                         */
-/*             inne reguły             */
-/*                         inne reguły */
-.czerwony_tekst { font-weight: normal; }
-
-<div id="sekcja">
-   Ten tekst jest pogrubiony,
-   <span class="redtext"> ten jest normalny i czerwony,</span>
-   a ten znów pogrubiony.
-</div>
-
-

Aby uniknąć tego typu błędów, spróbuj definiować reguły tylko raz dla konkretnego selektora i należącej do niego grupy reguł. -


-Używanie skrótów własności -

Używanie skrótów własności do definiowania reguł stylów jest dobre, ponieważ używa zwięzłej składni. Używanie ~shorthand~ tylko z niektórymi atrybutami jest możliwe i poprawne, ale trzeba pamiętać, że niezadeklarowane atrybuty są automatycznie resetowane do wartości standardowych. Oznacza to, że poprzednia reguła dla pojedynczego atrybutu może być bezwarunkowo nadpisana. -

-
#sekcja { font-size: 12px; font-family: Verdana; font-weight: bold; }
-.czerwony_tekst { font: 14px Arial; color: red; }
-
-<div id="sekcja">
-   To jest pogrubiona 12-o pikselowa Verdana,
-   <span class="czerwony_tekst">to jest normalny 14-o pikselowy, czerwony Arial,</span>
-   i znów 12-o pikselowa Verdana
-</div>
-
-

W poprzednim przykładnie problem w regułach należących do różnych elementów, ale to samo może się zdarzyć dla tego samego elementu, ponieważ kolejność reguł jest istotna. -

-
#sekcja {
-   font-weight: bold;
-   font: 12px Verdana;  /* skrót nadpisuje pogrubienie i zwraca normalny */
-}
-
-


-Używanie selektora: * -

Selektor gwiazdki (*) pozwala na odniesienie się do dowolnego elementu i powinien być używany ze szczególną ostrożnością, ponieważ może być trudne kontrolowanie elementów, do których reguły są dodawane. -

-
body * { font-weight: normal; }
-#sekcja { font: 12px Verdana; }
-.pogrubiony_tekst { font-weight: bold; }
-.czerwony_tekst { color: red; }
-
-<div id="sekcja">
-   Ten jest normalny,
-   <span class="pogrubiony_tekst">
-      <span class="czerwony_tekst"> ten jest normalny i czerwony,</span>
-   </span>
-   i znów normalny.
-</div>
-
-

W tym przykładzie body * pozwala na zastosowanie reguł do wszystkich elementów wewnątrz body, na każdym poziomie hierarchii - także do czerwony_tekst. Tak więc font-weight: bold; zastosowany do klasy pogrubiony_tekst jest nadpisane przez font-weight: normal; klasy czerwony_tekst. -

Starszeństwo w CSS -

Gdy stosowane są różne reguły dla konkretnego elementu to która z nich zostanie zastosowana zależy od starszeństwa stylów. Style inline (liniowe, takie jak span) są interpretowane na początku, potem te oparte na identyfikatorze (id), następnie klasie (class) i ewentualnie znajdujące się wewnątrz elementu (style=""). -


-

-
div { color: black; }
-#pomaranczowy { color: orange; }
-.zielony { color: green; }
-
-<div id="pomaranczowy" class="zielony" style="color: red;">To jest czerwony tekst</div>
-
-

Więcej informacji na temat działania selektorów można znaleźć w sieci → CSS 2.1 Specification chapter 6.4.3 -

-

Co wykonuje własność -moz-*?

-

Zobacz: Rozszerzenia CSS Mozilli. -

-
-
-{{ languages( { "en": "en/Common_CSS_Questions", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }} diff --git a/files/pl/web/css/dziedziczenie/index.html b/files/pl/web/css/dziedziczenie/index.html deleted file mode 100644 index e8049231f1..0000000000 --- a/files/pl/web/css/dziedziczenie/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Dziedziczenie -slug: Web/CSS/Dziedziczenie -tags: - - CSS - - 'CSS:Dokumentacje' - - Dokumentacje - - Wszystkie_kategorie -translation_of: Web/CSS/inheritance ---- -

-{{ CSSRef() }} -

-

Podsumowanie

-

Podsumowanie każdej definicji własności CSS zawiera informację, czy dana własność jest dziedziczona domyślnie ("Dziedziczona: tak"), czy też nie ("Dziedziczona: nie"). Umożliwia to kontrolę nad tym, co się dzieje, gdy nie została określona żadna wartość własności elementu. -

-

Własności dziedziczone

-

Gdy nie została określona wartość własności dziedziczonej elementu, element otrzymuje wartość wyliczoną własności elementu-rodzica. Tylko element główny dokumentu otrzymuje wartość początkową podaną w podsumowaniu własności. -

Typowym przykładem własności dziedziczonej jest własność {{ Cssxref("color") }}. Mając następujące reguły stylu: -

-
 p { color: green }
-
-

i znaczniki -

-
 <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p>
-
-

wyrażenie "wyróżniony tekst" będzie miało kolor zielony, ponieważ element em odziedziczył wartość własności {{ Cssxref("color") }} po elemencie p. Nie otrzymuje on początkowej wartości własności (którą jest kolor użyty w elemencie głównym, gdy nie został określony dla strony żaden kolor). -

-

Własności niedziedziczone

-

Gdy nie została określona wartość własności niedziedziczonej (czasami nazywanej własnością reset w kodzie Mozilli) elementu, element otrzymuje wartość początkową tej własności (jak podano w podsumowaniu własności). -

Typowym przykładem własności niedziedziczonej jest własność {{ Cssxref("border") }}. Mając następujące reguły stylu: -

-
 p { border: medium solid }
-
-

i znaczniki -

-
 <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p>
-
-

wyrażenie "wyróżniony tekst" nie będzie posiadało ramki (ponieważ wartość początkowa własności {{ Cssxref("border-style") }} to none). -

-

Uwagi

-

Słowo kluczowe {{ Cssxref("inherit") }} pozwala na bezpośrednie określenie dziedziczenia. Działa ono zarówno na własnościach dziedziczonych jak i niedziedziczonych. -

-

Zobacz również

-

{{ Cssxref("inherit") }}, wartość początkowa -


-

-
-
-{{ languages( { "en": "en/CSS/inheritance", "es": "es/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance" } ) }} diff --git a/files/pl/web/css/inheritance/index.html b/files/pl/web/css/inheritance/index.html new file mode 100644 index 0000000000..e8049231f1 --- /dev/null +++ b/files/pl/web/css/inheritance/index.html @@ -0,0 +1,50 @@ +--- +title: Dziedziczenie +slug: Web/CSS/Dziedziczenie +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/inheritance +--- +

+{{ CSSRef() }} +

+

Podsumowanie

+

Podsumowanie każdej definicji własności CSS zawiera informację, czy dana własność jest dziedziczona domyślnie ("Dziedziczona: tak"), czy też nie ("Dziedziczona: nie"). Umożliwia to kontrolę nad tym, co się dzieje, gdy nie została określona żadna wartość własności elementu. +

+

Własności dziedziczone

+

Gdy nie została określona wartość własności dziedziczonej elementu, element otrzymuje wartość wyliczoną własności elementu-rodzica. Tylko element główny dokumentu otrzymuje wartość początkową podaną w podsumowaniu własności. +

Typowym przykładem własności dziedziczonej jest własność {{ Cssxref("color") }}. Mając następujące reguły stylu: +

+
 p { color: green }
+
+

i znaczniki +

+
 <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p>
+
+

wyrażenie "wyróżniony tekst" będzie miało kolor zielony, ponieważ element em odziedziczył wartość własności {{ Cssxref("color") }} po elemencie p. Nie otrzymuje on początkowej wartości własności (którą jest kolor użyty w elemencie głównym, gdy nie został określony dla strony żaden kolor). +

+

Własności niedziedziczone

+

Gdy nie została określona wartość własności niedziedziczonej (czasami nazywanej własnością reset w kodzie Mozilli) elementu, element otrzymuje wartość początkową tej własności (jak podano w podsumowaniu własności). +

Typowym przykładem własności niedziedziczonej jest własność {{ Cssxref("border") }}. Mając następujące reguły stylu: +

+
 p { border: medium solid }
+
+

i znaczniki +

+
 <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p>
+
+

wyrażenie "wyróżniony tekst" nie będzie posiadało ramki (ponieważ wartość początkowa własności {{ Cssxref("border-style") }} to none). +

+

Uwagi

+

Słowo kluczowe {{ Cssxref("inherit") }} pozwala na bezpośrednie określenie dziedziczenia. Działa ono zarówno na własnościach dziedziczonych jak i niedziedziczonych. +

+

Zobacz również

+

{{ Cssxref("inherit") }}, wartość początkowa +


+

+
+
+{{ languages( { "en": "en/CSS/inheritance", "es": "es/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance" } ) }} diff --git a/files/pl/web/css/initial_value/index.html b/files/pl/web/css/initial_value/index.html new file mode 100644 index 0000000000..8144cb37ba --- /dev/null +++ b/files/pl/web/css/initial_value/index.html @@ -0,0 +1,25 @@ +--- +title: Wartość początkowa +slug: Web/CSS/Wartość_początkowa +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/initial_value +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

Wartość początkowa podana w podsumowaniu każdej własności CSS ma odmienne znaczenie własności dziedziczonych i własności niedziedziczonych. +

Dla własności dziedziczonych wartość początkowa używana jest tylko dla elementu źródłowego, gdy nie określono wartości elementu. +

Dla własności niedziedziczonych wartość początkowa używana jest dla każdego elementu, gdy nie określono wartości elementu. +

W CSS3 dodano wartość initial, by pozwolić autorom na wyraźne określenie wartości początkowej. +

+

Zobacz również

+

Własności dziedziczone i niedziedziczone, initial +


+

+
+
+{{ languages( { "en": "en/CSS/initial_value", "es": "es/CSS/Valor_inicial", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value" } ) }} diff --git a/files/pl/web/css/inne_zasoby/index.html b/files/pl/web/css/inne_zasoby/index.html deleted file mode 100644 index f124f74fd7..0000000000 --- a/files/pl/web/css/inne_zasoby/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Inne zasoby -slug: Web/CSS/Inne_zasoby -tags: - - CSS - - Wszystkie_kategorie -translation_of: Web/CSS -translation_of_original: Web/CSS/Other_Resources ---- -

-

-

Dokumenty W3C

- -

Inne zasoby

- -{{ languages( { "en": "en/CSS/Other_Resources", "fr": "fr/CSS/Autres_ressources", "ja": "ja/CSS/Other_Resources" } ) }} diff --git a/files/pl/web/css/media_queries/testing_media_queries/index.html b/files/pl/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..140d3a1796 --- /dev/null +++ b/files/pl/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,116 @@ +--- +title: Sprawdzanie media queries +slug: Web/Guide/CSS/Sprawdzanie_media_queries +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +

{{SeeCompatTable}}

+ +

DOM dostarcza funkcje, dzięki którym możliwym jest sprawdzenie wyników media query. Jest to możliwe przy użyciu interfejsu {{domxref("MediaQueryList") }} i jego funkcji oraz właściwości. Po utworzeniu obiektu {{domxref("MediaQueryList") }} możesz zbadać wynik zapytania (query) lub (dodatkowo) otrzymywać powiadomienie, gdy rezultat się zmieni.

+ +

Tworzenie listy media query

+ +

Zanim będziesz mógł ocenić wynik zapytania, musisz utworzyć obiekt {{domxref("MediaQueryList") }}, reprezentujący media query. Aby to uczynić użyj metody {{domxref("window.matchMedia") }}.

+ +

Na przykład, jeśli chcesz ustalić czy orientacja urządzenia jest pionowa czy pozioma, możesz skorzystać z takiego zapytania jak poniżej:

+ +
var mql = window.matchMedia("(orientation: portrait)"); /* sprawdzamy czy orientacja obiektu, jest pionowa; zwraca obiekt MediaQueryList */
+
+ +

Sprawdzanie rezultatu zapytania (query)

+ +

Po wykonaniu powyższej metody, mamy dostęp do obiektu {{domxref("MediaQueryList") }}, który ma kilka przydatnych metod i właściwości. Jedną z nich jest cecha matches, która zwraca prawdę lub fałsz.

+ +
if (mql.matches) {
+  /* wykryta orientacja pionowa */
+} else {
+  /* wykryta orientacja pozioma */
+}
+
+ +

Otrzymywanie powiadomień

+ +

W przypadku, gdy chciałbyś na bieżąco dostawać alerty o stanie zapytania (query), skorzystaj z funkcji addListener(), która jest zdecydowanie wydajniejsza aniżeli sprawdzanie "ręcznie" co jakiś czas. By skorzystać z tego ułatwienia, wywołaj tę funkcję na obiekcie {{domxref("MediaQueryList") }}, określając obserwator, który implementuje interfejs {{domxref("MediaQueryListListener") }}:

+ +
var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(zmianaOrientacji);
+zmianaOrientacji(mql);
+
+ +

Powyższy kod tworzy media query list, a następnie dołącza listener. Zauważ, że po dodaniu listenera, przywołaliśmy listenera bezpośrednio - trzecia linijka. To pozwala nam określić aktualną orientację urządzenia.

+ +

Zaimplementowana metoda zmianaOrientacji() pozwala nam wykonać pewne czynności, gdy zmieni się położenie urządzenia.

+ +
function zmianaOrientacji(mql) {
+  if (mql.matches) {
+    /* wykryta orientacja pionowa */
+  } else {
+    /* wykryta orientacja pozioma */
+  }
+}
+
+ +

Wyłączenie powiadomień

+ +

Gdy nie potrzebujesz już powiadomień dotyczących zmiany wartości zapytania, możesz wywołać metodę removeListener() dostępną w obiekcie {{domxref("MediaQueryList") }}:

+ +
mql.removeListener(zmianaOrientacji);
+
+ +

Zgodność z przeglądarką

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("6.0") }}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatUnknown}}1012.15
+
+ +

Zobacz także

+ + diff --git "a/files/pl/web/css/na_pocz\304\205tek/bloki/index.html" "b/files/pl/web/css/na_pocz\304\205tek/bloki/index.html" deleted file mode 100644 index d8edcc96fb..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/bloki/index.html" +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Bloki -slug: Web/CSS/Na_początek/Bloki -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -

 

-

Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.

-

W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.

-

Informacja: Bloki

-

Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.

-

W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.

- -

margines zewnętrzny

ramka

margines wewnętrzny

element

Jasny szary wskazuje części układu strony.

 

 

 

element

Tak wygląda to w przeglądarce.
-

Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.

-

Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.

- -

margines zewnętrzny

ramka

margines wewnętrzny

element

Ten element ma zielone tło.

 

 

 

element

Tak wygląda to w przeglądarce.
-

Ramki

-

Możesz użyć ramek do dekoracji elementów liniami lub blokami.

-

Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności border. Określ szerokość (zwykle w pikselach), styl i kolor.

-

Istnieją następujące style:

- -
solid
dotted
dashed
double
inset
outset
ridge
groove
-

Możesz także ustawić styl na none lub hidden, aby usunąć ramkę, lub ustawić kolor na transparent, aby ustawić przezroczystą ramkę bez dotykania układu.

-

Aby określić osobno każdą krawędź ramki, użyj własności: border-top (góra), border-right (prawo), border-bottom (dół), border-left (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.

- -
Przykłady
Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka:

h3 {

 border-top: 4px solid #7c7; /* mid green */
- background-color: #efe;     /* pale green */
- color: #050;                /* dark green */
- }
-

Wygląda to tak:

Nagłówek w dobrym stylu

Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:

img {border: 2px solid #ccc;}

Rezultat jest następujący:

Obrazek: Image:Blue-rule.png
-

Marginesy zewnętrzne i wewnętrzne

-

Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.

-

Użyj własności margin lub padding, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.

-

Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).

-

Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.

-

Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.

- -
Przykład
Ta reguła oznacza akapity z klasą remark poprzez dodanie czerwonej ramki wokół nich.

Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.

Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:

p.remark {

 border: 2px solid red;
- padding: 4px;
- margin-left: 24px;
- }
-

Wynik wygląda tak:

Oto zwykły akapit.

A to akapit z klasą remark.
- -
Więcej szczegółów
Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany.

Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.

Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.

Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału model blokowy.
-

Zadanie: Dodawanie ramek

-

Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:

-
-

h3 {border-top: 1px solid gray;}

-
-

Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:

-
-

li {

-
 list-style: lower-roman;
- margin-bottom: 8px;
- }
-
-
-

Odśwież okno przeglądarki, aby zobaczyć wynik:

- -

(A) Oceany

  • Arktyczny
  • Atlantycki
  • Spokojny
  • Indyjski
  • Południowy

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum
-

 

- -
Wyzwanie
Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

. . .

(Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)
-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

-

Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: Układ

-

{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "fr": "fr/CSS/Premiers_pas/Bo\u00eetes", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}

diff --git "a/files/pl/web/css/na_pocz\304\205tek/czym_jest_css/index.html" "b/files/pl/web/css/na_pocz\304\205tek/czym_jest_css/index.html" deleted file mode 100644 index 4502cad557..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/czym_jest_css/index.html" +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Czym jest CSS -slug: Web/CSS/Na_początek/Czym_jest_CSS -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -

 

- -

Ta strona opisuje, czym jest CSS.

- -

Informacja: Czym jest CSS?

- -

CSS jest językiem określającym, jak dokumenty mają być prezentowane użytkownikowi.

- -

Dokumentjest to kolekcja informacji ułożona w strukturę przy użyciujęzyka znaczników.

- - - - - - - - -
Przykłady
-
    -
  • Strona, taka jak ta, jest dokumentem.
    - Informacje, które widzisz na stronie, zazwyczaj są ułożone w strukturę przy użyciu języka znaczników HTML (HyperText Markup Language).
    • -
- -
    -
  • Okienko dialogowe w aplikacji Mozilli jest dokumentem.
    - Kontrolki interfejsu użytkownika, które widzisz w okienku dialogowym Mozilli, są ułożone w strukturę przy użyciu języka znaczników XUL (XML User-interface Language).
    • -
-
- -

W tym kursie bloki oznaczone Więcej szczegółów, jak poniższy, zawierają informacje, których znajomość nie jest wymagana do dalszego korzystania z kursu. Jeżeli się spieszysz, możesz spokojnie pominąć te bloki i na przykład wrócić do nich później.

- - - - - - - - -
Więcej szczegółów
-

Dokument nie jest tym samym co plik. Dokument może, ale nie musi być składowany w pliku.

- -

Na przykład dokument, który w tym momencie czytasz, nie jest zapisany w pliku. Kiedy Twoja przeglądarka prosi o stronę, serwer odpytuje bazę danych i generuje dokument, składając jego części z wielu plików i fragmentów z bazy danych. Jednak w trakcie tego kursu będziesz pracować z dokumentami składowanymi w plikach.

- -

Więcej informacji na temat dokumentów i języków znaczników znajdziesz w innych częściach tej strony — na przykład:

- - - - - - - - - - - - - - - - - - - - -
HTMLo stronach internetowych
XMLo strukturalnych dokumentach
SVGo grafice
XULo interfejsie użytkownika w Mozilli
-
- -

Prezentowaniedokumentu użytkownikowi oznacza skonwertowanie go do postaci, w jakiej będzie on przydatny użytkownikowi. Mozilla prezentuje dokumenty wizualnie — na przykład na ekranie komputera, obrazie wyświetlanym przez projektor lub wydruku.

- - - - - - - - -
Więcej szczegółów
CSS jest przeznaczony nie tylko dla przeglądarek i prezentacji graficznych. W formalnej terminologii CSS program, który prezentuje dokumenty użytkownikowi, nazywany jestagentem (ang. User Agent - UA). Przeglądarka jest tylko jednym z wielu rodzajów UA. Jednakże część pierwsza tego kursu skupia się na pracy z językiem CSS w przeglądarce. -

Formalne definicje terminologii związanej z CSS znajdziesz w Specyfikacji CSS w dziale Definicje.

-
- -

Zadanie: Tworzenie dokumentu

- -

Stwórz nowy katalog, a w nim nowy plik. Ten plik będzie Twoim dokumentem.

- -

Skopiuj i wklej poniższy kod HTML. Zapisz plik pod nazwą doc1.html

- -
-
<!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
- -

Otwórz nowy panel lub nowe okno w Twojej przeglądarce i otwórz ten plik.

- -

Powinieneś zobaczyć tekst zaczynający się od pogrubionych liter:

- - - - - - - -
Cascading Style Sheets
- -

To, co widzisz w przeglądarce, może się trochę różnić z powodu ustawień przeglądarki oraz tego wiki. Jeżeli istnieją jakieś różnice w kroju pisma, odstępach i kolorach, które widzisz, nie jest to żaden problem.

- -

Co dalej?

- -

Jeżeli masz problemy ze zrozumieniem tej strony lub chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

- -

Twój dokument nie używa jeszcze CSS. Na następnej stronie zaczniesz używać CSS do określania stylów: Po co używać CSS

- -

{{ languages( { "en": "en/CSS/Getting_Started/What_is_CSS", "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS" } ) }}

diff --git "a/files/pl/web/css/na_pocz\304\205tek/czytelny_css/index.html" "b/files/pl/web/css/na_pocz\304\205tek/czytelny_css/index.html" deleted file mode 100644 index 0e62945cbd..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/czytelny_css/index.html" +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Czytelny CSS -slug: Web/CSS/Na_początek/Czytelny_CSS -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

-

Ta strona opisuje styl i gramatykę języka CSS. -

Zmienisz wygląd swojego pliku CSS, aby był bardziej czytelny. -

-

Informacja: Czytelny CSS

-

Możesz dodać białe znaki i komentarze do swojego arkusza stylów, aby uczynić go bardziej czytelnym. -Możesz też grupować selektory razem, kiedy te same reguły stylów dotyczą wybranych elementów w różny sposób. -

-

Białe znaki

-

Białe znaki to spacje, tabulatory i nowe linie. -Dzięki białym znakom arkusz stylów będzie bardzie czytelny. -

Twój przykładowy plik CSS zawiera w tej chwili jedną regułę na linię i prawie minimalną liczbę białych znaków. W złożonych arkuszach stylów taki układ byłby bardzo trudny do czytania, utrudniając zarządzanie arkuszem. -

Styl, który wybierzesz, zazwyczaj zależy od prywatnych przyzwyczajeń, ale Twój arkusz stylów może być częścią projektu, którym zajmuje się więcej osób. W takiej sytuacji przyjmuje się pewne konwencje. -

- - -
Przykłady -
Niektórzy ludzie lubią zwięzły układ, którego używaliśmy do tej pory, dzieląc linię jedynie wtedy, kiedy staje się ona bardzo długa: -
-.carrot {color: orange; text-decoration: underline; font-style: italic;}
-
-

Inni wolą układać jedną własność-wartość na linię: -

-
-

.carrot -{ -color: orange; -text-decoration: underline; -font-style: italic; -} -

-
-

Inni używają wcięć — często używane są dwie spacje, cztery spacje lub tabulator: -

-
-

.carrot { -

-
 color: orange;
- text-decoration: underline;
- font-style: italic;
-
-

} -

-
-

Inni wolą ustawiać wszystko względem pionowej osi (jednak taki układ jest trudny w zarządzaniu): -

-
-

.carrot -

-
   {
-   color           : orange;
-   text-decoration : underline;
-   font-style      : italic;
-   }
-
-
-

Tworząc wcięcia jedni wolą używać tabulatorów, inni zaś tylko spacji. -

-
-

Komentarze

-

Komentarze w CSS zaczynają się od /*, a kończą się na */. -

Możesz używać komentarzy, aby komentować elementy swojego arkusza stylów oraz do wykomentowywania części aktualnie nieużywanych. -

Aby wykomentować części arkusza stylów, umieść tę część w komentarzu, a przeglądarka ją zignoruje. -Należy uważać, gdzie zaczyna, a gdzie kończy się komentarz. -Dalsza część arkusza stylów musi mieć poprawną składnię. -

- - -
Przykład -
-

/* styl dla początkowej litery C w pierwszym paragrafie */ -.carrot { -

-
 color:            orange;
- text-decoration:  underline;
- font-style:       italic;
- }
-
-
-
-

Grupy Selektorów

-

Kiedy wiele selektorów ma ten sam styl, możesz określić grupę selektorów, oddzielając je przecinkami. -Deklaracja zostanie zastosowana do wszystkich wybranych elementów. -

W innych miejscach arkusza stylów możesz określić te same selektory ponownie, aby nadać im indywidualne reguły. -

- - -
Przykład -
Ta reguła sprawia, że elementy H1, H2 oraz H3 są tego samego koloru. -

Wygodnie jest określić kolor tylko w jednym miejscu, na wypadek, gdyby miał być zmieniany. -

-
-

/* kolory nagłówków */ -h1, h2, h3 {color: navy;} -

-
-
-

Zadanie: Dodawanie komentarzy i poprawianie układu

-

Wyedytuj swój plik CSS i upewnij się, że posiada on te reguły (w dowolnej kolejności): -

-
-

strong {color: red;} -.carrot {color: orange;} -.spinach {color: green;} -

-
  1. first {font-style: italic;} -
-

p {color: blue;} -

-
-

Spraw, aby stał się bardziej czytelny, zmieniając kolejność w sposób, który uznasz za logiczny oraz dodając białe znaki i komentarze w taki sposób, jaki uznasz za najlepszy. -

Zapisz ten plik i odśwież stronę w przeglądarce, aby upewnić się, że Twoje zmiany nie wpłynęły na działanie arkusza stylów: -

- - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-


-

- - -
Wyzwanie -
Wykomentuj część arkusza stylów bez zmieniania czegokolwiek poza tym, aby pierwsza litera dokumentu była czerwona: - - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-

(Jest więcej niż jeden sposób, aby to zrobić.) -

-
-


-

-

Co dalej?

-

Twój przykładowy dokument używa kursywy oraz podkreślenia. -Następna strona omawia kolejne sposoby na określanie wyglądu tekstu w dokumencie: -Style tekstowe -

-
-
-{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "it": "it/Conoscere_i_CSS/CSS_leggibili", "ja": "ja/CSS/Getting_Started/Readable_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/grafika_svg/index.html" "b/files/pl/web/css/na_pocz\304\205tek/grafika_svg/index.html" deleted file mode 100644 index 1581fbdcd8..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/grafika_svg/index.html" +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: Grafika SVG -slug: Web/CSS/Na_początek/Grafika_SVG -tags: - - 'CSS:Na_początek' -translation_of: Web/SVG/Tutorial/SVG_and_CSS ---- -

-

Ta strona ilustruje specjalny język do tworzenia grafiki: SVG. -

Stworzysz prostą demonstrację, która działa w przeglądarce Mozilli z obsługą SVG.

-

Informacja: SVG

-

SVG (Skalowalna Grafika Wektorowa) jest bazującym na XML-u językiem do tworzenia grafiki. -

Może być używana do tworzenia statycznych obrazków, ale także animacji i interfejsów użytkownika. -

Podobnie jak inne bazujące na XML-u języki, SVG obsługuje arkusze stylów CSS, dzięki czemu możesz oddzielić styl grafiki od jej zawartości. -

Ponadto, arkusz stylów, którego używasz w innych językach znaczników dokumentu, może wskazywać adres grafiki SVG tam, gdzie potrzebny jest obrazek. -Na przykład, arkusz stylów, którego używasz w dokumencie HTML może wskazywać na adres URL grafiki SVG jako wartość własności background. -

- - -
Więcej szczegółów -
W trakcie pisania tego kursu (połowa 2005) tylko najnowsze wydania przeglądarek Mozilli posiadają wbudowaną obsługę SVG. -

Możesz dodać wsparcie dla SVG do innych wersji instalując wtyczkę taką, jak ta wydana przez Adobe. -

Aby dowiedzieć się więcej o SVG w Mozilli, zajrzyj na stronę SVG w tym wiki. -

-
-

Zadanie: Demonstracja SVG

-

Stwórz nowy dokument SVG jako czysty plik tekstowy, doc8.svg. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
<?xml version="1.0" standalone="no"?>
-
-<?xml-stylesheet type="text/css" href="style8.css"?>
-
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg width="600px" height="600px" viewBox="-300 -300 600 600"
-  xmlns="http://www.w3.org/2000/svg" version="1.1"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-
-<title>SVG demonstration</title>
-<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
-
-<defs>
-  <g id="segment" class="segment">
-    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
-    </g>
-  <g id="quadrant">
-    <use xlink:href="#segment"/>
-    <use xlink:href="#segment" transform="rotate(18)"/>
-    <use xlink:href="#segment" transform="rotate(36)"/>
-    <use xlink:href="#segment" transform="rotate(54)"/>
-    <use xlink:href="#segment" transform="rotate(72)"/>
-    </g>
-  <g id="petals">
-    <use xlink:href="#quadrant"/>
-    <use xlink:href="#quadrant" transform="rotate(90)"/>
-    <use xlink:href="#quadrant" transform="rotate(180)"/>
-    <use xlink:href="#quadrant" transform="rotate(270)"/>
-    </g>
-  <radialGradient id="fade" cx="0" cy="0" r="200"
-      gradientUnits="userSpaceOnUse">
-    <stop id="fade-stop-1" offset="33%"/>
-    <stop id="fade-stop-2" offset="95%"/>
-    </radialGradient>
-  </defs>
-
-<text id="heading" x="-280" y="-270">
-  SVG demonstration</text>
-<text  id="caption" x="-280" y="-250">
-  Move your mouse pointer over the flower.</text>
-
-<g id="flower">
-  <circle id="overlay" cx="0" cy="0" r="200"
-    stroke="none" fill="url(#fade)"/>
-  <use id="outer-petals" xlink:href="#petals"/>
-  <use id="inner-petals" xlink:href="#petals"
-    transform="rotate(9) scale(0.33)"/>
-  </g>
-
-</svg>
-
-

Stwórz nowy plik CSS, style8.css. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
/*** SVG demonstration ***/
-
-/* page */
-svg {
-  background-color: beige;
-  }
-
-#heading {
-  font-size: 24px;
-  font-weight: bold;
-  }
-
-#caption {
-  font-size: 12px;
-  }
-
-/* flower */
-#flower:hover {
-  cursor: crosshair;
-  }
-
-/* gradient */
-#fade-stop-1 {
-  stop-color: blue;
-  }
-
-#fade-stop-2 {
-  stop-color: white;
-  }
-
-/* outer petals */
-#outer-petals {
-  opacity: .75;
-  }
-
-#outer-petals .segment-fill {
-  fill: azure;
-  stroke: lightsteelblue;
-  stroke-width: 1;
-  }
-
-#outer-petals .segment-edge {
-  fill: none;
-  stroke: deepskyblue;
-  stroke-width: 3;
-  }
-
-#outer-petals .segment:hover > .segment-fill {
-  fill: plum;
-  stroke: none;
-  }
-
-#outer-petals .segment:hover > .segment-edge {
-  stroke: slateblue;
-  }
-
-/* inner petals */
-#inner-petals .segment-fill {
-  fill: yellow;
-  stroke: yellowgreen;
-  stroke-width: 1;
-  }
-
-#inner-petals .segment-edge {
-  fill: none;
-  stroke: yellowgreen;
-  stroke-width: 9;
-  }
-
-#inner-petals .segment:hover > .segment-fill {
-  fill: darkseagreen;
-  stroke: none;
-  }
-
-#inner-petals .segment:hover > .segment-edge {
-  stroke: green;
-  }
-
-

Otwórz ten dokument w swojej przeglądarce z obsługą SVG. Przesuwaj kursor myszy nad grafiką. -

To wiki nie obsługuję SVG na stronach, więc nie jest możliwe pokazanie demonstracji. -Grafika wygląda mniej więcej tak: -

- - -
Demonstracja SVG -
-

Uwagi dotyczące tej demonstracji: -

- -


-

- - -
Wyzwanie -
Zmień ten arkusz stylów, aby wewnętrzne płatki zmieniały się wszystkie na różowy, kiedy wskaźnik myszy znajduje się nad jednym z nich, bez zmiany działania zewnętrznych płatków. -
-


-

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie Dyskusji. -

W tej demonstracji Twoja przeglądarka, obsługująca SVG, umie już wyświetlić elementy SVG. -Arkusz stylów modyfikuje tylko sposób wyświetlania elementów. -Tak samo dzieje się z dokumentami HTML i XUL. -Możesz też używać CSS-a w dokumentach XML ogólnego przeznaczenia, gdzie nie istnieje domyślny sposób wyświetlania elementów. -Następna strona omawia ten temat: -Dane XML -

{{ languages( { "en": "en/CSS/Getting_Started/SVG_graphics", "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pt": "pt/CSS/Como_come\u00e7ar/Gr\u00e1ficos_SVG" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/index.html" "b/files/pl/web/css/na_pocz\304\205tek/index.html" deleted file mode 100644 index 22b975504c..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Na początek -slug: Web/CSS/Na_początek -tags: - - CSS - - 'CSS:Na_początek' - - Wszystkie_kategorie -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

 

-

Wprowadzenie

-

Ten kurs wprowadza użytkownika w świat kaskadowych arkuszy stylów (CSS).

-

Pokaże Ci on, jak korzystać z podstawowych funkcji CSS przy użyciu praktycznych przykładów, które możesz sprawdzić na swoim komputerze. Kurs składa się z dwóch części.

- - -

Ten kurs bazuje na specyfikacji CSS 2.1.

-

Kto może skorzystać z tego kursu?

-

Kurs jest przeznaczony dla początkujących, ale może być też przydatny dla osób mających już pewną wiedzę o CSS.

-

Jeżeli jesteś początkujący, skorzystaj z pierwszej części tego kursu, by zrozumieć działanie CSS i nauczyć się go używać. Potem przeczytaj część drugą, aby zrozumieć zakres wykorzystania CSS w produktach Mozilli.

-

Jeżeli znasz już trochę CSS, możesz pominąć części kursu, które omawiają znane Ci tematy i skupić się na tych, które są dla Ciebie nowe.

-

Jeżeli znasz dobrze CSS, ale nie w Mozilli, przejdź do części drugiej.

-

Czego potrzebujesz, zanim zaczniesz?

-

Aby móc swobodnie korzystać z tego kursu, potrzebujesz edytora plików tekstowych oraz przeglądarkę Mozilla (Firefox lub Mozilla Suite) i powinieneś umieć korzystać z obu tych produktów w podstawowym zakresie.

-

Jeżeli nie chcesz edytować plików, możesz po prostu czytać kurs i patrzeć na obrazki, ale taka metoda nauki jest znacznie mniej efektywna.

-

Niektóre części tego kursu mogą wymagać innych aplikacji Mozilli. Części te są opcjonalne. Jeżeli nie chcesz pobierać innych aplikacji Mozilli, po prostu pomiń je.

-

Uwaga:  CSS umożliwia pracę z kolorami, więc niektóre części kursu zależą od kolorów. Możesz z nich wygodnie korzystać, jeśli posiadasz kolorowy wyświetlacz i prawidłowo rozróżniasz kolory.

-

Jak korzystać z tego kursu

-

Aby korzystać z tego kursu, przeczytaj uważnie wszystkie strony po kolei. Jeżeli pominiesz jedną stronę, możesz mieć trudności z rozumieniem dalszych.

-

Na każdej stronie sekcja Informacja opisuje, jak działa CSS. Dzięki sekcji Zadanie będziesz mógł wypróbować użycie CSS na swoim komputerze.

-

Aby sprawdzić, jak dobrze rozumiesz treść, podejmij wyzwanie znajdujące się na dole każdej strony. Rozwiązania niektórych wyzwań są prezentowane na późniejszych stronach kursu.

-

Aby lepiej zrozumieć CSS, przeczytaj informacje znajdujące się w boksach oznaczonych Więcej szczegółów. Użyj znajdujących się tam odnośników, aby dowiedzieć się więcej ze specyfikacji CSS.

-

Kurs – część pierwsza

-

Podstawowy kurs CSS, krok po kroku.

-
    -
  1. Czym jest CSS
    2. -
  2. Po co używać CSS
    3. -
  3. Jak działa CSS
    4. -
  4. Kaskadowość i dziedziczenie
    5. -
  5. Selektory
    6. -
  6. Czytelny CSS
    7. -
  7. Style tekstowe
    8. -
  8. Kolor
    9. -
  9. Treść
    10. -
  10. Listy
    11. -
  11. Bloki
    12. -
  12. Układ
    13. -
  13. Tabele
    14. -
  14. Media
    15. -
-

Kurs – część druga

-

Przykłady wykorzystania CSS w Mozilli.

-
    -
  1. JavaScript
    2. -
  2. Wiązania XBL
    3. -
  3. XUL-owe interfejsy użytkownika
    4. -
  4. Grafika SVG
    5. -
  5. Dane XML
    6. -
-

{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "zh-cn": "cn/CSS/\u5f00\u59cb", "pt": "pt/CSS/Como_come\u00e7ar" } ) }}

diff --git "a/files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" "b/files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" deleted file mode 100644 index 8ccbd65011..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Jak działa CSS -slug: Web/CSS/Na_początek/Jak_działa_CSS -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

-

Ta strona wyjaśnia, jak działa CSS w przeglądarce. -Przeanalizujesz przykładowy dokument, poznając szczegóły jego stylów. -

-

Informacja: Jak działa CSS

-

Kiedy Mozilla wyświetla dokument, musi połączyć treść dokumentu z jego informacjami o stylu. Tak więc dzieli ona proces na dwa etapy: -

- - -

Język znaczników używa znaczników do opisywania struktury dokumentu. Znacznik może być kontenerem, zawierającym inne znaczniki. -

DOM posiada strukturę drzewiastą. Każdy znacznik i fragment tekstowy w języku znaczników staje się węzłem w strukturze drzewiastej. Węzły DOM nie są kontenerami. W zamian za to mogą posiadać węzły rodziców i dzieci. -

Węzły, które odpowiadają znacznikom, znane są także jako elementy. -

- - -
Przykład -
W Twoim przykładowym dokumencie znacznik <P> i jego znacznik </P> tworzą kontener: -
-
<P>
-  <STRONG>C</STRONG>ascading
-  <STRONG>S</STRONG>tyle
-  <STRONG>S</STRONG>heets
-</P>
-
-
-

W DOM odpowiadający węzeł P jest rodzicem. -Jego dzieci to węzły STRONG oraz węzły tekstowe. -Węzły STRONG same są rodzicami posiadającymi węzły tekstowe jako swoje dzieci: -

-
-

P -├─STRONG -│ │ -│ └─"C" -│ -├─"ascading" -│ -├─STRONG -│ │ -│ └─"S" -│ -├─"tyle" -│ -├─STRONG -│ │ -│ └─"S" -│ -└─"heets" -

-
-
-

Zrozumienie DOM pomaga w tworzeniu, debugowaniu i zarządzaniu CSS, ponieważ DOM jest punktem, w którym łączona jest treść dokumentu ze stylami CSS. -

-

Zadanie: Analiza DOM

-

Do analizy DOM potrzebny jest specjalny program. -Służy do tego na przykład Inspektor DOM Mozilli. -

Użyj przeglądarki Mozilla do otworzenia przykładowego dokumentu. -

Z paska menu przeglądarki wybierz Narzędzia – Inspektor DOM lub Narzędzia – Programowanie WWW – Inspektor DOM. -

- - -
Więcej szczegółów -
Jeżeli Twoja przeglądarka Mozilli nie posiada Inspektora DOM, możesz zainstalować przeglądarkę ponownie, zaznaczając przy instalacji komponent narzędzi programistycznych. Potem wróć do tego kursu. -

DevmoPL: Możesz też zainstalować DOMi jako rozszerzenie -

Jeżeli nie chcesz instalować Inspektora DOM, możesz pominąć ten rozdział i przejść do następnej strony. Pominięcie tej sekcji nie wpłynie na resztę kursu. -

-
-

W Inspektorze DOM rozwiń węzły dokumentu, klikając na strzałki. -

Notka:  Formatowanie spacjami dokumentu HTML spowoduje, że pojawią się puste węzły, które możesz zignorować. -

Część wyniku może wyglądać tak: -

- - -
-

│ -▼╴P -│ │ -│ ▼╴STRONG -│ │ └#text -│ ├╴#text -│ ▶╴STRONG -│ │ -

-
-
-

Kiedy wybierasz jakikolwiek węzeł, możesz dowiedzieć się o nim więcej, używając prawej kolumny Inspektora DOM. -Na przykład po wybraniu węzła tekstowego Inspektor DOM pokazuje jego zawartość w prawej kolumnie. -

Kiedy zaznaczasz węzeł elementu, Inspektor DOM analizuje go i podaje w prawym panelu ogromną liczbę informacji. Informacje o stylu są tylko częścią informacji, jakie można tam znaleźć. -

- - -
Wyzwanie -
W Inspektorze DOM wybierz węzeł STRONG. -

Skorzystaj z prawego panelu Inspektora, aby dowiedzieć się, gdzie kolor węzła ustawiony został na czerwony i gdzie jego wygląd jest ustawiany na grubszy niż normalny tekst. -

-
-


-

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

Jeżeli podjąłeś(podjęłaś) wyzwanie, widzisz, że informacje o stylu z wielu miejsc wiążą się, tworząc końcowy styl elementu. -

Następna strona wyjaśnia więcej na temat tych interakcji: -Kaskadowość i dziedziczenie -

{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "it": "it/Conoscere_i_CSS/Come_funzionano_i_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha", "zh-cn": "cn/CSS/Getting_Started/How_CSS_works" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/javascript/index.html" "b/files/pl/web/css/na_pocz\304\205tek/javascript/index.html" deleted file mode 100644 index 128ef84501..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/javascript/index.html" +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: JavaScript -slug: Web/CSS/Na_początek/JavaScript -tags: - - 'CSS:Na_początek' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

-

Jest to druga część tego kursu. Część II zawiera trochę przykładów pokazujących zakres użycia CSS w Mozilli. -

Każda strona Części II ilustruje jak CSS współpracuje z innymi technologiami. -Te strony nie zostały stworzone po to, aby nauczyć Cię korzystać z tych technologii. -Jeśli chcesz je poznać, skorzystaj z innych kursów. -

Natomiast, te strony zostały stworzone po to, aby pokazać wiele możliwości wykorzystania CSS. -Aby używać tych stron, powinieneś(aś) znać CSS, ale nie musisz znać innych technologii. -

-

Informacja: JavaScript

-

JavaScript jest językiem programowania. -Duża część kodu aplikacji Mozilla (na przykład przeglądarki) jest napisana w JavaScripcie. -

JavaScript może współpracować z arkuszami stylów, pozwalając Ci pisać aplikacje, które dynamicznie zmieniają styl dokumentu. -

Istnieją na to trzy sposoby: -

- - - -
Więcej szczegółów -
Aby dowiedzieć się więcej o JavaScripcie w Mozilli, zajrzyj na stronę JavaScript na tym wiki. -
-

Zadanie: Demonstracja wykorzystania Javascript-u

-

Stwórz nowy dokument HTML, doc5.html. -Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style5.css">
-<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
-</HEAD>
-
-<BODY>
-<H1>JavaScript sample</H1>
-
-<DIV id="square"></DIV>
-
-<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON>
-
-</BODY>
-</HTML>
-
-

Stwórz nowy plik CSS, style5.css. -Skopiuj i wklej do niego poniższy kod: -

-
/*** JavaScript demonstration ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-  }
-
-button {
-  padding: .5em 2em;
-  }
-
-

Stwórz nowy plik tekstowy, script5.js. -Skopiuj i wklej do niego poniższy kod: -

-
// JavaScript demonstration
-function doDemo (button) {
-  var square = document.getElementById("square")
-  square.style.backgroundColor = "#fa4"
-  button.setAttribute("disabled", "true")
-  setTimeout(clearDemo, 2000, button)
-  }
-
-function clearDemo (button) {
-  var square = document.getElementById("square")
-  square.style.backgroundColor = "transparent"
-  button.removeAttribute("disabled")
-  }
-
-

Otwórz dokument w swojej przeglądarce i naciśnij przycisk. -

To wiki nie obsługuje JavaScriptu na stronach, więc nie jest możliwe zademonstrowanie działania tego kodu tutaj. -Wygląda to mniej więcej jak poniżej, przed i po naciśnięciu przycisku: -

- - -
- - -

JavaScript demonstration

-
-
-
-		 - - -

JavaScript demonstration

-
-
-
-
-

Uwagi dotyczące demonstracji: -

- - - -
Wyzwanie -
Zmień skrypt tak, aby obiekt square skakał w prawo o 20 em, kiedy jego kolor się zmienia, i skakał z powrotem, kiedy kolor wraca do podstawowego. -
-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

W tej demonstracji dokument HTML posiada odnośnik do skryptu, mimo że używa go tylko element przycisku. -Mozilla rozszerza CSS, aby umożliwić wiązanie kodu JavaScript (oraz treści i innych arkuszy stylów) z wybranymi elementami. -Następna strona opisuje to: -Wiązania XBL -

{{ languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pt": "pt/CSS/Como_come\u00e7ar/JavaScript" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/kaskadowo\305\233\304\207_i_dziedziczenie/index.html" "b/files/pl/web/css/na_pocz\304\205tek/kaskadowo\305\233\304\207_i_dziedziczenie/index.html" deleted file mode 100644 index f100424b2f..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/kaskadowo\305\233\304\207_i_dziedziczenie/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Kaskadowość i dziedziczenie -slug: Web/CSS/Na_początek/Kaskadowość_i_dziedziczenie -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

-

Ta strona tłumaczy jak arkusze stylów oddziaływują w kaskadzie, oraz jak elementy dziedziczą style od swoich rodziców. -

Nauczysz się zmieniać styl wielu elementów dokumentu jednym ruchem dzięki dziedziczeniu. -

-

Informacja: Kaskadowość i dziedziczenie

-

Ostateczny styl elementu może być określony w wielu różnych miejscach, które mogą na siebie oddziaływać w złożony sposób. -Złożone interakcje czynią CSS potężnym, ale także mogą uczynić go niezrozumiałym i trudnym do debugowania. -

Trzy główne źródła informacji o stylu tworzą kaskadę. -Są to: -

- -

Styl użytkownika modyfikuje domyślny styl przeglądarki. -Styl autora dokumentu modyfikuje ten styl jeszcze bardziej. -W tym kursie Ty jesteś autorem przykładowego dokumentu i pracujesz tylko ze stylem autora. -

- - -
Przykład -
Kiedy czytasz ten dokument w przeglądarce Mozilla, część stylu, który widzisz, pochodzi z domyślnego stylu przeglądarki dla HTML-a. -

Część tego stylu pochodzi z Twoich ustawień przeglądarki w Opcjach lub z pliku userContent.css w profilu przeglądarki. -

Część tego stylu pochodzi z arkusza stylów podpiętego do tego dokumentu przez serwer wiki. -

-
-

Kiedy otwierasz przykładowy dokument w swojej przeglądarce, elementy STRONG są pogrubione w stosunku do reszty tekstu. Dzieje się tak, ponieważ zostało to ustawione w domyślnym stylu przeglądarki dla HTML-a. -

Elementy STRONG są czerwone. To ustawienie pochodzi z Twojego arkusza stylów. -

Elementy STRONG dziedziczą też większość ustawień stylu elementu P, ponieważ są jego dziećmi. W ten sam sposób element P dziedziczy wiele ustawień ze stylu elementu BODY. -

Dla stylów w kaskadzie najważniejsze są style autora strony, potem czytelnika, a na końcu ustawienia domyślne przeglądarki. -

Dla dziedziczonych stylów własne style ich dzieci mają wyższy priorytet od stylu dziedziczonego po rodzicu. -

Nie są to jedyne istniejące priorytety. Dalsze strony tego kursu wyjaśnią więcej. -

- - -
Więcej szczegółów -
CSS daje też czytelnikowi możliwość nadpisania stylów autora dokumentu przez użycie słowa kluczowego !important. -

Oznacza to, że jako autor dokumentu, nie możesz nigdy dokładnie przewidzieć, co czytelnicy zobaczą. -

Jeżeli chcesz poznać wszystkie szczegóły kaskadowości i dziedziczenia, zobacz Przypisywanie wartości własności, Kaskadowość oraz dziedziczenie w specyfikacji CSS. -

-
-

Zadanie: Używanie dziedziczenia

-

Wyedytuj Twój przykładowy plik CSS. -

Dodaj tę linię poprzez skopiowanie i wklejenie jej. -Nie ma żadnego znaczenia, czy dodasz ją pod czy nad linią, która już tam jest. -Jednakże dodawanie jej na górze jest bardziej logiczne, ponieważ w Twoim dokumencie element P jest rodzicem elementu STRONG: -

-
p {color: blue; text-decoration: underline;}
-
-

Teraz odśwież okno przeglądarki, aby obejrzeć efekt na przykładowym dokumencie. -Podkreślenie wpłynęło na cały tekst paragrafu, włączając w to początkowe litery. -Elementy STRONG dziedziczyły styl podkreślenia po swoim rodzicu, elemencie P. -

Ale elementy STRONG nadal są czerwone. Kolor czerwony jest ich własnym stylem, ma zatem wyższy priorytet niż niebieski kolor ich rodzica, elementu P. -

- - -
- - -
Przed -
Cascading Style Sheets -
-		 - - -
Po -
Cascading Style Sheets -
-
-


-

- - -
Wyzwanie -
Zmień swój arkusz stylów, aby tylko czerwone litery były podkreślone: - - -
Cascading Style Sheets -
-
-


-

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

Twój przykładowy arkusz stylów opisuje style dla znaczników P oraz STRONG, -zmieniając styl odpowiednich elementów w Twoim dokumencie. -Następna strona opisuje, jak określić styl w bardziej selektywny sposób: -Selektory -

{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "it": "it/Conoscere_i_CSS/Cascata_ed_ereditariet\u00e0", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a", "zh-cn": "cn/CSS/Getting_Started/Cascading_and_inheritance" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/kolor/index.html" "b/files/pl/web/css/na_pocz\304\205tek/kolor/index.html" deleted file mode 100644 index db5bfd5e7d..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/kolor/index.html" +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: Kolor -slug: Web/CSS/Na_początek/Kolor -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -

-

Ta strona dokładniej opisuje sposoby pracy z kolorami w CSS-ie. -

W swoim przykładowym arkuszu stylów, dodasz kolory tła. -

-

Informacja: Kolor

-

Do tej pory w tym kursie używałeś(aś) ograniczonej liczby nazwanych kolorów. -CSS 2 definiuje 17 nazwanych kolorów. -Niektóre z nazw mogą nie być tym, czego się spodziewasz: -

- - - - - - - - -
  black   gray   silver   white -
podstawowe red   lime   blue -
drugorzędne yellow   aqua   fuchsia -
 maroon  orange  olive  purple  green  navy  teal -
-


-

- - -
Więcej szczegółów -
Twoja przeglądarka może obsługiwać znacznie więcej nazwanych kolorów, na przykład: - - -
dodgerblue  peachpuff   tan   firebrick   aquamarine -
-

Szczegółową listę znajdziesz w dokumentacji CSS 3, w module Kolor, sekcji -słowa kluczowe kolorów w SVG. Unikaj używania nazwanych kolorów, których przeglądarka osoby czytającej Twój dokument może nie obsługiwać. -

-
-

Aby móc korzystać w większej palety kolorów, określ czerwony, zielony i niebieski komponent koloru, z którego chcesz skorzystać, używając znaku "hash" oraz trzech heksadecymalnych liczb w zakresie od 0 – 9, a – f. Litery a – f reprezentują wartości 10 – 15. -

- - - - - - - - - - -
black  #000 -
pure red   #f00 -
pure green   #0f0 -
pure blue   #00f -
white   #fff -
-

Aby skorzystać z pełnej palety, określ dwie heksadecymalne liczby na każdy komponent: -

- - - - - - - - - - -
black   #000000 -
pure red   #ff0000 -
pure green   #00ff00 -
pure blue   #0000ff -
white   #ffffff -
-

Zazwyczaj te sześcioliczbowe, heksadecymalne kody możesz pobrać z Twojego programu graficznego lub innego narzędzia. -

- - - - -
Przykłady -
Odrobina praktyki i w większości wypadków możesz modyfikować trzyliczbowe kolory ręcznie: - - - - - - - - - - - - -
Zacznij od czystej czerwieni:  #f00 -
Aby ją rozjaśnić, dodaj trochę zielonego i niebieskiego:  #f77 -
Aby kolor był bardziej pomarańczowy, dodaj trochę zielonego:  #fa7 -
Aby kolor był ciemniejszy, zmniejsz wartość wszystkich komponentów:  #c74 -
Aby zmniejszyć nasycenie, zmniejsz różnice między wartościami komponentów:  #c98 -
Jeśli ustawisz jednakową wartość wszystkich komponentów, uzyskasz kolor szary:  #ccc -
-
Aby uzyskać pastelowy odcień, taki jak blady niebieski: - - - - -
Zacznij od białego:  #fff -
Zredukuj trochę wartości komponentów innych, niż niebieski:  #eef -
-
-


-

- - -
Więcej szczegółów -
Możesz także określić kolor, używając decymalnych wartości RGB w zakresie 0 – 255, lub procentów. -

Na przykład to jest kasztanowaty (ciemnoczerwony): -

-
-rgb(128, 0, 0)
-
-

Więcej szczegółów na temat określania kolorów znajdziesz w sekcji -Kolory w specyfikacji CSS. -

Więcej informacji na temat dopasowania kolorów do kolorów systemowych, jak Menu czy ThreeDFace, znajdziesz w: -CSS2 Kolory Systemowe specyfikacji CSS. -

-
-


-

-

Własności kolorów

-

Korzystałeś(aś) już z własności color dla tekstu. -

Możesz też użyć własności background-color, aby zmienić tła elementów. -

Jeżeli ustawisz wartość tła na transparent, będzie ono przezroczyste i pokaże tło elementu rodzica. -

- - -
Przykład -
Boksy Przykład w tym kursie używają bladożółtego tła: -
-background-color: #fffff4;
-
-

Boksy Więcej szczegółów używają bladoszarego: -

-
-background-color: #f4f4f4;
-
-
-

Zadanie: Korzystanie z kodów kolorów

-

Wyedytuj swój plik CSS. -

Wykonaj zmiany oznaczone tutaj pogrubieniem, aby nadać pierwszym literom bladoniebieskie tło. -(Styl i komentarze w Twoim pliku będą prawdopodobnie inne niż pokazane tutaj. -Zachowaj styl i komentarze w stylu jaki wybrałeś(aś)). -

-
-
/*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphs */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* initial letters */
-strong {
- color: red;
- background-color: #ddf;
- font: 200% serif;
- }
-
-.carrot {color: red;}
-.spinach {color: green;}
-
-
-

Odśwież okno przeglądarki, aby zobaczyć wynik: -

- - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-


-

- - -
Wyzwanie -
W swoim pliku CSS zmień wszystkie nazwy kolorów na 3-cyfrowe kody kolorów, tak, żeby rezultat pozostał taki sam. -

(To nie jest do końca możliwe, ale możesz być blisko ideału. -Aby uzyskać dokładnie taki efekt, potrzebujesz 6-cyfrowych kodów oraz musisz zajrzeć do specyfikacji CSS lub użyć narzędzia graficznego, aby znaleźć odpowiednie kody). -

-
-


-

-

Co dalej?

-

Twój przykładowy dokument i przykładowy arkusz stylów ściśle rozdzielają treść od stylu. -

Następna strona wyjaśnia, jak robić wyjątki od tego rozdziału: -Treść -

-
-
-{{ languages( { "en": "en/CSS/Getting_Started/Color", "fr": "fr/CSS/Premiers_pas/Couleurs", "it": "it/Conoscere_i_CSS/Colori", "ja": "ja/CSS/Getting_Started/Color", "pt": "pt/CSS/Como_come\u00e7ar/Cor" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/listy/index.html" "b/files/pl/web/css/na_pocz\304\205tek/listy/index.html" deleted file mode 100644 index 64f4218a9d..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/listy/index.html" +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: Listy -slug: Web/CSS/Na_początek/Listy -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

-

Ta strona opisuje jak możesz użyć CSS-a do określania wyglądu list. -

Stworzysz nowy dokument zawierający listę, oraz nowy arkusz stylów ze stylami dla niej. -

-

Informacja: Listy

-

Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony (Treść), widziałeś(aś), jak można dodać treść przed jakimś elementem, aby wyglądało to jak elementy listy. -

CSS posiada specjalne własności stworzone dla list. -Staraj się z nich korzystać, jeśli masz możliwość. -

Aby określić styl dla listy, użyj własności list-style do określenia typu znacznika. -

Selektor w regule CSS może określać elementy listy (np. LI) lub element rodzica list (np. UL), z którego elementy listy będą dziedziczyły te style. -

-

Listy nieuporządkowane (unordered lists)

-

W liście nieuporządkowanej każdy element jest oznaczony w ten sam sposób. -

W CSS występują trzy typy oznaczeń. -Wyświetlane są w następujący sposób: -

- -

Alternatywnie możesz określić URL do obrazka. -

- - -
Przykład -
Te reguły określają różne oznaczenia dla różnych klas elementów listy: -
-

li.open {list-style: circle;} -li.closed {list-style: disc;} -

-
-

Kiedy użyjesz tych klas w liście, rozdzielisz elementy otwarte i zamknięte: -

-
-

<UL> -

-
 <LI class="open">Lorem ipsum</LI>
- <LI class="closed">Dolor sit</LI>
- <LI class="closed">Amet consectetuer</LI>
- <LI class="open">Magna aliquam</LI>
- <LI class="closed">Autem veleum</LI>
-
-

</UL> -

-
-

Wynik może wyglądać na przykład tak: -

- - -
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
-

Listy uporządkowane (ordered lists)

-

W przypadku list uporządkowanych każdy element listy jest osobno oznaczony, aby zaznaczyć jego pozycję w sekwencji. -

Użyj własności list-style, aby określić typ oznaczenia: -

- - - -
Przykład -
Ta reguła określa, że w bloku OL z klasą info elementy są oznaczane dużymi literami. -
-

ol.info {list-style: upper-latin;} -

-
-

Elementy LI dziedziczą ten styl: -

- - -
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
- - -
Więcej szczegółów -
Własność list-style jest własnością skrótową. W złożonych arkuszach stylów raczej będziesz wolał(a) używać osobnych własności dla osobnych wartości. Aby dowiedzieć się więcej na temat osobnych własności oraz jak CSS określa listy, zajrzyj do sekcji Listy w dokumentacji CSS. -

Jeżeli używasz języka znaczników, jak HTML, który korzysta z własnych znaczników dla list nieuporządkowanych (UL) i uporządkowanych (OL), wówczas dobrym zwyczajem jest korzystanie z nich zgodnie z przeznaczeniem. Jednakże możesz użyć CSS, aby wyświetlić UL jako posortowaną, a OL jako nieposortowaną, jeśli wolisz. -

Różne przeglądarki w różny sposób obsługują te style dla list. -Nie oczekuj, że Twój arkusz stylów zostanie wyświetlony identycznie we wszystkich. -

-
-

Liczniki

-
-

Notatka:  Niektóre przeglądarki nie obsługują liczników.

-
-

Możesz używać liczników do różnych elementów, nie tylko list. -Na przykład w niektórych dokumentacjach możesz chcieć numerować nagłówki lub paragrafy. -

Aby określić numerację, musisz zadeklarować counter z określoną nazwą. -

W którymś z elementów, zanim rozpocznie się naliczanie, zresetuj licznik, używając właściwości counter-reset i nazwą Twojego licznika. -Rodzic elementów, które liczysz, jest dobrym miejscem na reset, ale możesz użyć dowolnego elementu, który pojawia się przed elementami listy. -

W każdym elemencie, w którym licznik jest inkrementowany, dodaj właściwość counter-increment. Jako wartość podaj nazwę licznika. -

Aby wyświetlić wartość licznika, dodaj :before lub :after do selektora i użyj własności content (tak jak na poprzedniej stronie Treść). -

Jako wartość własności content wstaw counter() z nazwą swojego licznika. -Opcjonalnie określ typ. -Typy są takie same jak w sekcji 'listy uporządkowane. -

Zwykle element, który wyświetla licznik, inkrementuje go. -

- - -
Przykład -
Ta reguła inicjalizuje licznik w każdym elemencie H3 z klasą numbered: -
-

h3.numbered {counter-reset: mynum;} -

-
-

Ta reguła wyświetla i inkrementuje licznik dla każdego elementu P z klasą numbered: -

-
-

p.numbered:before { -

-
 content: counter(mynum) ": ";
- counter-increment: mynum;
- font-weight: bold;}
-
-
-

Wynik wygląda tak: -

- - -
Heading
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
- - -
Więcej szczegółów -
Nie należy używać liczników, jeśli nie masz pewności, że każdy, kto czyta Twój dokument, posiada obsługującą je przeglądarkę. -

Jeżeli możesz używać liczników, mają one tę zaletę, że określasz ich styl niezależnie od elementów listy. W powyższym przykładzie liczniki są pogrubione, a elementu listy nie. -

Możesz też używać liczników w bardziej złożony sposób — na przykład do numerowania sekcji, nagłówków, podnagłówków i paragrafów w dokumentach. -Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS do sekcji Automatyczne liczniki i numerowanie. -

-
-

Zadanie: Style list

-

Stwórz nowy dokument HTML, doc2.html. -Skopiuj i wklej poniższą treść, upewniając się, że zaznaczyłeś(aś) cały: -

-
-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> -<HEAD> -<TITLE>Sample document 2</TITLE> -<LINK rel="stylesheet" type="text/css" href="style2.css"> -</HEAD> -<BODY> - -<H3 id="oceans">The oceans</H3> -<UL> -<LI>Arctic</LI> -<LI>Atlantic</LI> -<LI>Pacific</LI> -<LI>Indian</LI> -<LI>Southern</LI> -</UL> - -<H3 class="numbered">Numbered paragraphs</H3> -<P class="numbered">Lorem ipsum</P> -<P class="numbered">Dolor sit</P> -<P class="numbered">Amet consectetuer</P> -<P class="numbered">Magna aliquam</P> -<P class="numbered">Autem veleum</P> - -</BODY> -</HTML> -

-
-

Stwórz nowy arkusz stylów, style2.css. -Skopiuj i wklej poniższą treść: -

-
-

/* numbered paragraphs */ -h3.numbered {counter-reset: mynum;} - -p.numbered:before { -

-
 content: counter(mynum) ": ";
- counter-increment: mynum;
- font-weight: bold;}
-
-
-

Jeżeli układ i komentarze Ci nie odpowiadają, zmień je. -

Otwórz ten dokument w swojej przeglądarce. -Jeżeli Twoja przeglądarka obsługuje liczniki, zobaczysz coś takiego, jak poniżej. -Jeżeli Twoja przeglądarka nie obsługuje stylów, wówczas nie zobaczysz liczb (i prawdopodobnie także dwukropków): -

- - -

The oceans

-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-

Numbered paragraphs

-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-


-

- - -
Wyzwania -
Dodaj jedną regułę do swojego arkusza stylów, aby ponumerować oceany, używając rzymskich liczb od i do v: - - -

The oceans

-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

Jeżeli Twoja przeglądarka obsługuje liczniki, zmień swój arkusz stylów, aby identyfikował nagłówki dużymi literami w takim stylu: -

- - -

(A) The oceans

-

. . . -

-

(B) Numbered paragraphs

-

. . . -

-
-
-


-

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

Kiedy Twoja przeglądarka wyświetla przykładowy dokument, tworzy przy okazji przestrzeń dookoła elementów, które określają ich rozkład na stronie. -

Następna strona opisuje, jak można użyć CSS do pracy z przestrzenią wokół elementów: -Bloki -

{{ languages( { "en": "en/CSS/Getting_Started/Lists", "fr": "fr/CSS/Premiers_pas/Listes", "pt": "pt/CSS/Como_come\u00e7ar/Listas" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/media/index.html" "b/files/pl/web/css/na_pocz\304\205tek/media/index.html" deleted file mode 100644 index ef6c87f8cf..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/media/index.html" +++ /dev/null @@ -1,318 +0,0 @@ ---- -title: Media -slug: Web/CSS/Na_początek/Media -tags: - - 'CSS:Na_początek' -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -

-

Wiele stron tego kursu skupiało się na własnościach i wartościach CSS, których możesz użyć do określania wyglądu dokumentu. -

Ta strona wraca do tematu przeznaczenia i struktury arkuszy stylów. -

-

Informacja: Media

-

Przeznaczeniem CSS-u jest określanie jak dokumentu mają być prezentowane użytkownikowi. -Prezentacja może przyjąć wiele różnych form. -

Na przykład prawdopodobnie czytasz tę stronę na jakimś urządzeniu wyświetlającym. Ale możesz również chcieć wyświetlić ją na ekranie dla większego grona odbiorców lub wydrukować ją. -To są różne media o różnych charakterystykach. -CSS daje możliwość prezentowania dokumentu w różny sposób dla różnych mediów. -

Aby zdefiniować regułę, która będzie dotyczyła tylko określonego typu mediów, użyj @media z typem mediów oraz klamrami obejmującymi reguły, których ma to dotyczyć. -

- - -
Przykład -
Dokument na stronie WWW posiada pole nawigacyjne pozwalające użytkownikowi poruszać się po stronie. -

W języku znaczników element rodzica pola nawigacyjnego ma id nav-area. -

Kiedy dokument jest drukowany, pole nawigacyjne nie ma żadnego zastosowania, więc arkusz stylów usuwa je w całości: -

-
-

@media print { -

-
 #nav-area {display: none;}
- }
-
-
-
-

Niektóre z popularnych typów mediów: -

- - - - - - - - -
screenKolorowy wyświetlacz komputera -
printWyświetlanie na stronach -
projectionWyświetlane podczas projekcji -
allWszystkie media (domyślne) -
-


-

- - -
Więcej szczegółów -
Istnieją też inne sposoby określenia docelowych mediów. -

Język znaczników dokumentu może pozwalać na określenie typu mediów w odnośniku wiążącym arkusz stylów z dokumentem. Na przykład w HTML-u możesz opcjonalnie określić typ mediów w atrybucie media w znaczniku LINK. -

W CSS możesz użyć @import na początku arkusza stylów, aby zaimportować inny arkusz stylów z podanego adresu URL, opcjonalnie podając też typ mediów. -

Dzięki wykorzystaniu tych technik możesz rozdzielić reguły stylów dla różnych typów mediów do różnych plików. Może to być czasem przydane do ułożenia struktury Twojego dokumentu. -

Aby dowiedzieć się więcej na temat typów mediów, zajrzyj na stronę Media w specyfikacji CSS. -

Istnieje więcej przykładów wykorzystania własności display na dalszej stronie kursu: Dane XML. -

-
-

Drukowanie

-

CSS posiada specyficzne własności przeznaczone dla mediów stronicowych. -

Reguła @page może ustawiać marginesy strony. -Aby ustawić drukowanie dwustronne, możesz określić marginesy osobno dla @page:left oraz @page:right. -

Dla mediów stronicowych zazwyczaj należy używać odpowiednich jednostek długości takich jak cale (in), punkty (pt) = 1/72 cala), centymetry (cm) lub milimetry (mm). Równie dobrze możesz używać ems (em), aby dopasować się do rozmiaru czcionki, oraz procentów (%). -

Możesz kontrolować, jak zawartość dokumentu jest przełamywana na strony, przy użyciu własności page-break-before, page-break-after i page-break-inside. -

- - -
Przykład -
Ta reguła ustawia margines strony na jeden cal dla każdej strony: -
-

@page {margin: 1in;} -

-
-

Ta reguła zapewnia, że każdy element H! zaczyna się na nowej stronie: -

-
-

h1 {page-break-before: always;} -

-
-
-


-

- - -
Więcej szczegółów -
Aby dowiedzieć się więcej o obsłudze mediów stronicowych, zajrzyj na stronę Media stronicowe w specyfikacji CSS. -

Drukowanie, podobnie jak inne funkcje CSS, zależy od Twojej przeglądarki i jej ustawień. -Na przykład przeglądarka Mozilla ustawia domyślne marginesy, nagłówki i stopkę podczas druku. -Raczej nie będziesz w stanie przewidzieć ustawień przeglądarek innych użytkowników drukujących Twój dokument &mbdash; nie masz możliwości w pełni kontrolować wyniku. -

-
-

Interfejsy użytkownika

-

CSS ma pewne specjalne własności przeznaczone dla urządzeń obsługujących interfejs użytkownika, takich jak wyświetlacz komputera. To sprawia, że widok dokumentu zmienia się dynamicznie w trakcie pracy użytkownika z interfejsem. -

Nie istnieje osobny typ mediów dla urządzeń z interfejsem użytkownika. -

Istnieje pięć specjalnych selektorów: -

- - - - - - - - - - - - -
SelektorWybiera -
E:hoverDowolny element E, nad którym znajduje się wskaźnik -
E:focusDowolny element E, który jest w danym momencie aktywny dla interfejsu -
E:activeElement E, który jest wykorzystywany w aktualnie wykonywanej akcji użytkownika -
E:linkDowolny element E, który jest odnośnikiem do strony której użytkownik nie odwiedzał ostatnio -
E:visitedDowolny element E, który jest odnośnikiem do adresu URL, który użytkownik odwiedził niedawno -
-

Własność cursor określa kształt wskaźnika; niektóre z podstawowych kształtów podane są poniżej. Umieść kursor myszy nad elementami na tej liście, aby zobaczyć jak wygląda podany kursor: -

- - - - - - - - - - -
SelektorWybiera -
pointerWskazuje odnośnik -
waitWskazuje, że program nie może przyjmować danych -
progressWskazuje, że program w tej chwili pracuje, ale może przyjmować dane od użytkownika -
defaultDomyślny (zazwyczaj strzałka) -
-

Własność outline tworzy zewnętrzną linię, która zazwyczaj jest używana do oznaczenia pola aktywnego dla klawiatury. -Jej wartości są podobne do własności border, poza tym, że nie możesz określać osobno wartości dla poszczególnych boków. -

Kilka innych funkcji interfejsu użytkownika zostało zaimplementowanych przy użyciu atrybutów w tradycyjny sposób. Na przykład elementy, które są nieaktywne albo w trybie tylko do odczytu posiadają atrybut disabled lub readonly. -Selektory mogą określać takie atrybuty podobnie jak każde inne — poprzez użycie prostokątnych nawiasów: {{ mediawiki.external('disabled') }} lub {{ mediawiki.external('readonly') }}. -


-

- - -
Przykład -
Te reguły określają style dla przycisku, który zmienia się dynamicznie, kiedy użytkownik na nim operuje: -
-.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  }
-
-

To wiki nie obsługuje interfejsu użytkownika na tej stronie, zatem przyciski nie mogą być *klikalne*. Poniżej znajdują się statyczne obrazki ilustrujące ideę: -

- - -
- - - - - - -
Click Me -Click Me -Click Me -
-
disablednormalactive -
-
-

W pełni funkcjonalny przycisk posiada dodatkowo ciemną linię wokół całego przycisku, kiedy jest on domyślny, oraz kropkowaną linię na przycisku, kiedy jest on aktywny dla klawiatury. Może także posiadać efekt aktywizacji, kiedy wskaźnik znajduje się nad nim. -

-
- - -
Więcej szczegółów -
Aby dowiedzieć się więcej o interfejsach użytkownika w CSS, zobacz stronę User interface w specyfikacji CSS. -

Istnieje też przykład napisany w języku znaczników Mozilli, XUL-u, w drugiej części tego kursu. -

-
-

Zadanie: Drukowanie dokumentu

-

Stwórz nowy dokument HTML, doc4.html. -Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Print sample</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
-</HEAD>
-
-<BODY>
-<H1>Section A</H1>
-<P>This is the first section...</P>
-
-<H1>Section B</H1>
-<P>This is the second section...</P>
-
-<DIV id="print-head">
-Heading for paged media
-</DIV>
-
-<DIV id="print-foot">
-Page:
-</DIV>
-
-</BODY>
-</HTML>
-
-

Stwórz nowy arkusz stylów, style4.css. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
/*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-
-

Kiedy oglądasz ten dokument w swojej przeglądarce, używa on domyślnego stylu przeglądarki. -

Kiedy drukujesz go (lub oglądasz podgląd wydruku), arkusz stylów umieszcza każdą sekcję na osobnej stronie oraz dodaje nagłówek i stopkę do każdej strony. Jeżeli Twoja przeglądarka obsługuje także liczniki, dodaje numer strony w stopce. -

- - -
- - -
- - -
Heading
-
Section A
-
This is the first section...
-
Page: 1
-
-
-		 - - -
- - -
Heading
-
Section B
-
This is the second section...
-
Page: 2
-
-
-
-


-

- - -
Wyzwanie -
Przesuń reguły stylu dotyczące drukowania do osobnego pliku CSS. -

Użyj wcześniejszych odnośników na tej stronie, aby znaleźć informacje w specyfikacji CSS. Znajdź szczegóły na temat, jak importować nowy plik CSS do swojego arkusza stylów. -

Spraw, aby nagłówek stawał się niebieski, kiedy kursor myszy znajdzie się nad nim. -

-
-


-

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

Na razie wszystkie reguły stylów w tym kursie znajdowały się w plikach. Reguły i ich wartości są stałe. Następna strona opisuje, jak można modyfikować reguły dynamicznie, używając języka programowania: JavaScript -

{{ languages( { "en": "en/CSS/Getting_Started/Media", "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/po_co_u\305\274ywa\304\207_css/index.html" "b/files/pl/web/css/na_pocz\304\205tek/po_co_u\305\274ywa\304\207_css/index.html" deleted file mode 100644 index 97c8144628..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/po_co_u\305\274ywa\304\207_css/index.html" +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Po co używać CSS -slug: Web/CSS/Na_początek/Po_co_używać_CSS -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

-

Ta strona tłumaczy, do czego dokumenty wykorzystują CSS. -Używając CSS dodasz do swojego dokumentu arkusz stylów. -

-

Informacja: Po co używać CSS?

-

CSS pomaga utrzymać treść dokumentu oddzieloną od informacji o tym, jak należy ją wyświetlać. Szczegóły opisujące, jak należy wyświetlać dokument, są znane jako styl. Utrzymywanie rozdzielenia treści od wyglądu: -

- - - -
Przykład -
Twoja strona WWW może mieć wiele dokumentów wyglądających podobnie. Korzystając z CSS, przechowujesz informacje o wyglądzie w osobnych plikach używanych we wszystkich dokumentach. -

Kiedy użytkownik ogląda stronę WWW, przeglądarka pobiera informacje o stylach równolegle z treścią strony. -

Kiedy użytkownik drukuje stronę, można mu dostarczyć inne informacje o stylu, które sprawią, że wydrukowany dokument będzie bardziej czytelny. -

-
-

Ogólnie rzecz biorąc, dzięki CSS język znaczników jest wykorzystywany wyłącznie do opisu treści dokumentu, a nie jego stylu. CSS jest zaś używany do opisu stylu, nie treści. (Dalej w tym kursie będzie można zobaczyć pewne wyjątki od tej reguły.) -

- - -
Więcej szczegółów -
Język znaczników, taki jak HTML, również dostarcza pewnych mechanizmów opisu stylów. Na przykład w HTML-u można użyć znacznika <B>, aby pogrubić tekst albo określić kolor tła strony w znaczniku <BODY>. -

Kiedy używasz CSS, zazwyczaj unikasz stosowania tych funkcji języka znaczników, aby trzymać wszystkie informacje o stylu dokumentu w jednym miejscu. -

-
-

Zadanie: Tworzenia arkusza stylów

-

Stwórz inny plik tekstowy w tym samym katalogu, co poprzednio. -Ten plik będzie arkuszem stylów. -Nazwij go: style1.css -

Skopiuj poniższą linię i wklej ją do pliku CSS, a następnie zapisz ten plik: -

-
-

strong {color: red;} -

-
-

Wiązanie arkusza stylów do dokumentu

-

Aby powiązać swój dokument z arkuszem stylów, wyedytuj plik HTML. -Dodaj pogrubioną linię: -

-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-  <HEAD>
-  <TITLE>Sample document</TITLE>
-  <LINK rel="stylesheet" type="text/css" href="style1.css">
-  </HEAD>
-  <BODY>
-    <P>
-      <STRONG>C</STRONG>ascading
-      <STRONG>S</STRONG>tyle
-      <STRONG>S</STRONG>heets
-    </P>
-  </BODY>
-</HTML>
-
-
-

Zapisz ten plik i odśwież widok w swojej przeglądarce. -Ten arkusz stylów sprawia, że pierwsze litery są czerwone: -

- - -
Cascading Style Sheets -
- - -
Wyzwanie -
Poza czerwonym, CSS pozwala używać innych nazw kolorów. -

Bez patrzenia w dokumentację znajdź pięć innych nazw kolorów, które działają w Twoim arkuszu stylów. -

-
-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

Teraz masz już przykładowy dokument powiązany z osobnym arkuszem stylów, jesteś zatem gotów do zrozumienia, jak przeglądarka wiąże je podczas wyświetlania dokumentu: -Jak działa CSS -

{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/selektory/index.html" "b/files/pl/web/css/na_pocz\304\205tek/selektory/index.html" deleted file mode 100644 index bf3edca6f9..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/selektory/index.html" +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Selektory -slug: Web/CSS/Na_początek/Selektory -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

Ta strona jest częścią piątą kursu CSS Getting Started. Wyjaśnia ona jak możesz używać stylów selektywnie, i jak różne typy selektorów mają różne priorytety. Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.

- -

Informacja: Selektory

- -

CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:

- -
-
strong {
-   color: red;
-}
-
-
- -

W terminologii CSS cała ta linia jest regułą. Ta reguła zaczyna się od strong, który jest selektorem. Wybiera, które elementy w drzewie DOM będą używały tej reguły.

- - - - - - - -
-

Więcej szczegółów
- Część wewnątrz nawiasów klamrowych nazywamy się deklaracją.

- -

Słowo kluczowe color jest własnością, a red jest wartością.

- -

Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.

- -

Ten kurs odwołuje się do selektorów takich jak strong jako selektorów znaczników. Specyfikacja CSS odwołuje się do nich jako selektorów typu.

-
- -

Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.

- -

Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.

- -

Dwa atrybuty posiadają specjalny status w CSS. Są to class oraz id.

- -

Selektor class

- -

Użycie atrybutu class w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.

- -

W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.

- -

Selektor ID

- -

Użycie atrybutu id w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie id mu nadasz. Nazwa id musi być unikalna w dokumencie.

- -

W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym id, kiedy używasz go w selektorze.

- - - - - - - -
-

Przykłady
- Ten znacznik HTML posiada zarówno atrybut class, jak i id:

- -
- 
-<p class="key" id="principal">
-
-
- -

Id, principal, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy key.

- -

W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy key staną się zielone. (Nie wszystkie muszą być elementami P.)

- -
- 
-.key {
-   color: green;
-}
-
-
- -

Ta reguła powoduje, że jeden element o id principal zostanie pogrubiony:

- -
- 
-#principal {
-   font-weight: bolder;
-}
-
-
-
- -

Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.

- - - - - - - - -
Więcej szczegółów
Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi. -

Na przykład selektor .key wybiera wszystkie elementy, które mają klasę o nazwie key. Selektor p.key wybiera tylko elementy P, które mają klasę o nazwie key.

- -

Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, class i id. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor {{ mediawiki.external('type=button') }} wybiera wszystkie elementy, które mają atrybut type o wartości button.

- -

W dalszej części kursu (Tabele) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.

- -

Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę Selektory w specyfikacji CSS.

-
- -

Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.

- -

Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.

- -

Zadanie: Używanie selektorów class i id

- -

1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.
- 2. Następnie dodaj atrybuty id i class do pierwszej kopii, a potem id do drugiej:

- -
-
<!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html
-
- -

Teraz wyedytuj swój plik CSS. Zamień całą treść na:

- -
-
strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
- -

Odśwież okno przeglądarki, aby zobaczyć wynik:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.

- -

Selektory klas .carrot oraz .spinach mają priorytety nad selektorem znaczników strong.

- -

Selektor id #first ma priorytet nad selektorami klas i znaczników.

- - - - - - - - -
Wyzwanie
Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski: - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-
- -

Zadanie: użycie pseudo selectorów

- -
    -
  1. Utwórz plik HTML z następują treścią: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
    -
    2. -
  2. Edytuj plik CSS. Zamień jego treść na: - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
    -
    3. -
  3. Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt): - - - - - - -
    Go to our Home page
    -
    4. -
- -

Co dalej?

- -

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

- -

Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: Czytelny CSS

- -

{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "it": "it/Conoscere_i_CSS/I_Selettori", "ja": "ja/CSS/Getting_Started/Selectors", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}

diff --git "a/files/pl/web/css/na_pocz\304\205tek/style_tekstowe/index.html" "b/files/pl/web/css/na_pocz\304\205tek/style_tekstowe/index.html" deleted file mode 100644 index 69dfd39735..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/style_tekstowe/index.html" +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Style tekstowe -slug: Web/CSS/Na_początek/Style_tekstowe -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

-

Na tej stronie znajdziesz więcej przykładów stylów tekstowych. -

Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma. -

-

Informacja: Style tekstowe

-

CSS posiada kilka własności do określania stylu tekstu. -

Istnieje wygodna, krótka własność font, której można użyć do określenia kilku cech na raz — na przykład: -

- - - -
Przykład -
-

p {font: italic 75%/125% "Comic Sans MS", cursive;} -

-
-

Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą. -

Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni). -

Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo). -

Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na normal): -

-
-

Typy fontów

-

Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu. -Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych. -

Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: serif, sans-serif, cursive, fantasy lub monospace, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki). -

Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty. -

Aby określić wyłącznie typ fontu, użyj własności font-family. -

-

Rozmiary fontów

-

Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da. -

Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak small, medium czy large. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: smaller, larger, 150% lub 1.5. -

Jeżeli trzeba, możesz określić bezpośredni rozmiar: 12px (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz. -

Aby określić sam rozmiary fontu, użyj własności font-size. -

-

Wysokość linii

-

Wysokość linii określa odstępy między liniami. -Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe. -

Aby określić samą wysokość linii, użyj własności line-height. -

-

Ozdobniki

-

Odrębna własność text-decoration może określać inne style, jak underline (podkreślenie) lub line-through (przekreślenie). -Ustawiając tę własność na normal, usuniesz wszystkie ozdobniki. -

-

Inne własności

-

Aby ustawić kursywę, użyj font-style: italic;
-Aby ustawić pogrubienie, użyj font-weight: bold;
-Aby określić, że wszystkie litery mają być małymi literami, użyj font-variant: small-caps; -

Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na normal lub -inherit (dziedzicz). -

- - -
Więcej szczegółów -
Możesz określić style tekstowe na kilka innych sposobów. -

Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć. -

W złożonym arkuszu stylów unikaj używania skrótowej własności font, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu). -

Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału Fonty w specyfikacji CSS. -Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj Tutaj. -

-
-

Zadanie: Określanie fontu

-

W prostych dokumentach możesz określić font elementu BODY, a reszta dokumentu będzie dziedziczyć jego ustawienia. -

Wyedytuj swój plik CSS. -Dodaj regułę, która zmieni font. -Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia: -

-
-

body {font: 16px "Comic Sans MS", cursive;} -

-
-

Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu. -

Odśwież okno przeglądarki, aby zobaczyć efekt. -Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii: -

- - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-

Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar. -

- - -
Wyzwanie -
Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki: - - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-
-

Co dalej?

-

Twój przykładowy dokument korzysta już z kilku nazwanych kolorów. -Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne: -Kolor -

-
-
-{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "fr": "fr/CSS/Premiers_pas/Styles_de_texte", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/tables/index.html" "b/files/pl/web/css/na_pocz\304\205tek/tables/index.html" deleted file mode 100644 index 3e09737217..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/tables/index.html" +++ /dev/null @@ -1,597 +0,0 @@ ---- -title: Tabele -slug: Web/CSS/Na_początek/Tables -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -

 

-

Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.

-

Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.

-

Informacja: Więcej o selektorach

-

CSS daje wiele sposobów na wybranie elementów, bazując na ich wzajemnych relacjach. Możesz ich użyć, aby stworzyć bardziej dokładne selektory.

-

Poniżej znajduje się podsumowanie selektorów bazujące na ich wzajemnych relacjach:

- - - - - - - - - - - - - - - - - - - - - - - -
SelektorWybiera
A EDowolny element E, który jest potomkiem elementu A (to znaczy jest dzieckiem albo dzieckiem dziecka, itp.))
A > EDowolny element E, który jest dzieckiem elementu A
E:first-childDowolny element E, który jest pierwszym dzieckiem swojego rodzica
B + EDowolny element E, który jest następnym z rodzeństwa elementu B (to znaczy: następnym dzieckiem tego samego rodzica)
-

Możesz łączyć te selektory w złożone relacje.

-

Możesz też użyć symbolu * (gwiazdka), który znaczy "dowolny element".

- - - - - - - -
- Przykład
Tabela HTML posiada atrybut id, ale jej wiersze i komórki nie posiadają własnych identyfikatorów: -
-

<TABLE id="data-table-1"> ... <TR> <TD>Prefiks</TD> <TD>0001</TD> <TD>domyślnie</TD> </TR> ...

-
-

Poniższe reguły powodują, że pierwsza komórka w każdym wierszu jest pogrubiona, natomiast druga używa kroju monospace. Dotyczą one tylko jednej, określonej tabeli w dokumencie:

-
-
    -
  1. data-table-1 td:first-child {font-weight: bolder;}
    2. -
  2. data-table-1 td:first-child + td {font-family: monospace;}
    3. -
-
-

Wygląda to tak:

- - - - - - -
- - - - - - - - -
Prefiks<tt>0001</tt>domyślnie
-
-
- - - - - - - -
- Więcej szczegółów
Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet. -

Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu class lub id w wielu znacznikach dokumentu. Zamiast tego logika zostaje przeniesiona na CSS.

-

W dużych projektach, gdzie prędkość ma duże znaczenie, możesz sprawić, że twój arkusz stylów będzie działał szybciej, poprzez unikanie złożonych reguł, które zależą od relacji między elementami.

-

Aby dowiedzieć się więcej o selektorach, zajrzyj do specyfikacji CSS na stronę Selektory.

-
-

Informacja: Tabele

-

Tabela układa informacje w prostokątną siatkę. Niektóre tabele mogą być skomplikowane, a różne przeglądarki mogą pokazywać różne wyniki.

-

Kiedy tworzysz swój dokument, użyj tabel do wyrażenia relacji między elementami informacji. Wówczas nie ma znaczenia, jeśli różne przeglądarki wyświetlą je w trochę inny sposób, ponieważ przekaz pozostanie jasny.

-

Nie używaj tabel w sposób, do którego nie zostały przeznaczone, na przykład aby tworzyć przy ich pomocy układ wizualny. Techniki opisane na poprzedniej stronie tego kursu (Układ) nadają się do tego znacznie lepiej.

-

Struktura tabeli

-

W tabeli każdy kawałek informacji jest wyświetlany w komórce.

-

Komórki wyświetlane w jednej linii tworzą wiersz.

-

W niektórych tabelach wiersze mogą być grupowane. Specjalna grupa wierszy, która znajduje się na górze tabeli, nazywa się nagłówkiem. Specjalna grupa wierszy znajdująca się na dole tabeli nazywa się stopką. Główne wiersze w tabeli tworzą jej ciało i one również mogą być łączone w grupy.

-

Komórki ułożone w pionowej linii tworzą kolumnę, ale użyteczność kolumn w tabelach CSS jest ograniczona.

- - - - - - - -
- Przykład
Tabela selektorów znajdująca się na górze tej strony posiada dziesięć komórek i pięć wierszy. -

Pierwszy wiersz jest nagłówkiem. Kolejne cztery są ciałem tabeli. Nie posiada ona stopki.

-

Ma natomiast dwie kolumny.

-
-


- Ten kurs omawia tylko proste tabele, dla których wynik jest przewidywalny. W prostej tabeli każda komórka zajmuje miejsce w jednym wierszu i jednej kolumnie. Możesz skorzystać z CSS-u do złożonych tabel, gdzie komórki rozciągają się na więcej niż jeden wiersz lub kolumnę, ale tego typu tabele wykraczają poza zakres tego kursu.

-

Ramki

-

Komórki nie posiadają marginesów zewnętrznych.

-

Komórki posiadają ramki oraz marginesy wewnętrzne. Domyślnie ramki są oddzielone o wartość własności border-spacing tabeli. Możesz usunąć całkowicie odstępy przez ustawienie własności border-collapse tabeli na wartość collapse.

- - - - - - - -
- Przykład
Poniżej widać trzy tabele. -

Tabela po lewej ma ustawione odstępy ramek na 0.5 em. Tabela w środku ma ustawione odstępy ramek na zero. Tabela po prawej ma zwinięte ramki:

- - - - - - - - -
- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
- 		- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
- 		- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
-
-
-

Opis

-

Opis jest etykietą opisującą całą tabelę. Domyślnie jest wyświetlana nad tabelą.

-

Aby przesunąć opis na dół, ustaw jego własność caption-side na bottom. Ta własność jest dziedziczona, więc możesz ją ustawić dla całej tabeli lub innego rodzica.

-

Aby ustawić styl tekstu opisu, użyj normalnych własności tekstowych.

- - - - - - - -
- Przykład
Ta tabela posiada opis na dole: -
-
    -
  1. demo-table > caption {
    2. -
- 
- caption-side: bottom;
- font-style: italic;
- text-align: right;
- }
-
-
- - - - - - -
- - - - - - - -
- Suits
- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
-
-
-
-

Puste komórki

-

Możesz wyświetlić puste komórki (czyli ich ramki oraz tło) przez określenie empty-cells: show; dla elementu tabeli.

-

Możesz je ukryć, określając empty-cells: hide;. Wtedy jeżeli element rodzic komórki posiada tło, zostanie ono pokazane w miejscu pustej komórki.

- - - - - - - -
- Przykład
Poniższe tabele mają jasnozielone tło. Ich komórki mają tło jasnoszare i ciemnoszare ramki. -

W lewej tabeli puste komórki są wyświetlane, w prawej ukrywane:

- - - - - - - -
- - - - - - - - - - - -
 Hearts
DiamondsSpades
- 		- - - - - - - - - - - -
 Hearts
DiamondsSpades
-
-
-

 

- - - - - - - -
- Więcej szczegółów
Aby dowiedzieć się więcej o tabelach, zajrzyj do rozdziału Tabele w specyfikacji CSS. -

Informacje tam zawarte wykraczają poza ten kurs, ale nie opisują różnic miedzy przeglądarkami, które mogą wpływać na wyświetlanie złożonych tabel.

-
-

Zadanie: Ustawianie stylów dla tabeli

-

Stwórz nowy dokument HTML, doc3.html. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz całą zawartość:

-
- 
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-<HEAD>
-<TITLE>Przykładowy dokument 3</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style3.css">
-</HEAD>
-<BODY>
-
-<TABLE id="demo-table">
-<CAPTION>Oceans</CAPTION>
-
-<THEAD>
-<TR>
-<TH></TH>
-<TH>Area</TH>
-<TH>Mean depth</TH>
-</TR>
-<TR>
-<TH></TH>
-<TH>million km<SUP>2</SUP></TH>
-<TH>m</TH>
-</TR>
-</THEAD>
-
-<TBODY>
-<TR>
-<TH>Arctic</TH>
-<TD>13,000</TD>
-<TD>1,200</TD>
-</TR>
-<TR>
-<TH>Atlantic</TH>
-<TD>87,000</TD>
-<TD>3,900</TD>
-</TR>
-<TR>
-<TH>Pacific</TH>
-<TD>180,000</TD>
-<TD>4,000</TD>
-</TR>
-<TR>
-<TH>Indian</TH>
-<TD>75,000</TD>
-<TD>3,900</TD>
-</TR>
-<TR>
-<TH>Southern</TH>
-<TD>20,000</TD>
-<TD>4,500</TD>
-</TR>
-</TBODY>
-
-<TFOOT>
-<TR>
-<TH>Total</TH>
-<TD>361,000</TD>
-<TD></TD>
-</TR>
-<TR>
-<TH>Mean</TH>
-<TD>72,000</TD>
-<TD>3,800</TD>
-</TR>
-</TFOOT>
-
-</TABLE>
-
-</BODY>
-</HTML>
-
-
-

Stwórz nowy arkusz stylów, style3.css. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz cały:

-
- 
/*** Styl dla doc3.html (Tabele) ***/
-
-#demo-table {
-  font: 100% sans-serif;
-  background-color: #efe;
-  border-collapse: collapse;
-  empty-cells: show;
-  border: 1px solid #7a7;
-  }
-
-#demo-table > caption {
-  text-align: left;
-  font-weight: bold;
-  font-size: 200%;
-  border-bottom: .2em solid #4ca;
-  margin-bottom: .5em;
-  }
-
-
-/* basic shared rules */
-#demo-table th,
-#demo-table td {
-  text-align: right;
-  padding-right: .5em;
-  }
-
-#demo-table th {
-  font-weight: bold;
-  padding-left: .5em;
-  }
-
-
-/* header */
-#demo-table > thead > tr:first-child > th {
-  text-align: center;
-  color: blue;
-  }
-
-#demo-table > thead > tr + tr > th {
-  font-style: italic;
-  color: gray;
-  }
-
-/* fix size of superscript */
-#demo-table sup {
-  font-size: 75%;
-  }
-
-/* body */
-#demo-table td {
-  background-color: #cef;
-  padding:.5em .5em .5em 3em;
-  }
-
-#demo-table tbody th:after {
-  content: ":";
-  }
-
-
-/* footer */
-#demo-table tfoot {
-  font-weight: bold;
-  }
-
-#demo-table tfoot th {
-  color: blue;
-  }
-
-#demo-table tfoot th:after {
-  content: ":";
-  }
-
-#demo-table > tfoot td {
-  background-color: #cee;
-  }
-
-#demo-table > tfoot > tr:first-child td {
-  border-top: .2em solid #7a7;
-  }
-
-
-

Otwórz dokument w swojej przeglądarce. Powinien wyglądać mniej więcej tak:

- - - - - - -
-
-

Oceans

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
-
-
-
-

Porównaj reguły ze swojego arkusza stylów z wyświetloną tabelą, aby upewnić się, że rozumiesz działanie każdej reguły. Jeżeli napotkasz regułę, której nie rozumiesz, wykomentuj ją i odśwież okno przeglądarki, aby zobaczyć, co się stanie.

-

Poniżej znajduje się kilka uwag dotyczących tej tabeli:

- -

 

- - - - - - - -
- Wyzwania
Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej: - - - - - - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
-
-

Oceans

-
-
-
-

 

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

-

Jest to ostatnia strona tego kursu, która opisuje własności i wartości CSS. Aby dowiedzieć się więcej o własnościach i wartościach w CSS, zajrzyj na stronę Full property table w specyfikacji CSS.

-

Następna strona znowu wraca do tematu przeznaczenia i struktury arkuszy stylów CSS: Media

diff --git "a/files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" "b/files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" deleted file mode 100644 index d532771ddc..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: Układ -slug: Web/CSS/Na_początek/Układ -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

-

Ta strona opisuje kilka sposobów na modyfikację układu dokumentu. -

Nauczysz się zmieniać układ przykładowego dokumentu... -

-

Informacja: Układ

-

Możesz użyć CSS-u do określenia wielu efektów wizualnych, które zmieniają układ Twojego dokumentu. -Niektóre z technik tworzenia układu są bardziej zaawansowane, wykraczające poza zakres podstawowego kursu. -

Kiedy modelujesz układ strony, który ma wyglądać podobnie w wielu przeglądarkach, Twój arkusz stylów łączy się z domyślnym arkuszem stylów przeglądarki oraz silnikiem układu stron w sposób, który może być bardzo złożony. -To także wykracza poza zakres tego kursu. -

Ta strona opisuje proste techniki, których możesz spróbować. -

-

Struktura dokumentu

-

Jeżeli chcesz kontrolować układ dokumentu, być może będziesz musiał(a) zmienić jego strukturę. -

Język składni Twojego dokumentu może posiadać znaczniki ogólnego przeznaczenia do tworzenia struktury. -Na przykład w HTML-u możesz użyć znacznika DIV do tworzenia struktury. -

- - -
Przykład -
W Twoim przykładowym dokumencie ponumerowane paragrafy pod drugim nagłówkiem nie mają własnego kontenera. -

Twój arkusz stylów nie może narysować ramki wokół tych paragrafów, ponieważ nie istnieje element, dla którego można stworzyć selektor. -

Aby poprawić ten problem strukturalny, możesz dodać znacznik DIV wokół paragrafów. -Ten znacznik jest unikalny, zatem można go identyfikować przez atrybut id. -

-
-
 <H3 class="numbered">Numbered paragraphs</H3>
- <DIV id="numbered">
- <P class="numbered">Lorem ipsum</P>
- <P class="numbered">Dolor sit</P>
- <P class="numbered">Amet consectetuer</P>
- <P class="numbered">Magna aliquam</P>
- <P class="numbered">Autem veleum</P>
- </DIV>
-
-
-

Teraz Twój arkusz stylów może używać jednej reguły do określania ramek wokół obu list: -

-
-
 ul, #numbered {
- border: 1em solid #69b;
- padding-left:1em;
- }
-
-
-

Wynik wygląda tak: -

- - -

(A) The oceans

-
  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern
-
-

(B) Numbered paragraphs

-

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

-
-
-
-

Jednostki rozmiaru

-

Dotychczas w tym kursie określałeś(aś) rozmiary w pikselach (px). -Jest to rozsądny wybór w pewnych przypadkach, dla wyświetlaczy takich jak monitor komputera. -Jednak jeżeli użytkownik zmieni rozmiar kroju, Twój układ może przestać wyglądać dobrze. -

W wielu wypadkach lepiej jest określać rozmiary w procentach lub jednostkach ems (em). -Em jest nominalnym rozmiarem aktualnego kroju (szerokość litery m). -Kiedy użytkownik zmienia rozmiar kroju, Twój układ dostosuje się automatycznie. -

- - -
Przykład -
Ramka po lewej stronie tego tekstu ma rozmiary określony w pikselach. -

Ramka po prawej ma rozmiar określony w ems. -

Zmień teraz rozmiary kroju w swojej przeglądarce, aby zobaczyć, jak ramka po prawej dopasowuje się do rozmiaru, a jak zachowa się ramka po lewej: -

- - -
ZMIEŃ MÓJ ROZMIAR
-
-
- - -
Więcej szczegółów -
Dla innych urządzeń najlepiej stosować inne jednostki miar. -

Więcej informacji na ten temat znajdziesz na dalszych stronach tego kursu. -

Aby dowiedzieć się więcej na temat wartości i jednostek, których możesz użyć, zobacz stronę Wartości na stronach specyfikacji CSS. -

-
-

Układ tekstu

-

Układ treści dokumentu jest określany przez dwie własności. -Możesz ich użyć, aby wstępnie określić układ: -

- -
Określa położenie treści. Wybierz jedną z wartości: left, right, center, justify -
- -
Tworzy odstęp dla treści o określoną wartość. -
-

Te własności dotyczą wszelkiej treści tekstowej w elemencie, nie tylko tekstu. -Pamiętaj też, że są one dziedziczone przez elementy dzieci, zatem będzie trzeba bezpośrednio wyłączyć je dla dzieci, aby uniknąć dziwnych rezultatów. -

- - -
Przykład -
Aby wycentrować nagłówki: -
-
 h3 {
- border-top: 1px solid gray;
- text-align: center;
- }
-
-
-

Wynik: -

- - -

(A) The oceans

-
-

W dokumencie HTML treść wyświetlana pod nagłówkiem nie jest strukturalnie przynależna do nagłówka. -Zatem kiedy określasz nagłówek w taki sposób, znaczniki poniżej nagłówka nie dziedziczą stylu. -

-
-

Pływanie (Floats)

-

Własność float wymusza umieszczenie elementu po lewej lub prawej. -Jest to prosty sposób, aby kontrolować jego położenie i rozmiar. -

Reszta dokumentu opływa wybrany element. -Możesz to kontrolować, używając własności clear na innych elementach, aby sprawić, by nie opływały elementów posiadających określony float. -

- - -
Przykład -
W Twoim przykładowym dokumencie listy są rozciągnięte na szerokość okna. Możesz tego uniknąć, przyklejając je do lewej strony. -

Aby zachować nagłówki w jednym miejscu, musisz też określić, że mają ignorować opływanie po lewej: -

-
-
 ul, #numbered {float: left;}
- h3 {clear: left;}
-
-
-

Rezultat wygląda tak: -

- - -

(A) The oceans

-
  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern
-
-

(B) Numbered paragraphs

-

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

-
-
-

(Mały margines wewnętrzny jest potrzebny po prawej stronie bloków, gdzie ramka jest za blisko tekstu.) -

-
-

Pozycjonowanie

-

Możesz określić pozycję elementu na cztery sposoby poprzez określenie własności position oraz podanie jednej z następujących wartości. -

Są to własności zaawansowane. -Można ich używać w prosty sposób — dlatego są tutaj wymienione. -Jednak korzystanie z nich w bardziej złożony sposób może być skomplikowane. -

- -
Pozycja elementu jest określona relatywnie do jego normalnej pozycji. -
Użyj tej wartości, aby przesunąć element o określoną wartość. Czasem możesz użyć marginesu zewnętrznego, aby osiągnąć ten sam efekt. -
- -
Element będzie przyczepiony. -
Określa pozycję elementu relatywnie do okna dokumentu. Nawet kiedy reszta dokumentu jest przewijana, element pozostaje w tym samym miejscu. -
- -
Pozycja elementu jest ustawiana relatywnie do elementu rodzica. -
Zadziała to tylko wobec elementów, które są pozycjonowane z użyciem relative, fixed lub absolute. -
-
Możesz też sprawić, by dowolny element-rodzic mógł zostać zastosowany poprzez określenie mu position: relative; bez podawania wartości przesunięcia. -
- -
Domyślne. Użyj tej wartości, aby wyłączyć pozycjonowanie. -
-

Razem z tymi wartościami własności position (poza static) podaj jedną lub więcej własności: top, right, bottom, left, width, height, aby określić, gdzie chcesz, aby element się pojawił, oraz jego rozmiar. -

- - -
Przykład -
Aby umieścić dwa elementy na górze, stwórz kontener rodzica w swoim dokumencie z dwoma elementami w środku: -
-
 <DIV id="parent-div">
- <P id="forward">/</P>
- <P id="back">\</P>
- </DIV>
-
-
-

W swoim arkuszu stylów nadaj rodzicowi wartość relative własności position. -Nie musisz podawać żadnego przesunięcia. -Określ wartość własności position jego dzieci jako absolute: -

-
-  #parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-  }
-
-  #forward, #back {
-  position: absolute;
-  margin:0px;
-  top: 0px;
-  left: 0px;
-  }
-
-  #forward {
-  color: blue;
-  }
-
-  #back {
-  color: red;
-  }
-
-

Rezultat wygląda tak, z odwrotnym ukośnikiem nad ukośnikiem: -

-

/

\

-
- -
-


-

-
- - -
Więcej szczegółów -
Cały temat pozycjonowania zajmuje dwa skomplikowane rozdziały w specyfikacji CSS: Visual formatting model oraz Visual formatting model details. -

Jeżeli tworzysz arkusze stylów, które mają działać w wielu przeglądarkach, musisz także wziąć pod uwagę różnice w sposobie interpretacji standardów oraz prawdopodobne błędy w obsłudze standardów występujące w różnych przeglądarkach. -

-
-

Zadanie: Definiowanie układu

-

Zmień swój przykładowy dokument i arkusz stylów, korzystając z przykładów z sekcji Struktura dokumentu i Pływanie. -

W przykładzie z Pływanie dodaj margines wewnętrzny, aby oddzielić tekst od prawej ramki o 0.5 em. -

- - -
Wyzwanie -
Zmień swój przykładowy dokument, dodając ten znacznik blisko końca, tuż przed -

</BODY> -

-
-  <IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
-

Jeżeli wcześniej nie pobrałeś(aś) pliku obrazka z tego kursu, zrób to teraz: -

- - -
Image:Yellow-pin.png -
-

Spróbuj przewidzieć, gdzie ten obrazek pojawi się w dokumencie. -Potem odśwież okno przeglądarki i sprawdź czy miałeś(aś) rację. -

Dodaj regułę do arkusza stylów, która umieści obrazek na stałe w prawym górnym rogu dokumentu. -

Odśwież okno przeglądarki i zmniejsz rozmiar okna. -Sprawdź, czy obrazek nadal pozostaje w górnym prawym rogu, nawet kiedy przewijasz dokument. -

-

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

 

Yellow map pin
-
-
-


-

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

Właśnie poznałeś(aś) wszystkie zagadnienia należące do podstawowego kursu CSS. -Następna strona dokładniej opisze zaawansowane selektory dla reguł CSS oraz trochę szczegółów dotyczących tabel: Tabele -

{{ languages( { "en": "en/CSS/Getting_Started/Layout", "fr": "fr/CSS/Premiers_pas/Mise_en_page", "pt": "pt/CSS/Como_come\u00e7ar/Disposi\u00e7\u00e3o" } ) }} diff --git a/files/pl/web/css/outline-color/index.html b/files/pl/web/css/outline-color/index.html new file mode 100644 index 0000000000..ca9e572624 --- /dev/null +++ b/files/pl/web/css/outline-color/index.html @@ -0,0 +1,13 @@ +--- +title: '-moz-outline-color' +slug: Web/CSS/-moz-outline-color +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline-color +translation_of_original: Web/CSS/-moz-outline-color +--- +

d

diff --git a/files/pl/web/css/privacy_and_the__colon_visited_selector/index.html b/files/pl/web/css/privacy_and_the__colon_visited_selector/index.html new file mode 100644 index 0000000000..fad2ac55d1 --- /dev/null +++ b/files/pl/web/css/privacy_and_the__colon_visited_selector/index.html @@ -0,0 +1,68 @@ +--- +title: 'Prywatność i znacznik :visited' +slug: 'Web/CSS/Prywatnosc_i_znacznik_:visited' +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +
{{cssref}}
+ +

Przed mniej więcej rokiem 2010, CSS-owy znacznik {{ cssxref(":visited") }} pozwalał stronom WWW na ujawnianie historii przeglądania użytkownika i które ze stron odwiedził. Było to możliwe przez {{domxref("window.getComputedStyle")}} i inne techniki. Proces ten działał błyskawicznie i pozwalał nie tylko na ujawnienie, co użytkownik robił w sieci, ale również pozwalał na dowiedzenie się wielu informacji o jego tożsamości.

+ +

By załagodzić ten problem, w {{ Gecko("2") }} zaimplementowano aktualizacje dot. prywatności celem ograniczenia ilości informacji zbieranych przez odwiedzone linki. W przypadku innych przeglądarek dokonano podobnych zmian.

+ +

Małe, białe kłamstewka

+ +

By chronić prywatność użytkowników, Firefox i inne przeglądarki będą kłamać aplikacjom webowym w przypadku zaistnienia poniższych okoliczności:

+ + + + + +

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

+ + + +

In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword.

+ +

Here is an example of how to use styles with the aforementioned restrictions:

+ +
:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* The default value of background-color is `transparent`. You need to
+     specify a different value, otherwise changes on :visited won't apply. */
+}
+
+:visited {
+  outline-color: orange;    /* Visited links have an orange outline */
+  background-color: green;  /* Visited links have a green background */
+  color: yellow;            /* Visited links have yellow colored text */
+}
+
+ +

Impact on web developers

+ +

Overall, these restrictions shouldn't affect web developers too significantly. They may, however, require the following changes to existing sites:

+ + + +

See also

+ + diff --git a/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html b/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html deleted file mode 100644 index fad2ac55d1..0000000000 --- a/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 'Prywatność i znacznik :visited' -slug: 'Web/CSS/Prywatnosc_i_znacznik_:visited' -translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' ---- -
{{cssref}}
- -

Przed mniej więcej rokiem 2010, CSS-owy znacznik {{ cssxref(":visited") }} pozwalał stronom WWW na ujawnianie historii przeglądania użytkownika i które ze stron odwiedził. Było to możliwe przez {{domxref("window.getComputedStyle")}} i inne techniki. Proces ten działał błyskawicznie i pozwalał nie tylko na ujawnienie, co użytkownik robił w sieci, ale również pozwalał na dowiedzenie się wielu informacji o jego tożsamości.

- -

By załagodzić ten problem, w {{ Gecko("2") }} zaimplementowano aktualizacje dot. prywatności celem ograniczenia ilości informacji zbieranych przez odwiedzone linki. W przypadku innych przeglądarek dokonano podobnych zmian.

- -

Małe, białe kłamstewka

- -

By chronić prywatność użytkowników, Firefox i inne przeglądarki będą kłamać aplikacjom webowym w przypadku zaistnienia poniższych okoliczności:

- - - - - -

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

- - - -

In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword.

- -

Here is an example of how to use styles with the aforementioned restrictions:

- -
:link {
-  outline: 1px dotted blue;
-  background-color: white;
-  /* The default value of background-color is `transparent`. You need to
-     specify a different value, otherwise changes on :visited won't apply. */
-}
-
-:visited {
-  outline-color: orange;    /* Visited links have an orange outline */
-  background-color: green;  /* Visited links have a green background */
-  color: yellow;            /* Visited links have yellow colored text */
-}
-
- -

Impact on web developers

- -

Overall, these restrictions shouldn't affect web developers too significantly. They may, however, require the following changes to existing sites:

- - - -

See also

- - diff --git a/files/pl/web/css/reference/index.html b/files/pl/web/css/reference/index.html new file mode 100644 index 0000000000..c6b8ea66c6 --- /dev/null +++ b/files/pl/web/css/reference/index.html @@ -0,0 +1,56 @@ +--- +title: Dokumentacja CSS +slug: Web/CSS/CSS_Reference +translation_of: Web/CSS/Reference +--- +

Specyfikacja CSS zawiera wszystkie standardowe właściwości CSS, w tym  pseudo-klas i pseudo-elementow, zasad używania znaku @, i selektorów w porządku alfabetycznym. Taka organizacja specyfikacji pozwala na szybki dostęp do szczegółowych informacji o każdym elemencie specyfikacji.
+
+ Specyfikacja CSS nie tylko opisuje ustandaryzowane właściwości CSS1 i CSS2.1, ale odnosi się również do specyfikacji najnowszej wersji - CSS3, zarówno elementów w fazie koncepcji jak i elementów zatwierdzonych.

+
+ Zobacz także rozszerzenie CSS Mozilli skonstrułowanych dla programów opartych na Gecko, z prefiksem -moz; oraz rozszerzenia CSS WebKit dla programów opartych na tym silniku. Sprawdź zestawienie właściwości wszystko prefiksów CSS autorstwa Petera Beverloo.
+

 

+
+ {{ CSS_Ref() }}
+

Selektory

+ +

diverso

+ +

Pojęcia

+ diff --git a/files/pl/web/css/rozszerzenia_webkit/index.html b/files/pl/web/css/rozszerzenia_webkit/index.html deleted file mode 100644 index 0b60bd4475..0000000000 --- a/files/pl/web/css/rozszerzenia_webkit/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: Rozszerzenia WebKit -slug: Web/CSS/Rozszerzenia_WebKit -tags: - - CSS - - Referencje CSS -translation_of: Web/CSS/WebKit_Extensions ---- -
{{CSSRef}}
- -

Webkit wspiera wiele rozszerzeń dedykowanych CSS opatrzonych prefiksem -webkit. Wszystkie właściwości opatrzone prefiksem -webkit działają również z prefiksem -apple.

- -

Niektóre z tych właściwości zostały zawarte w szkicu specyfikacji CSS w celu włączenia do ostatecznej rekomendacji, ale są one jeszcze eksperymentalne. Niektóre z tych niestandardowych właściwości nie wchodzą w skład linii standardowo obowiązującej.

- -

Jednostki z prefiksem WebKit obowiązującego standardu

- -
-

A – C

- - - -

F

- - - -

G

- - - -

H – O

- - - -

M

- - - -

P

- - - -

Q – Z

- - -
- -

Jednostki z prefiksem WebKit z odpowiednikiem bez prefiksu

- -

W celu maksymalizacji kompatybilności z Twoim CSS powinienneś/powinnaś stosować właściwości standardu bez prefiksu zamiast opcji z prefiksem. Poniżej znajduje się lista wszystkich wariantów:

- -
-

A

- - - -

B

- - - -

C – N

- - - -

O – S

- - - -

T – Z

- - -
- -

Firmowe jednostki z prefiksem WebKit (nie do używania na stronach internetowych)

- -
-

A

- - - -

B

- - - -

C

- - - -

D E

- - - -

F

- - - -

G

- - - -

H – K

- - - -

L

- - - -

M

- - - -

N

- - - -

O

- - - -

P Q

- - - -

R

- - - -

S

- - - -

T – Z

- - -
- -

Zobacz również

- - diff --git a/files/pl/web/css/selektor_klasy/index.html b/files/pl/web/css/selektor_klasy/index.html deleted file mode 100644 index 12f8d4f5c8..0000000000 --- a/files/pl/web/css/selektor_klasy/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Selektor klasy -slug: Web/CSS/Selektor_klasy -tags: - - CSS - - Klasy - - Reference - - Selektory -translation_of: Web/CSS/Class_selectors ---- -
{{CSSRef("Selectors")}}
- -
 
- -
Selektor klasy wyszukuje każdy element z atrybutem {{htmlattrxref("class")}} w dokumencie HTML. Atrybut {{htmlattrxref("class")}} jest zdefiniowany jako lista przedmiotów oddzielonych ze sobą spacją, jeden z nich musi zgadzać się z podaną klasą w selektorze (CSS).
- -
 
- -

Składnia

- -
.nazwaklasy { właściwości stylu }
- -

Jest to równoważne z {{Cssxref("Attribute_selectors", "attribute selector")}}:

- -
[class~=nazwaklasy] { właściwości stylu }
- -

Przykład

- -

CSS

- -
span.classy {
-  background-color: DodgerBlue;
-}
-
- -

HTML

- -
<span class="classy">Przykładowy tekst.</span>
-<span>Kolejny przykładowy tekst.</span>
-
- -

Specyfikacje

- - - -

Kompatybilność z przeglądarkami

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrzeglądarkaWsparcie
ChromeTak
EdgeTak
FirefoxTak
Internet ExplorerTak
OperaTak
SafariTak
- -

 

diff --git a/files/pl/web/css/selektor_uniwersalny/index.html b/files/pl/web/css/selektor_uniwersalny/index.html deleted file mode 100644 index c3c4952f06..0000000000 --- a/files/pl/web/css/selektor_uniwersalny/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Selektor uniwersalny -slug: Web/CSS/Selektor_uniwersalny -tags: - - CSS - - Selektory -translation_of: Web/CSS/Universal_selectors ---- -
{{CSSRef}}
- -

Selektor uniwersalny (*) dopasowuje elementy wszystkich typów.

- -
/* Wybierz wszystkie elementy */
-* {
-  color: green;
-}
- -

Począwszy od CSS3, gwiazdka może być używana w połączeniu z {{cssxref("CSS_Namespaces", "namespaces")}}:

- - - -

Składnia

- -
* { własności }
- -

Gwiazdka jest opcjonalna w przypadku prostych selektorów. Np.: *.warning i .warning są równoważne.

- -

Przykłady

- -

CSS

- -
* [lang^=pl] {
-  color: green;
-}
-
-*.warning {
-  color: red;
-}
-
-*#maincontent {
-  border: 1px solid blue;
-}
-
-.floating {
-  float: left
-}
-
-/* automatycznie czyści opływanie dla rodzeństwa znajdującego się bezpośrednio po elemencie z klasą .floating */
-.floating + * {
-  clear: left;
-}
-
- -

HTML

- -
<p class="warning">
-  <span lang="pl">Zielony span</span> w czerwonym akapicie.
-</p>
-<p id="maincontent" lang="pl">
-  <span class="warning">czerwony span</span> w zielonym akapicie.
-</p>
- -

Rezultat

- -

{{EmbedLiveSample('Przykłady')}}

- -

Specyfikacje

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecyfikacjaStatusKomentarz
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-elements
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.selectors.universal")}}

diff --git a/files/pl/web/css/selektory_typu/index.html b/files/pl/web/css/selektory_typu/index.html deleted file mode 100644 index 13dc191bb1..0000000000 --- a/files/pl/web/css/selektory_typu/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Selektory typu -slug: Web/CSS/Selektory_typu -tags: - - CSS - - 'CSS:Dokumentacje' - - Dokumentacje - - Wszystkie_kategorie -translation_of: Web/CSS/Type_selectors ---- -
{{CSSRef}}
- -

Selektory typu dopasowują wszystkie elementy mające taką samą nazwę jak dany selektor. Własności zostaną zastosowane do każdego elementu danego typu niezależnie od tego, gdzie znajduje się w drzewie dokumentu.

- -

Składnia

- -
selektor {własności }
-
- -

selektor jest do dowolnym elementem np. p, div, a, table.

- -

Przykład

- -

CSS

- -
span {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<span>Span z tekstem.</span>
-<p>Akapit z tekstem.</p>
-<span>Span z większą ilością tekstu.</span>
-
- -

Rezultat

- -

{{EmbedLiveSample('Przykład', '100%', 150)}}

- -

Specyfikacje

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecyfikacjaStatusKomentarz
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}No changes
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Initial definition
- -

Kompatybilność przeglądarek

- - - -

{{Compat("css.selectors.type")}}

diff --git a/files/pl/web/css/shorthand_properties/index.html b/files/pl/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..fa244eb571 --- /dev/null +++ b/files/pl/web/css/shorthand_properties/index.html @@ -0,0 +1,56 @@ +--- +title: Skrócone deklaracje CSS +slug: Web/CSS/Skrócone_deklaracje_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS/Shorthand_properties +--- +

+

+

Dlaczego skracamy deklaracje CSS?

+

Wielu programistów CSS stosuje skrócone wersje często stosowanych własności w celu zaoszczędzenia czasu i energii. Chociaż skracanie deklaracji może wydawać się nie intuicyjnie i prawdopodobnie będzie wymagało trochę zapamiętywania, to z całą pewnością zaoszczędzi nam pisania na klawiaturze, podczas tworzenia dużych lub kompleksowych arkuszy stylów. +

+

Własności tła

+

Tło określone za pomocą następujących własności: +

+
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+

Można zapisać w jednej deklaracji jako: +

+
background: #000 url(images/bg.gif) no-repeat top right;
+

(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus background-attachment: scroll oraz kilku dodatkowych własności w CSS3) +

+

Własności czcionki

+

Następujące deklaracje: +

+
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+

Mogą zostać skrócone do następującej deklaracji:

+
font: italic bold .8em/1.2 Arial, sans-serif;
+

(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus font-variant: normal i font-size-adjust: none (CSS2.0 / css3), font-stretch: normal (css3).) +

+

Własności obramowania

+

Obramowanie, szerokość, kolor i styl możemy uprościć do jednej deklaracji. Na przykład: +

+
border-width: 1px;
+border-style: solid;
+border-color: #000;
+

Możemy zapisać jako: +

+
border: 1px solid #000;
+

Własności margin/padding

+

Skrócona wersja wartości margin i padding działa w ten sam sposób. Następujące deklaracje CSS:

+
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+

Są tym samym, co poniższa deklaracja (ważne jest, aby wartości były rozmieszczone zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od wartości top: top, right, bottom i left (TRBL, spółgłoski w słowie "trouble")) +

+
margin: 10px 5px 10px 5px;
+{{ languages( { "en": "en/Guide_to_Shorthand_CSS" } ) }} diff --git "a/files/pl/web/css/skr\303\263cone_deklaracje_css/index.html" "b/files/pl/web/css/skr\303\263cone_deklaracje_css/index.html" deleted file mode 100644 index fa244eb571..0000000000 --- "a/files/pl/web/css/skr\303\263cone_deklaracje_css/index.html" +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Skrócone deklaracje CSS -slug: Web/CSS/Skrócone_deklaracje_CSS -tags: - - CSS - - Wszystkie_kategorie -translation_of: Web/CSS/Shorthand_properties ---- -

-

-

Dlaczego skracamy deklaracje CSS?

-

Wielu programistów CSS stosuje skrócone wersje często stosowanych własności w celu zaoszczędzenia czasu i energii. Chociaż skracanie deklaracji może wydawać się nie intuicyjnie i prawdopodobnie będzie wymagało trochę zapamiętywania, to z całą pewnością zaoszczędzi nam pisania na klawiaturze, podczas tworzenia dużych lub kompleksowych arkuszy stylów. -

-

Własności tła

-

Tło określone za pomocą następujących własności: -

-
background-color: #000;
-background-image: url(images/bg.gif);
-background-repeat: no-repeat;
-background-position: top right;
-

Można zapisać w jednej deklaracji jako: -

-
background: #000 url(images/bg.gif) no-repeat top right;
-

(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus background-attachment: scroll oraz kilku dodatkowych własności w CSS3) -

-

Własności czcionki

-

Następujące deklaracje: -

-
font-style: italic;
-font-weight: bold;
-font-size: .8em;
-line-height: 1.2;
-font-family: Arial, sans-serif;
-

Mogą zostać skrócone do następującej deklaracji:

-
font: italic bold .8em/1.2 Arial, sans-serif;
-

(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus font-variant: normal i font-size-adjust: none (CSS2.0 / css3), font-stretch: normal (css3).) -

-

Własności obramowania

-

Obramowanie, szerokość, kolor i styl możemy uprościć do jednej deklaracji. Na przykład: -

-
border-width: 1px;
-border-style: solid;
-border-color: #000;
-

Możemy zapisać jako: -

-
border: 1px solid #000;
-

Własności margin/padding

-

Skrócona wersja wartości margin i padding działa w ten sam sposób. Następujące deklaracje CSS:

-
margin-top: 10px;
-margin-right: 5px;
-margin-bottom: 10px;
-margin-left: 5px;
-

Są tym samym, co poniższa deklaracja (ważne jest, aby wartości były rozmieszczone zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od wartości top: top, right, bottom i left (TRBL, spółgłoski w słowie "trouble")) -

-
margin: 10px 5px 10px 5px;
-{{ languages( { "en": "en/Guide_to_Shorthand_CSS" } ) }} diff --git a/files/pl/web/css/type_selectors/index.html b/files/pl/web/css/type_selectors/index.html new file mode 100644 index 0000000000..13dc191bb1 --- /dev/null +++ b/files/pl/web/css/type_selectors/index.html @@ -0,0 +1,80 @@ +--- +title: Selektory typu +slug: Web/CSS/Selektory_typu +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

Selektory typu dopasowują wszystkie elementy mające taką samą nazwę jak dany selektor. Własności zostaną zastosowane do każdego elementu danego typu niezależnie od tego, gdzie znajduje się w drzewie dokumentu.

+ +

Składnia

+ +
selektor {własności }
+
+ +

selektor jest do dowolnym elementem np. p, div, a, table.

+ +

Przykład

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Span z tekstem.</span>
+<p>Akapit z tekstem.</p>
+<span>Span z większą ilością tekstu.</span>
+
+ +

Rezultat

+ +

{{EmbedLiveSample('Przykład', '100%', 150)}}

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}No changes
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Initial definition
+ +

Kompatybilność przeglądarek

+ + + +

{{Compat("css.selectors.type")}}

diff --git a/files/pl/web/css/universal_selectors/index.html b/files/pl/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..c3c4952f06 --- /dev/null +++ b/files/pl/web/css/universal_selectors/index.html @@ -0,0 +1,104 @@ +--- +title: Selektor uniwersalny +slug: Web/CSS/Selektor_uniwersalny +tags: + - CSS + - Selektory +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

Selektor uniwersalny (*) dopasowuje elementy wszystkich typów.

+ +
/* Wybierz wszystkie elementy */
+* {
+  color: green;
+}
+ +

Począwszy od CSS3, gwiazdka może być używana w połączeniu z {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Składnia

+ +
* { własności }
+ +

Gwiazdka jest opcjonalna w przypadku prostych selektorów. Np.: *.warning i .warning są równoważne.

+ +

Przykłady

+ +

CSS

+ +
* [lang^=pl] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* automatycznie czyści opływanie dla rodzeństwa znajdującego się bezpośrednio po elemencie z klasą .floating */
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="pl">Zielony span</span> w czerwonym akapicie.
+</p>
+<p id="maincontent" lang="pl">
+  <span class="warning">czerwony span</span> w zielonym akapicie.
+</p>
+ +

Rezultat

+ +

{{EmbedLiveSample('Przykłady')}}

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-elements
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.selectors.universal")}}

diff --git "a/files/pl/web/css/warto\305\233\304\207_pocz\304\205tkowa/index.html" "b/files/pl/web/css/warto\305\233\304\207_pocz\304\205tkowa/index.html" deleted file mode 100644 index 8144cb37ba..0000000000 --- "a/files/pl/web/css/warto\305\233\304\207_pocz\304\205tkowa/index.html" +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Wartość początkowa -slug: Web/CSS/Wartość_początkowa -tags: - - CSS - - 'CSS:Dokumentacje' - - Dokumentacje - - Wszystkie_kategorie -translation_of: Web/CSS/initial_value ---- -

{{ CSSRef() }} -

-

Podsumowanie

-

Wartość początkowa podana w podsumowaniu każdej własności CSS ma odmienne znaczenie własności dziedziczonych i własności niedziedziczonych. -

Dla własności dziedziczonych wartość początkowa używana jest tylko dla elementu źródłowego, gdy nie określono wartości elementu. -

Dla własności niedziedziczonych wartość początkowa używana jest dla każdego elementu, gdy nie określono wartości elementu. -

W CSS3 dodano wartość initial, by pozwolić autorom na wyraźne określenie wartości początkowej. -

-

Zobacz również

-

Własności dziedziczone i niedziedziczone, initial -


-

-
-
-{{ languages( { "en": "en/CSS/initial_value", "es": "es/CSS/Valor_inicial", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value" } ) }} diff --git a/files/pl/web/css/webkit_extensions/index.html b/files/pl/web/css/webkit_extensions/index.html new file mode 100644 index 0000000000..0b60bd4475 --- /dev/null +++ b/files/pl/web/css/webkit_extensions/index.html @@ -0,0 +1,358 @@ +--- +title: Rozszerzenia WebKit +slug: Web/CSS/Rozszerzenia_WebKit +tags: + - CSS + - Referencje CSS +translation_of: Web/CSS/WebKit_Extensions +--- +
{{CSSRef}}
+ +

Webkit wspiera wiele rozszerzeń dedykowanych CSS opatrzonych prefiksem -webkit. Wszystkie właściwości opatrzone prefiksem -webkit działają również z prefiksem -apple.

+ +

Niektóre z tych właściwości zostały zawarte w szkicu specyfikacji CSS w celu włączenia do ostatecznej rekomendacji, ale są one jeszcze eksperymentalne. Niektóre z tych niestandardowych właściwości nie wchodzą w skład linii standardowo obowiązującej.

+ +

Jednostki z prefiksem WebKit obowiązującego standardu

+ +
+

A – C

+ + + +

F

+ + + +

G

+ + + +

H – O

+ + + +

M

+ + + +

P

+ + + +

Q – Z

+ + +
+ +

Jednostki z prefiksem WebKit z odpowiednikiem bez prefiksu

+ +

W celu maksymalizacji kompatybilności z Twoim CSS powinienneś/powinnaś stosować właściwości standardu bez prefiksu zamiast opcji z prefiksem. Poniżej znajduje się lista wszystkich wariantów:

+ +
+

A

+ + + +

B

+ + + +

C – N

+ + + +

O – S

+ + + +

T – Z

+ + +
+ +

Firmowe jednostki z prefiksem WebKit (nie do używania na stronach internetowych)

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D E

+ + + +

F

+ + + +

G

+ + + +

H – K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P Q

+ + + +

R

+ + + +

S

+ + + +

T – Z

+ + +
+ +

Zobacz również

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