From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/nl/web/css/@namespace/index.html | 136 + files/nl/web/css/_colon_only-of-type/index.html | 101 + files/nl/web/css/_colon_required/index.html | 110 + files/nl/web/css/animation-duration/index.html | 131 + .../web/css/animation-iteration-count/index.html | 127 + files/nl/web/css/box-sizing/index.html | 145 + .../css/css_colors/color_picker_tool/index.html | 3221 ++++++++++++++++++++ files/nl/web/css/css_colors/index.html | 119 + .../nl/web/css/css_flexible_box_layout/index.html | 118 + files/nl/web/css/css_images/index.html | 152 + files/nl/web/css/css_positioning/index.html | 63 + .../de_stapelcontext/index.html | 239 ++ .../understanding_z_index/index.html | 51 + files/nl/web/css/cursor/index.html | 333 ++ files/nl/web/css/index.html | 65 + files/nl/web/css/padding-bottom/index.html | 101 + files/nl/web/css/voor_beginners/index.html | 62 + 17 files changed, 5274 insertions(+) create mode 100644 files/nl/web/css/@namespace/index.html create mode 100644 files/nl/web/css/_colon_only-of-type/index.html create mode 100644 files/nl/web/css/_colon_required/index.html create mode 100644 files/nl/web/css/animation-duration/index.html create mode 100644 files/nl/web/css/animation-iteration-count/index.html create mode 100644 files/nl/web/css/box-sizing/index.html create mode 100644 files/nl/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/nl/web/css/css_colors/index.html create mode 100644 files/nl/web/css/css_flexible_box_layout/index.html create mode 100644 files/nl/web/css/css_images/index.html create mode 100644 files/nl/web/css/css_positioning/index.html create mode 100644 files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html create mode 100644 files/nl/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/nl/web/css/cursor/index.html create mode 100644 files/nl/web/css/index.html create mode 100644 files/nl/web/css/padding-bottom/index.html create mode 100644 files/nl/web/css/voor_beginners/index.html (limited to 'files/nl/web/css') diff --git a/files/nl/web/css/@namespace/index.html b/files/nl/web/css/@namespace/index.html new file mode 100644 index 0000000000..469bdd810f --- /dev/null +++ b/files/nl/web/css/@namespace/index.html @@ -0,0 +1,136 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@namespace +--- +

{{CSSRef}}

+ +

Samenvatting

+ +

@namespace is een at-rule welke XML namespaces definieert zodat deze gebruikt kunnen worden in een CSS style sheet. De gedefinieerde namespaces kunnen gebruikt worden om de universal, type, en attribute selectors alleen elementen binnen de namespace te laten selecteren. De @namespace regel heeft in het algemeen alleen toegevoegde waarde wanneer deze toegepast wordt in documenten welke meerdere namespaces hebben—zoals HTML5 met inline SVG of MathML, of XML met meerdere gebruikte woordenlijsten.  

+ +

Elke @namespace regel moet alle @charset en @import regels volgen, en moet vóór alle andere at-rules en style declarations staan in een style sheet.

+ +

@namespace kan gebruikt worden om de standaard namespace vast te leggen voor een style sheet. Wanneer een standaard namespace is vastgelegd, gelden alle universele en type selectors (maar geen attribute selectors, zie de opmerking onderaan) alleen voor de elementen binnen de standaard namespace.

+ +

De @namespace regel kan ook gebruikt worden om een namespace prefix vast te leggen. Wanneer een universele, type of attribute selector wordt voorafgegaan met een namespace, dan geldt deze selector alleen wanneer de namespaceen de naam van het element of attribute matchen.

+ +

In HTML5 worden namespaces automatisch toegepast op bekende foreign elements. Dit zorgt ervoor dat HTML elementen zich gedragen alsof ze in de XHTML namespace zijn (http://www.w3.org/1999/xhtml), zelfs als er geen xmlns attribuut in het document staat, en de<svg> en <math> elementen worden toegewezen aan hun bijbehorende namespaces (http://www.w3.org/2000/svg en http://www.w3.org/1998/Math/MathML).

+ +
+

Note: In XML heeft een attribuut geen namespace, behalve als er een prefix op een attribuut is vastgelegd (bijv., xlink:href). In andere woorden, attributen nemen de namespace van het element waarop ze staan niet over. Om dit gedrag na te bootsen geldt de standaard namespace in CSS niet voor attribuut selectors.

+
+ +

Syntaxis

+ +
/* Standaard namespace */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* Prefixed namespace */
+@namespace prefix url(XML-namespace-URL);
+@namespace prefix "XML-namespace-URL";
+ +

Formele syntaxis

+ +
{{csssyntax}}
+ +

Voorbeelden

+ +
@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* Dit selecteert alle XHTML <a> elementen, omdat XHTML de standaard non-prefixed namespace is */
+a {}
+
+/* Dit selecteert alle SVG <a> elementen */
+svg|a {}
+
+/* Dit selecteert zowel XHTML als SVG <a> elementen */
+*|a {}
+
+ +

Specificaties

+ + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}Eerste definitie
+ +

Browser compatibiliteit

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1.0)}}{{ CompatGeckoDesktop(1.0) }}9.08.01.0
Namespace selector (|){{CompatChrome(1.0)}}{{ CompatGeckoDesktop(1.0) }}9.08.03.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/nl/web/css/_colon_only-of-type/index.html b/files/nl/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..3c65dd794f --- /dev/null +++ b/files/nl/web/css/_colon_only-of-type/index.html @@ -0,0 +1,101 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - CSS Pseudo-class + - Layout + - Reference + - Web +translation_of: 'Web/CSS/:only-of-type' +--- +
{{CSSRef}}
+ +

Beschrijving

+ +

De :only-of-type CSS pseudo-class representeerd elk element dat geen elementen heeft van hetzelfde type op hetzelfde niveau.

+ +

Syntax

+ +
element:only-of-type { style properties }
+
+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}Geen verandering.
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}Initiële definitie.
+ +

Browser compatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Bekijk ook

+ + diff --git a/files/nl/web/css/_colon_required/index.html b/files/nl/web/css/_colon_required/index.html new file mode 100644 index 0000000000..6cca75ffc4 --- /dev/null +++ b/files/nl/web/css/_colon_required/index.html @@ -0,0 +1,110 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +translation_of: 'Web/CSS/:required' +--- +

{{ CSSRef() }}

+ +

Summary

+ +

De :required CSS pseudo-class staat voor elk {{ HTMLElement("input") }} element waar de  {{ htmlattrxref("required", "input") }} attribute op staat. Dit stelt formulieren in staat om gemakkelijk aan te tonen welke velden geldige data hebben voordat een formulier verzonden kan worden.

+ +

De {{ cssxref(":optional") }} pseudo-class kan gebruikt worden voor uiterlijk van optionele formulier velden.

+ +

Syntax

+ +
{{csssyntax}}
+ +

Voorbeeld

+ +

Bekijk {{ cssxref(":invalid") }} voor een voorbeeld.

+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatuscommentaat
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}Geen verandering.
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}Staat voor de semantiek van HTML en validatie.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}Geen verandering.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}{{ Spec2('CSS3 Basic UI') }}Staat voor de pseudo-class, maar niet voor de geassocieerde semantiek.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support10.0{{ CompatGeckoDesktop("2") }}1010.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

Bekijk ook

+ + diff --git a/files/nl/web/css/animation-duration/index.html b/files/nl/web/css/animation-duration/index.html new file mode 100644 index 0000000000..9a1ae1d7fb --- /dev/null +++ b/files/nl/web/css/animation-duration/index.html @@ -0,0 +1,131 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - CSS Animaties + - CSS Eigenschap + - Experimenteel + - Referentie +translation_of: Web/CSS/animation-duration +--- +
{{CSSRef}} {{ SeeCompatTable() }}
+ +

Samenvatting

+ +

De animation-duration CSS-eigenschap specificeert hoelang één cyclus duurt in een animatie.

+ +

Een waarde van 0s, wat de standaardwaarde is, geeft aan dat er geen animatie moet plaatsvinden.

+ +

Het is vaak handig om de eigenschap {{ cssxref("animation") }} te gebruiken om alle animatie-eigenschappen in een keer in te stellen.

+ +

{{cssinfo}}

+ +

Syntaxis

+ +
animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+
+ +

Waardes

+ +
+
<time>
+
De tijdsduur om één cyclus te voltooien voor een animatie. Dit mag gespecificeerd worden in seconden (door s als eenheid te geven) of in milliseconden (door ms als eenheid te geven). Als je de eenheid niet specificeert, dan is de definiëring ongeldig.
+
+ +
Opmerking: Negatieve waardes zijn ongeldig en zullen ervoor zorgen dat de definiëring genegeerd wordt. Sommige oude implementaties, met een voorvoegsel, kunnen hetzelfde worden beschouwd als 0s.
+ +

Formele syntaxis

+ +
{{csssyntax}}
+ +

Voorbeelden

+ +

Zie CSS animations voor voorbeelden.

+ +

Specificaties

+ + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}{{ Spec2('CSS3 Animations') }}Initial definition
+ +

Browser compatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
KenmerkChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basisondersteuning3.0{{ property_prefix("-webkit") }}
+ {{CompatChrome(43.0)}}		{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.10		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
KenmerkAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basisondersteuning2.0{{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatNo() }}{{ CompatNo() }}4.2{{ property_prefix("-webkit") }}{{CompatChrome(43.0)}}
+
+ +

Zie ook:

+ + diff --git a/files/nl/web/css/animation-iteration-count/index.html b/files/nl/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..8fa2826c33 --- /dev/null +++ b/files/nl/web/css/animation-iteration-count/index.html @@ -0,0 +1,127 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - animatie +translation_of: Web/CSS/animation-iteration-count +--- +
{{CSSRef}} {{ SeeCompatTable() }}
+ +

Summary

+ +

Met de animation-iteration-count CSS property beschrijf je het aantal keren dat een animatie speelt totdat de animatie stopt.

+ +

Je kunt ook  de shorthand property te gebruiken om alle animatie-eigenschappen meteen in één regel in te stellen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
animation-iteration-count: infinite;
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+animation-iteration-count: 2, 0, infinite;
+
+ +

Values

+ +
+
infinite
+
The animatie herhaalt zich non-stop.
+
<number>
+
Hoeveel keer een animatie zich herhaalt; 1 keer is default. Negatieve waarden zijn ongeldig. Je mag ook non-integer waarden declareren om een deel van de animatie af te spelen (bijvoorbeeld 0.5 zal de helft van de animatie-cyclus afspelen).
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

ZIe CSS animations voor voorbeelden.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+ {{CompatChrome(43.0)}}		{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10 12 {{ property_prefix("-o") }}
+ 12.10		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatChrome(43.0)}}
+  
+
+ +

See also

+ + diff --git a/files/nl/web/css/box-sizing/index.html b/files/nl/web/css/box-sizing/index.html new file mode 100644 index 0000000000..ed31e59295 --- /dev/null +++ b/files/nl/web/css/box-sizing/index.html @@ -0,0 +1,145 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Attribuut + - Referenctie +translation_of: Web/CSS/box-sizing +--- +
 
+ +

Overzicht

+ +

Het box-sizing attribuut wordt gebruikt om het standaard CSS box model aan te passen. Het is mogelijk om gedrag aan te passen van browsers die de CSS box model specificatie niet correct implementeren.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword waarden */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Globale waarden */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+
+ +

Waarden

+ +
+
content-box
+
Dit is de initiële en standaard waarde, gespecificeerd door de CSS standaard. De {{Cssxref("width")}} en {{Cssxref("height")}} attributen worden berekend aan de hand van de inhoud, zonder rekening te houden met padding, border of margin. Opmerking: Padding, border en margin worden toegepast aan de buitenkant van het element. Voorbeeld: .box {width: 350px;} Daarna voeg  je {border: 10px solid black;} toe. Resultaat: (in browser) .box {width:370px;}
+
+ Kort samengevat worden de afmetingen van een element berekent als volgt: width = breedte van de content en height = hoogte van de content, exclusief borders of paddings.
+
+ +
+
border-box
+
De {{Cssxref("width")}} en {{Cssxref("height")}} waarden bevatten ook de waarden van padding en border, maar niet van margin. Dit is het box model dat Internet Explorer implementeert wanneer het document in Quircks mode zit. Opmerking: Padding en border bevinden zich aan de binnenkant van het element. Voorbeeld: .box {width: 350px; border: 10px solid black;} resulteert in een gerenderd element met width: 350px. De inhoud kan nooit negatief zijn, wat het onmogelijk maakt om aan de hand van border-box een element de doen verdwijnen.
+
De afmetingen worden berekend als volgt: width = border + padding + breedte van de inhoud en height = border + padding + hoogte van de inhoud.
+
+ +

Formele syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
.example {
+  box-sizing: border-box;
+}
+ +

Specificaties

+ + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Initiele definitie
+ +

Browser compatibiliteit

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Standaard ondersteuning1.0 {{property_prefix("-webkit")}}[1]
+ 10.0		12.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("29.0")}}		 +

8.0[1]

+ 		7.03.0 (522){{property_prefix("-webkit")}}
+ 5.1[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Standaard ondersteuning2.1{{property_prefix("-webkit")}}[1]
+ 4.0		{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}} [1]
+ {{CompatGeckoMobile("29.0")}}		9.0 +

7.0 {{property_prefix("-webkit")}}
+ 10.0

+ 		3.2 {{property_prefix("-webkit")}}
+ 4.0
+
+ +

[1] box-sizing wordt niet gerespecteerd als de hoogte wordt berekend door {{domxref("window.getComputedStyle()")}}, in Internet Explorer (alle versies), Firefox versie 22 en lager en in Chrome. Edge heeft dit probleem niet. Opmerking: IE9 zijn eigen currentStyle attribuut geeft niet de juiste waarde voor height terug.

+ +

[2] De vendor prefix -webkit is verwijderd sinds 534.12.

+ +

Zie ook

+ + diff --git a/files/nl/web/css/css_colors/color_picker_tool/index.html b/files/nl/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..ba0fab84d7 --- /dev/null +++ b/files/nl/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3221 @@ +--- +title: Kleurenkiezer-hulpprogramma +slug: Web/CSS/CSS_Colors/Color_picker_tool +tags: + - CSS + - Hulpmiddelen + - Tools +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}}

+ +

Dit hulpmiddel maakt het makkelijk om zelfgekozen kleuren voor het web te maken, aan te passen en hiermee te experimenteren. Ook kunt u hiermee makkelijk naar verschillende soorten kleurindelingen converteren die door CSS worden ondersteund, waaronder HEXA-kleuren, RGB (Rood/Groen/Blauw) en HSL (Hue/Saturation/Lightness - Tint/Verzadiging/Helderheid). Beheer over het alpha-kanaal wordt ook ondersteund op de indelingen RGB (rgba) en HSL (hsla).

+ +

Elke kleur wordt tijdens het aanpassen in alle drie de standaard CSS-indelingen voor het web aangeboden. Daarnaast wordt, gebaseerd op de huidige geselecteerde kleur, zowel een palet voor HSL en HSV als voor alpha gegenereerd. Het kleurenkiezerveld in ‘eyedropper’-stijl kan tussen HSL- en HSV-indeling worden omgeschakeld.

+ +

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

+ +

diff --git a/files/nl/web/css/css_colors/index.html b/files/nl/web/css/css_colors/index.html new file mode 100644 index 0000000000..48b67295d0 --- /dev/null +++ b/files/nl/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +
{{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/nl/web/css/css_flexible_box_layout/index.html b/files/nl/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..879bb404f6 --- /dev/null +++ b/files/nl/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Box Layout + - Overzicht + - Referentie +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +
{{CSSRef}}
+ +

CSS Flexible Box Layout is een CSS module die het box model van CSS verder optimaliseert. Flexbox is geoptimaliseerd voor user interface design en de lay-out van items. Onderliggende items van een flex container kunnen in elke richting worden geplaatst op een as. Afmetingen van items in een flex container zijn flexibel. Zo kunnen afmetingen groeien om de ongebruikte ruimte te vullen, of kunnen ze krimpen om binnen de grenzen van het ouder element te passen.

+ +

+

Basis voorbeeld

+ + +

In het voorbeeld hieronder is een container ingesteld als display: flex waardoor de drie onderliggende elementen "flex elementen" worden. De waarde van justify-content is ingesteld op space-between om de items gelijkmatig op de hoofdas te plaatsen. Tussen elk item wordt een gelijke hoeveelheid ruimte geplaatst, waarbij de linker- en rechterartikelen gelijk liggen met de randen van de flex container. Op de dwarsas zijn de items uitgetrokken (stretched) tot gelijke hoogte. Dit komt omdat de default waarde voor align-items stretch is. De items strekken zich uit tot de hoogte van de flex container, waardoor ze elk even lang lijken als het langste item.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

Referentie

+ +

CSS Eigenschappen

+ +
+ +
+ +

Alignment Eigenschappen

+ +

De eigenschappen align-content, align-self, align-items en justify-content waren aanvankelijk onderdeel van de Flexbox-specificatie, maar worden nu gedefinieerd in Box Alignment-specificatie. De Flexbox-specificatie verwijst nu naar de Box Alignment-specificatie voor up-to-date definities. Alsook extra Alignment eigenschappen worden nu gedefinieerd in de Box Alignment-specificatie.

+ +
+ +
+ +

Woordenlijst resultaten

+ +
+ +
+ +

Gidsen

+ +
+
Basisconcepten van Flexbox
+
Een overzicht van de eigenschappen van flexbox
+
Verhouding Flexbox tot andere layout methodes
+
Hoe flexbox zich verhoudt tot andere layout methodes, en tot andere CSS-specificaties
+
Items uitlijnen in een flex container
+
Hoe de Box Alignment-eigenschappen werken met flexbox.
+
Flex items ordenen
+
Hoe de volgorde en de richting van items te wijzigen, inclusief geldende aandachtspunten hierbij
+
Ratios van flex items langs de hoofdas beheren
+
Beschrijving van de eigenschappen flex-grow, flex-shrink en flex-basis.
+
Wrapping van flex items
+
Hoe flex containers creëren met meerdere lijnen, en de de weergave van de items in die lijnen instellen.
+
Typische Flexbox use cases
+
Design pattersn voor typische use cases
+
Achterwaartse compatibilteit van Flexbox
+
Browser status van flexbox, interoperabiliteit en ondersteuning van oudere browsers, en een overzicht van de versies van de specificatie
+
+ +

Specificaties

+ + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

Zie ook

+ +
+
Flexbugs
+
een door de community samengestelde lijst met Flexbox gerelateerde browser bugs en workarounds
+
Cross-browser Flexbox mixins
+
Een verzameling mixins om crossbrowser Flexbox functionaliteiten te voorzien in oudere browsers die de moderne Flexbox syntax niet ondersteunen
+
diff --git a/files/nl/web/css/css_images/index.html b/files/nl/web/css/css_images/index.html new file mode 100644 index 0000000000..f6fb2c9289 --- /dev/null +++ b/files/nl/web/css/css_images/index.html @@ -0,0 +1,152 @@ +--- +title: CSS Images +slug: Web/CSS/CSS_Images +tags: + - CSS + - CSS Images + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Images +--- +
{{CSSRef}}
+ +

CSS Images is a module of CSS that defines what types of images can be used (the {{cssxref("<image>")}} type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.

+ +

Reference

+ +

Properties

+ +
+ +
+ +

Functions

+ +
+ +
+ +

Data types

+ +
+ +
+ +

Guides

+ +
+
Using CSS gradients
+
Presents a specific type of CSS images, gradients, and how to create and use these.
+
Implementing image sprites in CSS
+
Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images')}}{{Spec2('CSS3 Images')}} 
{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}{{Spec2('Compat')}}Standardizes the -webkit prefixed gradient value functions
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}} 
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/nl/web/css/css_positioning/index.html b/files/nl/web/css/css_positioning/index.html new file mode 100644 index 0000000000..61afa2e242 --- /dev/null +++ b/files/nl/web/css/css_positioning/index.html @@ -0,0 +1,63 @@ +--- +title: CSS Positioned Layout +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +
{{CSSRef}}
+ +

CSS Positioned Layout is a module of CSS that defines how to position elements on the page.

+ +

Reference

+ +

CSS properties

+ +
+ +
+ +

Guides

+ +
+
Understanding CSS z-index
+
Presents the notion of stacking context and explains how z-ordering works, with several examples.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
diff --git a/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html b/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html new file mode 100644 index 0000000000..2256b38632 --- /dev/null +++ b/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html @@ -0,0 +1,239 @@ +--- +title: Het stapelverband +slug: Web/CSS/CSS_Positioning/Understanding_z_index/De_stapelcontext +tags: + - CSS + - Geavanceerd + - Gids + - Referentie + - Stapelverband + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{cssref}}
+ +

Het stapelverband (stacking context) is een driedimensionale conceptualisatie van HTML-elementen langs de denkbeeldige z-as ten opzichte van de gebruiker, van wie wordt aangenomen dat deze wordt geconfronteerd met de viewport of de webpagina. HTML-elementen bezetten deze ruimte in prioriteitsvolgorde op basis van elementattributen.

+ +

Het stapelverband

+ +

In het vorige deel van dit artikel, z-index gebruiken, wordt de weergavevolgorde van bepaalde elementen beïnvloed door hun z-indexwaarde. Dit gebeurt omdat deze elementen speciale eigenschappen hebben waardoor ze een stapelverband vormen.

+ +

Een stapelverband wordt gevormd, waar dan ook in het document, door elk element in de volgende scenario's:

+ + + +

Binnen zo'n stapelverband worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelverbanden alleen betekenis hebben binnen het stapelverband van hun ouder element. Stapelverbanden worden atomair behandeld als een enkele eenheid in de ouders' stapelverband.

+ +

Samengevat:

+ + + +
Opmerking: de hiërarchie van stapelverbanden is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelverbanden maken. We kunnen zeggen dat elementen die hun eigen stapelverbanden niet creëren, worden geassimileerd door de ouders' stapelverband.
+ +

Het voorbeeld

+ +

Example of stacking rules modified using z-index

+ +

In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelverband door hun position en z-index waardes. De hiërarchie van de stapelverbanden is als volgt georganiseerd:

+ + + +

Het is belangrijk om op te merken dat DIV #4, DIV #5 en DIV #6 kinderen zijn van DIV #3, dus het stapelen van deze elementen gebeurd volledig binnen DIV #3. Wanneer het stapelen binnen DIV #3 is voltooid, wordt DIV #3 met haar kinderen gestapeld binnen de volgende stapelverband, namelijk die van het root element <html>.

+ +
+

Notes:

+ + +
+ +

Voorbeeld

+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+</div>
+
+ +

CSS

+ +
* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}
+ +

Resultaat

+ +

{{ EmbedLiveSample('Example', '100%', '396') }}

+ +

Zie ook

+ + + +
+

Original Document Information

+ + +
diff --git a/files/nl/web/css/css_positioning/understanding_z_index/index.html b/files/nl/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..554652f1b8 --- /dev/null +++ b/files/nl/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,51 @@ +--- +title: Understanding CSS z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - NeedsTranslation + - Reference + - TopicStub + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +
{{cssref}}
+ +

In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+ +
+

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

+
+ +

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

+ +

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

+ +

This article will try to explain those rules, with some simplification and several examples.

+ +
    +
  1. Stacking without the z-index property: The stacking rules that apply when z-index is not used.
    2. +
  2. Stacking with floated blocks: How floating elements are handled with stacking.
    3. +
  3. Using z-index: How to use z-index to change default stacking.
    4. +
  4. The stacking context: Notes on the stacking context.
    5. +
  5. Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
    6. +
  6. Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
    7. +
  7. Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
    8. +
+ +
+

Original Document Information

+ + + +

Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.

+
diff --git a/files/nl/web/css/cursor/index.html b/files/nl/web/css/cursor/index.html new file mode 100644 index 0000000000..89504857f5 --- /dev/null +++ b/files/nl/web/css/cursor/index.html @@ -0,0 +1,333 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS eigenschappen + - Cursor + - Custom Cursor + - Reference + - UI + - mouse + - pijl + - pointer +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

het CSS-eigenschap cursor geeft aan welke muiscursor moet worden weergegeven wanneer de muisaanwijzer zich boven een element bevindt.

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

Syntax

+ +
/* Keyword value */
+cursor: pointer;
+cursor: auto;
+
+/* URL, with a keyword fallback */
+cursor: url(hand.cur), pointer;
+
+/* URL and coordinates, with a keyword fallback */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* Global values */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+
+ +

De eigenschap cursor wordt opgegeven als geen of meer <url> waarden, gescheiden door komma's, gevolgd door één verplichte zoekwoordwaarde. Elke <url> zou naar een afbeeldingsbestand moeten wijzen. De browser probeert de eerste opgegeven afbeelding te laden, terug te vallen naar de volgende als dit niet kan, en terug te vallen naar de sleutelwoordwaarde als er geen afbeeldingen kunnen worden geladen (of als geen enkele waarde is opgegeven).

+ +

Elke <url> kan optioneel worden gevolgd door een paar spaties gescheiden nummers die de coördinaten  <x><y> representeren. Hiermee wordt de hotspot van de cursor ingesteld ten opzichte van de linkerbovenhoek van de afbeelding.

+ +

Bijvoorbeeld , dit specifeerd twee afbeeldingen die gebruikmaken van <url> waarden, voorzien van <x><y> coördinaten voor de tweede en terugvallen op de progress sleutelwoordwaarde als geen van beide afbeeldingen kunnen worden geladen:

+ +
cursor: url(one.svg), url(two.svg) 5 5, progress;
+ +

Values

+ +
+
<url>
+
Een url(…) of een door komma's gescheiden lijst url(…), url(…), …, wijzend naar een afbeeldingsbestand. Meer dan één {{cssxref ("<url>")}} kan als fallbacks worden aangeboden, voor het geval sommige cursorbeeldtypen niet worden ondersteund. Een niet-URL-fallback (een of meer sleutelwoorden) moet aan het einde van de fallback-lijst staan. Zie URL-waarden gebruiken voor de cursoreigenschapsing voor meer informatie.
+
<x> <y> {{experimental_inline}}
+
Optionele x- en y-coördinaten. Twee niet-unitaire niet-negatieve getallen van minder dan 32.
+
Keyword values
+
+

Beweeg uw muis over waarden om hun live uiterlijk in uw browser te zien:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategorieCSS valueActualDescription
AlgemeenautoDe browser bepaalt de cursor die moet worden weergegeven op basis van de context. bv, text bij zwevende tekst.
defaultdefault.gifDe platform afhankelijke basis cursor. Het is meestal een pijl.
noneEr wordt geen cursor weergegeven.
Links & statuscontext-menucontext-menu.pngEen contextmenu is beschikbaar.
helphelp.gifHelp-informatie is beschikbaar.
pointerpointer.gifHet element kan worden geactiveerd door erop te klikken. Dit wordt bijvoorbeeld gebruikt, bij het zweven boven links. Typisch een afbeelding van een hand.
progressprogress.gifHet programma is bezig in de achtergrond, de gebruiker kan nog steeds een interactie aangaan met het interface (dit integenstelling met wait).
waitwait.gifHet programma is bezig en de gebruiker kan geen interactie ondergaan met het interface (dit in tegenstelling met progress). Is soms een afbeelding van een zandloper of van een horloge.
Selectioncellcell.gif +

De tabel cel kan geslecteerd worden.

+
crosshaircrosshair.gif +

Kruis cursor, vaak gebruikt om een selectie in een bitmap aan te duiden.

+
texttext.gifDe tekst kan worden geselecteerd. Meestal in de vorm van een I-balk.
vertical-textvertical-text.gifDe verticale tekst kan worden geslecteerd. Meestal in de vorm van een zijdelingse I-beam.
Drag & dropaliasalias.gifEen alias of shortcut wordt gecreëerd.
copycopy.gifIets kan worden gekopieerd.
movemove.gifIets kan worden verplaatst.
no-dropno-drop.gifEen item mag niet op de huidige locatie worden geplaatst.
+ {{bug("275173")}}: Op Windows en Mac OS X, no-drop is hetzelfde als not-allowed.
not-allowednot-allowed.gifIets kan niet worden gedaan.
Resize & scrollingall-scrollall-scroll.gifIets kan gescrold worden in elke richting (pannend).
+ {{bug("275174")}}: Op Windows, all-scroll is hetzelfde als move.
col-resizecol-resize.gifDe item/kolom groote kan verticaal worden aangepast. Vaak weergegeven als pijlen die links en rechts wijzen met een verticale balk tussen beide.
row-resizerow-resize.gifDe item/kolom groote kan horizontaal worden aangepast. Vaak weergegeven als pijlen die boven en onder wijzen met een horizontale balk tussen beide.
n-resizeExample of a resize towards the top cursor +

Een rand kan bewogen worden. Bijvoorbeeld de  se-resize cursor wordt gebruikt waneer een beweging start van de zuid-oost hoek van een box.

+ +

In sommige omgevingen wordt een gelijk bi-directioneel rezise cursor weergegeven.Bijvoorbeeld, n-resize ens-resize zijn hetzelfde als ns-resize.

+
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifBi-directioneel resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Iets kan worden in- of uitvergroot.

+
zoom-outzoom-out.gif
Grabgrabgrab.gif +

Iets kan worden vastgepakt. (Gesleept worden om te verplaatsen)

+
grabbinggrabbing.gif
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Usage notes

+ +

Hoewel de specificaties geen grootte limitaties defineerd voor cursor, kunnen individuele{{Glossary("user agent", "user agents")}} kiezen dit wel te doen. Cursor aanpassingen die gebruik maken van afbeeldingen die groter zijn dan de size range gesuporteerd door de browser worden in het algemeen genegeerd.

+ +

Controleer de {{anch("Browser compatibility")}} tabel voor notities i.v.m. cursor grootte limieten.

+ +

Examples

+ +
.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* A fallback keyword value is required when using a URL */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Toevoeging van verschillend sleutelwoorden and positionerings syntaxt voor url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Initiële definitie.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + + + +

{{Compat("css.properties.cursor")}}

+ + + +

See also

+ + diff --git a/files/nl/web/css/index.html b/files/nl/web/css/index.html new file mode 100644 index 0000000000..1e924e4470 --- /dev/null +++ b/files/nl/web/css/index.html @@ -0,0 +1,65 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Layout + - Ontwerp + - Referentie + - Verdeling +translation_of: Web/CSS +--- +

CSS is één van de basistalen van het open web en heeft een gestandaardiseerde W3C-specificatie. De taal is ontwikkeld in niveau's; CSS1 is nu verouderd, CSS2.1 is een aanbeveling en CSS3, nu opgesplitst in kleinere modules, is op weg naar de standaard.

+ +
+ + +
+ + +
+

Documentatie en tutorials

+ +
+
CSS sleutelbegrippen
+
Beschrijft de syntax en vormt de taal en introduceert grondbeginselen zoals specificity en inheritance, het box model en margin collapsing, stacking en block-formatting contexten, of de initiële, berekende, gebruikte en actuele waarden. Entiteiten zoals CSS shorthand properties zijn ook beschreven.
+
CSS developer gids
+
Artikelen die je helpen met alles leren over CSS. Van de basis van het stijlen van HTML met CSS tot verschillende CSS-technieken die je inhoud gaan doen sprankelen.
+
Vaakgestelde CSS vragen
+
Antwoorden op vaakgestelde CSS vragen.
+
+
+ +
+

Hulpmiddelen voor CSS-ontwikkeling

+ +
    +
  • De W3C CSS Validatie Service kijkt of een gegeven CSS correct is. De service OnlineWebCheck.com doet hetzelfde. Beide zijn onschatbare hulpmiddelen.
    • +
  • Firefox Developer Tools staat je toe om live de CSS van de webpagina te bekijken en aan te passen via de Inspector en de Style Editor tools.
    • +
  • Firebug extensie voor Firefox, een populaire extensie staat je toe om live CSS aan te passen op bekeken websites. Dit is ideaal om aanpassingen te testen, al kan deze tool veel meer dan dat.
    • +
  • Web Developer extensie voor Firefox staat je ook toe om live CSS te bekijken en aan te passen op bekeken websites. Gemakkelijker dan Firebug, maar ook minder krachtig.
    • +
  • CSS tools.
    • +
+
+
+
+ +

Zie ook

+ + diff --git a/files/nl/web/css/padding-bottom/index.html b/files/nl/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..610b476082 --- /dev/null +++ b/files/nl/web/css/padding-bottom/index.html @@ -0,0 +1,101 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-bottom +--- +
{{CSSRef}}
+ +

De  CSS-eigenschap padding-bottom stelt de hoogte in van de vulling aan de onderkant van een element. Voor padding is het, in tegenstelling tot margins, niet toegestaan om negatieve waarden te gebruiken. De verkorte notatie voor {{cssxref("padding")}} kan worden gebruikt om binnen één declaratie de vulling aan alle vier de kanten in te stellen.

+ +
/* <length> values */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* <percentage> value */
+padding-bottom: 10%;
+
+/* Global values */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+
+ +

De paddingruimte is de ruimte tussen de inhoud en de rand van een element.

+ +

The effect of the CSS padding-bottom property on the element box

+ +

{{cssinfo}}

+ +

Syntaxis

+ +

Waarden

+ +
+
{{cssxref("length")}}
+
De grootte van de padding als vaste waarde. Mag niet negatief zijn.
+
{{cssxref("percentage")}}
+
De grootte van de padding als een percentage, relatief aan de breedte van het element waarin het betreffende element staat. Mag niet negatief zijn.
+
+ +

Formele syntaxis

+ +
{{csssyntax}}
+ +

Voorbeelden

+ +
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+
+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}{{ Spec2('CSS3 Box') }}Geen verandering ten opzichte van {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}{{ Spec2('CSS3 Transitions') }}Definieert padding-bottom als animeerbaar.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}{{ Spec2('CSS2.1') }}Geen verandering ten opzichte van {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.
{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}{{ Spec2('CSS1') }}Aanvankelijke definitie.
+ +

Browsercompatibiliteit

+ + + +

{{Compat("css.properties.padding-bottom")}}

+ +

Zie ook

+ + diff --git a/files/nl/web/css/voor_beginners/index.html b/files/nl/web/css/voor_beginners/index.html new file mode 100644 index 0000000000..b80da7dc12 --- /dev/null +++ b/files/nl/web/css/voor_beginners/index.html @@ -0,0 +1,62 @@ +--- +title: Voor Beginners +slug: Web/CSS/Voor_Beginners +translation_of: Learn/CSS/First_steps +--- +

+

+

Introductie

+

Deze cursus is een introductie op Cascading Style Sheets (CSS). Het begeleid je door de basis eigenschappen van CSS met praktische voorbeelden die je zelf kan proberen op je eigen computer. Het is opgedeeld in twee delen. +

+ + +

Deze cursus is gebaseerd op de CSS 2.1 Specificatie. +

+

Wie zou deze cursus moeten gebruiken?

+

Deze cursus is grotendeels voor beginners, maar je kan het ook gebruiken als je al wat ervaring hebt met CSS. +

Als je een beginner bent met CSS, gebruik dan Deel I van deze cursus om te begrijpen wat CSS is en hoe je het moet gebruiken. Gebruik vervolgens Deel II om te leren hoe je CSS gebruikt in Mozilla. +

Als je al wat CSS kent, kan je de delen van de cursus overslaan die je al kent, en alleen de delen lezen die je interesseren. +

Als je ervaren bent met CSS maar niet in Mozilla, kun je direct naar Deel II gaan. +

+

Wat heb je nodig voordat je begint?

+

Om het beste uit deze cursus te halen, heb je een editor nodig voor tekstbestanden en een Mozilla browser (Firefox of Mozilla Suite). Je moet ook weten hoe je deze moet gebruiken voor basishandelingen. +

Als je geen bestanden wilt veranderen, dan kun je alleen de cursus lezen en naar de plaatjes kijken, maar dat is een minder effectieve manier om te leren. +

Voor een aantal delen van deze cursus kan andere Mozilla software nodig zijn. Als je geen andere Mozilla software wil downloaden hoef je deze delen niet te volgen. +

Let op: CSS zorgt voor een manier om met kleur te werken, dus delen van deze cursus hebben kleuren nodig. Je kunt deze delen van de cursus alleen makkelijk gebruiken als je een kleurenscherm en normaal kleurenzicht hebt. +

+

Hoe je deze cursus moet gebruiken

+

Om deze cursus goed te gebruiken moet je de pagina's aandachtig en in volgorde lezen. Als je een pagina overslaat kan het moeilijk zijn latere pagina's te begrijpen. +

Gebruik de Informatie sectie op elke pagina om te begrijpen hoe CSS werkt. Gebruik de Actie sectie om CSS te proberen op je eigen computer. +

Om je begrip te testen, gebruik de uitdaging aan het einde van elke pagina. Uitkomsten voor sommige van deze uitdagingen worden op latere pagina's in de cursus bekend gemaakt. +

Om dieper in te gaan op CSS, lees de informatie die je kunt vinden in de kaders benoemd "Meer details". Gebruik de links daar om referentiemateriaal te vinden over CSS. +

+

Cursus Deel I

+

Een basis stap-voor-stap gids. +

+
  1. Wat is CSS? +
  2. Waarom CSS Gebruiken? +
  3. Hoe CSS Werkt +
  4. 'Cascading' en nalatenschap +
  5. Selectors +
  6. Leesbaar CSS +
  7. Text Stijlen +
  8. Kleur +
  9. Inhoud +
  10. Lijsten +
  11. Kaders +
  12. Layout +
  13. Tabellen +
  14. Media +
+

Cursus Deel II

+

Voorbeelden die CSS in Mozilla laten zien. +

+
  1. JavaScript +
  2. XBL Bindingen +
  3. CSS en XUL +
  4. CSS en SVG +
  5. XML data +
+{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar" } ) }} -- cgit v1.2.3-54-g00ecf