From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../web/css/-moz-box-ordinal-group/index.html | 60 - files/pt-br/web/css/-moz-cell/index.html | 9 - files/pt-br/web/css/actual_value/index.html | 34 + files/pt-br/web/css/attribute_selectors/index.html | 158 + files/pt-br/web/css/box-ordinal-group/index.html | 60 + files/pt-br/web/css/box_model/index.html | 62 - "files/pt-br/web/css/coment\303\241rio/index.html" | 49 - files/pt-br/web/css/comments/index.html | 49 + files/pt-br/web/css/computed_value/index.html | 56 + .../usando_anima\303\247\303\265es_css/index.html" | 332 -- .../css_animations/using_css_animations/index.html | 332 ++ .../border-image_generator/index.html | 2627 ++++++++++++++++ .../border-radius_generator/index.html | 1593 ++++++++++ .../web/css/css_background_and_borders/index.html | 155 - .../using_css_multiple_backgrounds/index.html | 58 - .../web/css/css_backgrounds_and_borders/index.html | 155 + .../resizing_background_images/index.html | 109 + .../using_multiple_backgrounds/index.html | 58 + .../introduction_to_the_css_box_model/index.html | 62 + .../css/css_box_model/margin_collapsing/index.html | 74 - .../mastering_margin_collapsing/index.html | 74 + .../css/css_colors/color_picker_tool/index.html | 3241 ++++++++++++++++++++ .../web/css/css_colors/seletor_de_cores/index.html | 3241 -------------------- .../basic_concepts_of_flexbox/index.html | 239 ++ .../conceitos_basicos_do_flexbox/index.html | 239 -- .../index.html | 47 - .../implementing_image_sprites_in_css/index.html | 47 + .../understanding_z_index/index.html | 48 + files/pt-br/web/css/css_reference/index.html | 75 - files/pt-br/web/css/css_selectors/index.html | 150 + files/pt-br/web/css/css_tipos/index.html | 64 - files/pt-br/web/css/css_types/index.html | 64 + .../pt-br/web/css/elemento_substituido/index.html | 40 - .../cascading_and_inheritance/index.html | 128 - .../getting_started/como_css_funciona/index.html | 126 - files/pt-br/web/css/getting_started/index.html | 98 - .../web/css/getting_started/javascript/index.html | 140 - .../pt-br/web/css/getting_started/lists/index.html | 272 -- .../getting_started/oque_é_css/index.html | 112 - .../css/getting_started/porque_usar_css/index.html | 106 - .../web/css/getting_started/seletores/index.html | 430 --- files/pt-br/web/css/hifens/index.html | 902 ------ files/pt-br/web/css/hyphens/index.html | 902 ++++++ files/pt-br/web/css/image/index.html | 157 + files/pt-br/web/css/imagem/index.html | 157 - files/pt-br/web/css/initial_value/index.html | 30 + files/pt-br/web/css/layout_mode/index.html | 25 + files/pt-br/web/css/mask/index.html | 150 + .../media_queries/using_media_queries/index.html | 639 ++++ files/pt-br/web/css/modelo_layout/index.html | 25 - files/pt-br/web/css/modelo_visual/index.html | 227 -- files/pt-br/web/css/overflow-wrap/index.html | 117 + .../index.html | 76 - .../index.html | 76 + files/pt-br/web/css/pseudo-elementos/index.html | 104 - files/pt-br/web/css/pseudo-elements/index.html | 104 + files/pt-br/web/css/reference/index.html | 75 + files/pt-br/web/css/replaced_element/index.html | 40 + files/pt-br/web/css/resolved_value/index.html | 40 + .../pt-br/web/css/seletor_de_atributos/index.html | 158 - files/pt-br/web/css/seletor_universal/index.html | 105 - files/pt-br/web/css/seletores_css/index.html | 150 - files/pt-br/web/css/sintaxe/index.html | 70 - files/pt-br/web/css/sintexe_valor/index.html | 436 --- files/pt-br/web/css/specified_value/index.html | 44 + files/pt-br/web/css/syntax/index.html | 70 + .../css/tools/border-image_generator/index.html | 2627 ---------------- .../css/tools/border-radius_generator/index.html | 1593 ---------- files/pt-br/web/css/universal_selectors/index.html | 105 + files/pt-br/web/css/used_value/index.html | 114 + files/pt-br/web/css/valor_atual/index.html | 34 - files/pt-br/web/css/valor_computado/index.html | 56 - files/pt-br/web/css/valor_espeficifco/index.html | 44 - files/pt-br/web/css/valor_inicial/index.html | 30 - files/pt-br/web/css/valor_resolvido/index.html | 40 - files/pt-br/web/css/valor_usado/index.html | 114 - .../web/css/value_definition_syntax/index.html | 436 +++ .../web/css/visual_formatting_model/index.html | 227 ++ files/pt-br/web/css/word-wrap/index.html | 117 - 79 files changed, 12507 insertions(+), 12982 deletions(-) delete mode 100644 files/pt-br/web/css/-moz-box-ordinal-group/index.html delete mode 100644 files/pt-br/web/css/-moz-cell/index.html create mode 100644 files/pt-br/web/css/actual_value/index.html create mode 100644 files/pt-br/web/css/attribute_selectors/index.html create mode 100644 files/pt-br/web/css/box-ordinal-group/index.html delete mode 100644 files/pt-br/web/css/box_model/index.html delete mode 100644 "files/pt-br/web/css/coment\303\241rio/index.html" create mode 100644 files/pt-br/web/css/comments/index.html create mode 100644 files/pt-br/web/css/computed_value/index.html delete mode 100644 "files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" create mode 100644 files/pt-br/web/css/css_animations/using_css_animations/index.html create mode 100644 files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html delete mode 100644 files/pt-br/web/css/css_background_and_borders/index.html delete mode 100644 files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html delete mode 100644 files/pt-br/web/css/css_box_model/margin_collapsing/index.html create mode 100644 files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/pt-br/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/pt-br/web/css/css_colors/seletor_de_cores/index.html create mode 100644 files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html delete mode 100644 files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html create mode 100644 files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/pt-br/web/css/css_positioning/understanding_z_index/index.html delete mode 100644 files/pt-br/web/css/css_reference/index.html create mode 100644 files/pt-br/web/css/css_selectors/index.html delete mode 100644 files/pt-br/web/css/css_tipos/index.html create mode 100644 files/pt-br/web/css/css_types/index.html delete mode 100644 files/pt-br/web/css/elemento_substituido/index.html delete mode 100644 files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html delete mode 100644 files/pt-br/web/css/getting_started/como_css_funciona/index.html delete mode 100644 files/pt-br/web/css/getting_started/index.html delete mode 100644 files/pt-br/web/css/getting_started/javascript/index.html delete mode 100644 files/pt-br/web/css/getting_started/lists/index.html delete mode 100644 files/pt-br/web/css/getting_started/oque_é_css/index.html delete mode 100644 files/pt-br/web/css/getting_started/porque_usar_css/index.html delete mode 100644 files/pt-br/web/css/getting_started/seletores/index.html delete mode 100644 files/pt-br/web/css/hifens/index.html create mode 100644 files/pt-br/web/css/hyphens/index.html create mode 100644 files/pt-br/web/css/image/index.html delete mode 100644 files/pt-br/web/css/imagem/index.html create mode 100644 files/pt-br/web/css/initial_value/index.html create mode 100644 files/pt-br/web/css/layout_mode/index.html create mode 100644 files/pt-br/web/css/mask/index.html create mode 100644 files/pt-br/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/pt-br/web/css/modelo_layout/index.html delete mode 100644 files/pt-br/web/css/modelo_visual/index.html create mode 100644 files/pt-br/web/css/overflow-wrap/index.html delete mode 100644 files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html create mode 100644 files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html delete mode 100644 files/pt-br/web/css/pseudo-elementos/index.html create mode 100644 files/pt-br/web/css/pseudo-elements/index.html create mode 100644 files/pt-br/web/css/reference/index.html create mode 100644 files/pt-br/web/css/replaced_element/index.html create mode 100644 files/pt-br/web/css/resolved_value/index.html delete mode 100644 files/pt-br/web/css/seletor_de_atributos/index.html delete mode 100644 files/pt-br/web/css/seletor_universal/index.html delete mode 100644 files/pt-br/web/css/seletores_css/index.html delete mode 100644 files/pt-br/web/css/sintaxe/index.html delete mode 100644 files/pt-br/web/css/sintexe_valor/index.html create mode 100644 files/pt-br/web/css/specified_value/index.html create mode 100644 files/pt-br/web/css/syntax/index.html delete mode 100644 files/pt-br/web/css/tools/border-image_generator/index.html delete mode 100644 files/pt-br/web/css/tools/border-radius_generator/index.html create mode 100644 files/pt-br/web/css/universal_selectors/index.html create mode 100644 files/pt-br/web/css/used_value/index.html delete mode 100644 files/pt-br/web/css/valor_atual/index.html delete mode 100644 files/pt-br/web/css/valor_computado/index.html delete mode 100644 files/pt-br/web/css/valor_espeficifco/index.html delete mode 100644 files/pt-br/web/css/valor_inicial/index.html delete mode 100644 files/pt-br/web/css/valor_resolvido/index.html delete mode 100644 files/pt-br/web/css/valor_usado/index.html create mode 100644 files/pt-br/web/css/value_definition_syntax/index.html create mode 100644 files/pt-br/web/css/visual_formatting_model/index.html delete mode 100644 files/pt-br/web/css/word-wrap/index.html (limited to 'files/pt-br/web/css') diff --git a/files/pt-br/web/css/-moz-box-ordinal-group/index.html b/files/pt-br/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 3c3963b7e6..0000000000 --- a/files/pt-br/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -

{{CSSRef}}{{Warning("Essa propriedade é parte do projeto do módulo original do CSS Flexible Box Layout, e foi substituído em projetos recentes.")}}

- -

Veja Flexbox para mais informações do que você deveria usar ao invés dessa propriedade.

- -

Sumário

- -

Indica o grupo ordinal ao qual o elemento percente. Elementos com um grupo ordinal menor são mostrados antes daqueles com grupo ordinal maior.

- -

Valores

- -

Os valores devem ser inteiros maiores que zero. O valor padrão para essa propriedade é 1.

- -

Exemplos

- -
<style type="text/css">
-  #Flexbox {
-    display: -ms-box;
-    display: -moz-box;
-    display: -webkit-box;
-  }
-
-  #text1 {
-    background: red;
-    -ms-box-ordinal-group: 4;
-    -moz-box-ordinal-group: 4;
-    -webkit-box-ordinal-group: 4;
-  }
-
-  #text2 {
-    background: green;
-    -ms-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -webkit-box-ordinal-group: 3;
-  }
-
-  #text3 {
-    background: blue;
-    -ms-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -webkit-box-ordinal-group: 2;
-  }
-
-  #text4 {
-    background: orange;
-  }
-</style>
-
-<div id="Flexbox">
-  <div id="text1">text 1</div>
-  <div id="text2">text 2</div>
-  <div id="text3">text 3</div>
-  <div id="text4">text 4</div>
-</div>
-
diff --git a/files/pt-br/web/css/-moz-cell/index.html b/files/pt-br/web/css/-moz-cell/index.html deleted file mode 100644 index 6e5b44d286..0000000000 --- a/files/pt-br/web/css/-moz-cell/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell ---- -
{{CSSRef}} {{deprecated_header}}
- -

Não use esse valor! Use o valor cursor {{cssxref("cursor#cell","cell")}} em seu lugar.

diff --git a/files/pt-br/web/css/actual_value/index.html b/files/pt-br/web/css/actual_value/index.html new file mode 100644 index 0000000000..b7f9307a58 --- /dev/null +++ b/files/pt-br/web/css/actual_value/index.html @@ -0,0 +1,34 @@ +--- +title: Valor atual +slug: Web/CSS/Valor_atual +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

The actual value of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentario
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Definição inicial
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/attribute_selectors/index.html b/files/pt-br/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..88881a61ea --- /dev/null +++ b/files/pt-br/web/css/attribute_selectors/index.html @@ -0,0 +1,158 @@ +--- +title: Seletor de atributos +slug: Web/CSS/Seletor_de_atributos +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

O seletor de atributos combina elementos baseado no valor de um atributo dado.

+ +
/* <a> elementos com um atributo de título  */
+a[title] {
+  color: purple;
+}
+
+/* <a> elementos combinando com um href "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* <a> elementos com um href contendo "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* <a> elementos com href terminando em ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+ +
+
[attr]
+
Representa um elemento com atributo de nome attr.
+
[attr=value]
+
Representa um elemento com um atributo de nome attr, o qual o valor é  exatamente  value.
+
[attr~=value]
+
Representa um elemento com um atributo de nome attr, o qual value é  uma lista de palavras separadas por espaços, e uma dessas é  exatamente  value.
+
[attr|=value]
+
Representa um elemento com um atributo de nome attr  o qual o valor pode ser exatamente value ou pode começar com value imediatamente seguido por hífen - (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.
+
[attr^=value]
+
Representa um elemento com um atributo com nome attr que tem um valor prefixado (precedido) por value.
+
[attr$=value]
+
Representa um elemento com um atributo de nome attr que  tem como sufixo (seguido) por value.
+
[attr*=value]
+
Representa um elemento com um atributo de nome attr o qual valor contém ao menos uma ocorrência de value contido na string.
+
[attr operator value i]
+
Adiciona um i (ou I) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).
+
+ +

Exemplos

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Links internos, começando com "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links com "example" em qualquer lugar da URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links com "insensitive" em qualquer lugar da URL,
+   independentemente da capitalização */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links com final ".org" */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

Resultado

+ +

{{EmbedLiveSample('Links')}}

+ +

Languages

+ +

CSS

+ +
/* Todas divs com um atributo `lang` em negrito. */
+div[lang] { font-weight: bold; }
+/* Todas divs com US English em azul (blue). */
+div[lang~="en-us"] { color: blue; }
+/* Todas divs onde Portuguese esta em verde (green). */
+div[lang="pt"] { color: green; }
+/* Todas divs onde Chinese esta em vermelho (red), Simplificado para (zh-CN) ou tradicional (zh-TW). */
+div[lang|="zh"] { color: red; }
+/* Todas divs com Traditional Chinese `data-lang` que é purple. */
+/* Nota: Você também poderia usar atributos separados por hífen com aspas duplas */
+div[data-lang="zh-TW"] { color: purple; }
+
+ +

 

+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+ +

Resultado

+ +

{{EmbedLiveSample('Languages')}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Adiciona um modificador para a seleção do valor do atributo ASCII 
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definição Inicial
+ +

Browser compatibilidade

+ + + +

{{Compat("css.selectors.attribute")}}

diff --git a/files/pt-br/web/css/box-ordinal-group/index.html b/files/pt-br/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..3c3963b7e6 --- /dev/null +++ b/files/pt-br/web/css/box-ordinal-group/index.html @@ -0,0 +1,60 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +

{{CSSRef}}{{Warning("Essa propriedade é parte do projeto do módulo original do CSS Flexible Box Layout, e foi substituído em projetos recentes.")}}

+ +

Veja Flexbox para mais informações do que você deveria usar ao invés dessa propriedade.

+ +

Sumário

+ +

Indica o grupo ordinal ao qual o elemento percente. Elementos com um grupo ordinal menor são mostrados antes daqueles com grupo ordinal maior.

+ +

Valores

+ +

Os valores devem ser inteiros maiores que zero. O valor padrão para essa propriedade é 1.

+ +

Exemplos

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/pt-br/web/css/box_model/index.html b/files/pt-br/web/css/box_model/index.html deleted file mode 100644 index 8c0db35cf6..0000000000 --- a/files/pt-br/web/css/box_model/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Box model -slug: Web/CSS/box_model -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -

Resumo

- -

Em uma página WEB, cada elemento é representado como um box retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses boxes é o objetivo do mecanismo de renderização.

- -

No CSS, cada um desses boxes retangulares é descrita usando o box model padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: margin edge, border edge, padding edge e content edge.

- -

CSS Box model

- -

A área de conteúdo (content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do content edge; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.

- -

Se a propriedade CSS {{ cssxref("box-sizing") }} está configurada como padrão, as propriedades CSS {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} e {{ cssxref("max-height") }} controlam o tamanho do conteúdo.

- -

A área de preenchimento (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do padding edge, e suas dimensões são a largura do padding-box e a altura do padding-box.

- -

O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} e na forma generalizada {{ cssxref("padding") }}.

- -

A área de borda (border area) estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do border edge, e suas dimensões são a largura e a altura do border-box. Esta área depende do tamanho da borda que está definido pela propriedade {{ cssxref("border-width") }} ou pela propriedade {{ cssxref("border") }}.

- -

A área de margem (margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do margin edge, e suas dimensões são a largura e a altura do margin-box.

- -

O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} e na forma generalizada {{ cssxref("margin") }}.

- -

Quando ocorre um colapso de margens, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.

- -

Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade {{ cssxref('line-height') }}, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.

- -

Especificação

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Embora mais precisamente formulada, não existem mudanças práticas
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
- -

Veja também

- - diff --git "a/files/pt-br/web/css/coment\303\241rio/index.html" "b/files/pt-br/web/css/coment\303\241rio/index.html" deleted file mode 100644 index dabb46a04f..0000000000 --- "a/files/pt-br/web/css/coment\303\241rio/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Comentário -slug: Web/CSS/Comentário -tags: - - CSS - - CSS Reference - - Iniciante -translation_of: Web/CSS/Comments ---- -
ios{{CSSRef}}
- -

Sumário

- -

Comments are used to add explanatory notes or prevent the browser from interpreting parts of the style sheet.

- -

Comments can be placed where ever white space is allowed within a style sheet.

- -

Sintaxe

- -
/* Comment */
- -

Exemplos

- -
/* A single line comment */
-
-/*
-A comment
-which stretches
-over several
-lines
-*/
-
- -

Notas

- -

The /* */ comment syntax is used for both single and multi line comments. There is no other way to specify comments in external style sheets. However, when using the <style> element, you may use <!-- --> to hide CSS from older browsers, although this is not recommended. As in most programming languages that use the /* */ comment syntax, comments cannot be nested. In other words, the first instance of */ that follows an instance of /* closes the comment.

- -

Especificações

- - - -

Veja também

- - diff --git a/files/pt-br/web/css/comments/index.html b/files/pt-br/web/css/comments/index.html new file mode 100644 index 0000000000..dabb46a04f --- /dev/null +++ b/files/pt-br/web/css/comments/index.html @@ -0,0 +1,49 @@ +--- +title: Comentário +slug: Web/CSS/Comentário +tags: + - CSS + - CSS Reference + - Iniciante +translation_of: Web/CSS/Comments +--- +
ios{{CSSRef}}
+ +

Sumário

+ +

Comments are used to add explanatory notes or prevent the browser from interpreting parts of the style sheet.

+ +

Comments can be placed where ever white space is allowed within a style sheet.

+ +

Sintaxe

+ +
/* Comment */
+ +

Exemplos

+ +
/* A single line comment */
+
+/*
+A comment
+which stretches
+over several
+lines
+*/
+
+ +

Notas

+ +

The /* */ comment syntax is used for both single and multi line comments. There is no other way to specify comments in external style sheets. However, when using the <style> element, you may use <!-- --> to hide CSS from older browsers, although this is not recommended. As in most programming languages that use the /* */ comment syntax, comments cannot be nested. In other words, the first instance of */ that follows an instance of /* closes the comment.

+ +

Especificações

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/css/computed_value/index.html b/files/pt-br/web/css/computed_value/index.html new file mode 100644 index 0000000000..a4932b8d40 --- /dev/null +++ b/files/pt-br/web/css/computed_value/index.html @@ -0,0 +1,56 @@ +--- +title: Valor Computado +slug: Web/CSS/valor_computado +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/computed_value +--- +
{{cssref}}
+ +

The computed value of a CSS property is computed from the specified value by:

+ + + +

The computation needed to reach the computed value for the property typically involves converting relative values (such as those in em units or percentages) to absolute values.

+ +

For example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size).

+ +

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the line-height property become the computed value, as specified. These relative values that remain in the computed value become absolute when the used value is determined.

+ +

The main use of the computed value (other than as a step between the specified value and used value) is inheritance, including the {{cssxref("inherit")}} keyword.

+ +

Notas

+ +

The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the {{cssxref("resolved_value", "resolved value")}}, which may either be the {{cssxref("computed_value", "computed value")}} or the {{cssxref("used_value", "used value")}}, depending on the property.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Especificação inicial
+ +

Veja também

+ + diff --git "a/files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" "b/files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" deleted file mode 100644 index 4bdd91ad9f..0000000000 --- "a/files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Usando animações CSS -slug: Web/CSS/CSS_Animations/Usando_animações_CSS -tags: - - Advanced - - CSS - - CSS Animations - - Example - - Experimental - - Guide -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations ---- -

{{SeeCompatTable}}{{CSSRef}}

- -

Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.

- -

Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:

- -
    -
  1. São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.
    2. -
  2. As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem normalmente ser executadas precariamente em JavaScript (a não ser que sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter a performance o mais estável possível.
    3. -
  3. Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.
    4. -
- -

Configurando a animação

- -

Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade {{ cssxref("animation") }} ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a de como a sequência de animação deveria progredir. Isso não configura a aparência atual da animação, que é feita usando a regra com parênteses (at-rule) {{ cssxref("@keyframes") }} como descrito em {{ anch("Defining the animation sequence using keyframes") }} abaixo.

- -

As sub-propriedades da propriedade {{cssxref("animation")}} são:

- -
-
{{ cssxref("animation-delay") }}
-
Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.
-
{{ cssxref("animation-direction") }}
-
Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
-
{{ cssxref("animation-duration") }}
-
Configura o tempo que uma animação deveria levar para completar um ciclo.
-
{{ cssxref("animation-iteration-count") }}
-
Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
-
{{ cssxref("animation-name") }}
-
Especifica o nome da regra com parênteses (at-rule) {{ cssxref("@keyframes") }} at-rule descrevendo os keyframes da animação.
-
{{ cssxref("animation-play-state") }}
-
Permite voce pausar e resumir a sequência da animação.
-
{{ cssxref("animation-timing-function") }}
-
Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.
-
{{ cssxref("animation-fill-mode") }}
-
Configura que valores são aplicados pela animação antes e depois de se executar.
-
- -

Definindo a sequência de animação usando keyframes

- -

Uma vez que você configurou a sincronização da animação, você precisa definir a aparência da animação. Isso é feito por estabelecer duas ou mais keyframes usando a regra com parênteses (at-rule) {{cssxref("@keyframes")}}. Cada keyframe descreve como o elemento animado deveria se renderizar a um tempo dado durante a sequência de animação.

- -

Como a sincronização da animação é definida por um estilo CSS que configura a animação, keyframes usam uma {{cssxref("percentage")}} para indicar o tempo durante a sequência de animação que eles fazem parte. 0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação. Esses dois tempos devem ser especificados para que o navegador então saiba onde a animação deve começar e parar; por serem tão importantes, esses dois tempos tem expressões equivalentes especiais: from e to.

- -

Você pode opcionalmente incluir keyframes adicionais que descrevem passos intermediários ao longo do caminho do ponto inicial ao ponto final da animação.

- -

Exemplos

- -
Nota Os exemplos aqui não usam nenhum prefixo nas propriedades de animação CSS. Navegadores mais antigos podem precisar de prefixos; os exemplos ao vivo que você pode clicar pra ver em seu navegadores também incluem as versões prefixadas -webkit.
- -

Fazendo o texto deslizar através da janela do navegador

- -

Esse exemplo simples estiliza o elemento {{HTMLElement("p")}} onde o elemento então desliza para dentro vindo de fora da lateral direita da janela do navegador.

- -

Perceba que animações como essa podem fazer com que a página se torne mais larga que a janela do navegador. Para evitar esse problema coloque o elemento a ser animado dentro de um container, e atribua {{cssxref("overflow")}}:hidden ao container.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

O estilo para o elemento {{ HTMLElement("p") }} aqui especifica que a animação deveria levar 3 segundos para executar do início ao fim, usando a propriedade {{cssxref("animation-duration")}}, e que o nome da regra com parênteses (at-rule){{cssxref("@keyframes")}} definindo os keyframes para a sequência de animação é nomeado por "slidein".

- -

Se quiséssemos quaisquer estilização customizada no elemento {{ HTMLElement("p") }} para aparecer em navegadores que não suportam animações CSS, incluiríamos aqui também; no entanto, nesse caso não queremos nenhuma estilização customizada a não ser o efeito da animação.

- -

Os keyframes são definidos utilizando-se as regras{{cssxref("@keyframes") }}. Neste caso, utilizamos apenas dois keyframes. O primeiro ocorre no progresso de 0% (ou seja, o primeiro keyframe da animação, através do pseudônimo from). Nesta etapa, configuramos a margem esquerda do elemento para ser 100% - quer dizer, como a margem está à esquerda e com valor 100%, o elemento irá se deslocar para o seu limite, ou seja, para a parte direita – e sua largura será de 300%, ou seja, 3 vezes a largura do seu tamanho original. Isto faz com que o elemento, em seu primeiro frame da animação, seja “empurrado” para fora do limite da parte direita da janela do navegador.

- -

O segundo (e último) keyframe ocorre na etapa 100% do progresso (ou seja, o último keyframe da animação, através do pseudônimo to). A margem esquerda está com valor de 0% e a largura do elemento está com valor de 100%. Isto resulta na animação do elemento {{ HTMLElement("p") }}, que entra gradativamente na área de conteúdo até atingir uma margem esquerda de 0%.

- -
 
- -

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

- -

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

- -

Adicionando outro keyframe

- -

Vamos adicionar outro keyframe à animação do exemplo anterior. Digamos que nós queremos que o tamanho da fonte aumente durante o movimento da direita para a esquerda por um determinado momento, e que depois ele reduzisse ao seu tamanho original. Você precisaria simplesmente adicionar este keyframe:

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- - - - - -

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

- -

Isso indica ao navegador que até atingir a etapa 75% do progresso da sequência da animação o elemento deve ter 25% no valor da sua margem esquerda e sua largura deve ser de 150%.

- -

{{EmbedLiveSample("Adicionando_outro_keyframe","100%","250")}}

- -

Faça repetir-se

- -

Para fazer a animação se repetir, simplesmente use a propriedade{{ cssxref("animation-iteration-count") }} para indicar a quantidade de vezes que a animação deve se repetir. Neste caso, vamos usar infinite para que a animação se repita indefinidamente:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- - - - - -

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz linda e sonolenta.

- -

{{EmbedLiveSample("Faça_repetir-se","100%","250")}}

- -

Fazendo a animação se mover para trás e para frente

- -

Com o exemplo anterior, fizemos a animação se repetir, mas é muito estranho tê-la pulando lá do início toda vez que a animação inicia. O que nós realmente queremos é que a animação se mova para trás e para frente por toda tela. Isso é facilmente realizado se adicionarmos o valor alternate à propriedade {{cssxref("animation-direction")}}:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- - - -
<p> A Lagarta e Alice olharam-se por algum tempo em silêncio:
-finalmente, a Lagarta tirou o narguilé da boca e dirigiu-se a
-ela com uma voz lânguida e sonolenta.</p>
- -

{{EmbedLiveSample("Fazendo_a_animação_se_mover_para_trás_e_para_frente","100%","250")}}

- -

Usando eventos de animação

- -

Você pode ter controle adicional sobre animações -- como também informações úteis sobre elas -- através do uso de eventos de animação. Esses eventos, representados pelo objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , podem ser usados para detectar quando animações iniciam, terminam, e começam uma nova iteração. Cada evento inclui o tempo no qual ele ocorreu como também o nome da animação que lançou o evento.

- -

Nós vamos modificar o exemplo de deslizamento de texto para gerar alguma informação sobre cada evento de animação quando ele ocorrer, para que possamos perceber como eles funcionam.

- -

Adicionando o CSS

- -

Nós começamos criando o CSS para a animação. Essa animação vai durar por 3 segundos, se chamar "slidein", repetir 3 vezes, e alternar a direção cada vez. No {{ cssxref("@keyframes") }}, a largura (width) e a margem esquerda (margin-left) são manipulados para fazer o elemento deslizar na tela.

- -
.slidein {
-  -moz-animation-duration: 3s;
-  -webkit-animation-duration: 3s;
-  animation-duration: 3s;
-  -moz-animation-name: slidein;
-  -webkit-animation-name: slidein;
-  animation-name: slidein;
-  -moz-animation-iteration-count: 3;
-  -webkit-animation-iteration-count: 3;
-  animation-iteration-count: 3;
-  -moz-animation-direction: alternate;
-  -webkit-animation-direction: alternate;
-  animation-direction: alternate;
-}
-
-@-moz-keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-    margin-left:0%;
-    width:100%;
-  }
-}
-
-@-webkit-keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-   margin-left:0%;
-   width:100%;
- }
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-   margin-left:0%;
-   width:100%;
- }
-}
- -

Adicionando animação a lista de eventos

- -

Nós vamos usar o código JavaScript para escutar todos três possíveis eventos de animação. Esse código configura nossos escutadores de evento; nós o chamamos quando o documento é primeiramente carregado para configurar as coisas.

- -
var e = document.getElementById("watchme");
-e.addEventListener("animationstart", listener, false);
-e.addEventListener("animationend", listener, false);
-e.addEventListener("animationiteration", listener, false);
-
-e.className = "slidein";
-
-
- -

Isso é simplesmente código padrão; você pode ter detalhes sobre como ele funciona na documentação para {{ domxref("element.addEventListener()") }}. A última coisa que este código faz é atribuir a classe no elemento o qual estaremos animando para "deslizar" (slidein); nós fazemos isso para iniciar a animação.

- -

Por que? Porque o evento animationstart dispara assim que a animação começa, e no nosso caso, isso acontece antes do nosso código rodar. Então nós mesmos vamos iniciar a animação através de atribuição da classe do elemento para o estilo que é animado depois do ocorrido.

- -

Recebendo os eventos

- -

Os eventos são entregues à função listener(), a qual é mostrada abaixo.

- -
function listener(e) {
-  var l = document.createElement("li");
-  switch(e.type) {
-    case "animationstart":
-      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "New loop started at time " + e.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Esse código também é bem simples. Ele simplemente olha no {{ domxref("event.type") }} para determinar qual tipo de evento de animação ocorreu, então adiciona uma nota apropriada no {{ HTMLElement("ul") }} (lista não ordenada) que estamos usando para logar esses eventos.

- -

A saída, quando tudo foi dito e feito, parece com algo assim:

- - - -

Perceba que os tempos são bem próximos, mas não exatamente iguais, àqueles esperados dado o tempo estabelecido quando a animação foi configurada. Perceba também que após a ultima iteração da animação, o evento animationiteration não é enviado; ao invés disso, o evento animationend é enviado.

- -

O HTML

- -

Apenas por questão de completude, aqui está o HTML que exibe o conteúdo da pagina, incluindo a lista na qual o script insere informação sobre os eventos recebidos:

- -
 
- -

Veja-me mover

- -

Este exemplo mostra como usar animações CSS para fazer o elemento H1 se mover pela página.

- -

Além disso, emitimos algum texto sempre que um evento de animação dispara, para que você possa vê-los em ação.

- - - -

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

- -

Veja também

- - diff --git a/files/pt-br/web/css/css_animations/using_css_animations/index.html b/files/pt-br/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..4bdd91ad9f --- /dev/null +++ b/files/pt-br/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,332 @@ +--- +title: Usando animações CSS +slug: Web/CSS/CSS_Animations/Usando_animações_CSS +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.

+ +

Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:

+ +
    +
  1. São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.
    2. +
  2. As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem normalmente ser executadas precariamente em JavaScript (a não ser que sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter a performance o mais estável possível.
    3. +
  3. Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.
    4. +
+ +

Configurando a animação

+ +

Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade {{ cssxref("animation") }} ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a de como a sequência de animação deveria progredir. Isso não configura a aparência atual da animação, que é feita usando a regra com parênteses (at-rule) {{ cssxref("@keyframes") }} como descrito em {{ anch("Defining the animation sequence using keyframes") }} abaixo.

+ +

As sub-propriedades da propriedade {{cssxref("animation")}} são:

+ +
+
{{ cssxref("animation-delay") }}
+
Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.
+
{{ cssxref("animation-direction") }}
+
Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
+
{{ cssxref("animation-duration") }}
+
Configura o tempo que uma animação deveria levar para completar um ciclo.
+
{{ cssxref("animation-iteration-count") }}
+
Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
+
{{ cssxref("animation-name") }}
+
Especifica o nome da regra com parênteses (at-rule) {{ cssxref("@keyframes") }} at-rule descrevendo os keyframes da animação.
+
{{ cssxref("animation-play-state") }}
+
Permite voce pausar e resumir a sequência da animação.
+
{{ cssxref("animation-timing-function") }}
+
Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.
+
{{ cssxref("animation-fill-mode") }}
+
Configura que valores são aplicados pela animação antes e depois de se executar.
+
+ +

Definindo a sequência de animação usando keyframes

+ +

Uma vez que você configurou a sincronização da animação, você precisa definir a aparência da animação. Isso é feito por estabelecer duas ou mais keyframes usando a regra com parênteses (at-rule) {{cssxref("@keyframes")}}. Cada keyframe descreve como o elemento animado deveria se renderizar a um tempo dado durante a sequência de animação.

+ +

Como a sincronização da animação é definida por um estilo CSS que configura a animação, keyframes usam uma {{cssxref("percentage")}} para indicar o tempo durante a sequência de animação que eles fazem parte. 0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação. Esses dois tempos devem ser especificados para que o navegador então saiba onde a animação deve começar e parar; por serem tão importantes, esses dois tempos tem expressões equivalentes especiais: from e to.

+ +

Você pode opcionalmente incluir keyframes adicionais que descrevem passos intermediários ao longo do caminho do ponto inicial ao ponto final da animação.

+ +

Exemplos

+ +
Nota Os exemplos aqui não usam nenhum prefixo nas propriedades de animação CSS. Navegadores mais antigos podem precisar de prefixos; os exemplos ao vivo que você pode clicar pra ver em seu navegadores também incluem as versões prefixadas -webkit.
+ +

Fazendo o texto deslizar através da janela do navegador

+ +

Esse exemplo simples estiliza o elemento {{HTMLElement("p")}} onde o elemento então desliza para dentro vindo de fora da lateral direita da janela do navegador.

+ +

Perceba que animações como essa podem fazer com que a página se torne mais larga que a janela do navegador. Para evitar esse problema coloque o elemento a ser animado dentro de um container, e atribua {{cssxref("overflow")}}:hidden ao container.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

O estilo para o elemento {{ HTMLElement("p") }} aqui especifica que a animação deveria levar 3 segundos para executar do início ao fim, usando a propriedade {{cssxref("animation-duration")}}, e que o nome da regra com parênteses (at-rule){{cssxref("@keyframes")}} definindo os keyframes para a sequência de animação é nomeado por "slidein".

+ +

Se quiséssemos quaisquer estilização customizada no elemento {{ HTMLElement("p") }} para aparecer em navegadores que não suportam animações CSS, incluiríamos aqui também; no entanto, nesse caso não queremos nenhuma estilização customizada a não ser o efeito da animação.

+ +

Os keyframes são definidos utilizando-se as regras{{cssxref("@keyframes") }}. Neste caso, utilizamos apenas dois keyframes. O primeiro ocorre no progresso de 0% (ou seja, o primeiro keyframe da animação, através do pseudônimo from). Nesta etapa, configuramos a margem esquerda do elemento para ser 100% - quer dizer, como a margem está à esquerda e com valor 100%, o elemento irá se deslocar para o seu limite, ou seja, para a parte direita – e sua largura será de 300%, ou seja, 3 vezes a largura do seu tamanho original. Isto faz com que o elemento, em seu primeiro frame da animação, seja “empurrado” para fora do limite da parte direita da janela do navegador.

+ +

O segundo (e último) keyframe ocorre na etapa 100% do progresso (ou seja, o último keyframe da animação, através do pseudônimo to). A margem esquerda está com valor de 0% e a largura do elemento está com valor de 100%. Isto resulta na animação do elemento {{ HTMLElement("p") }}, que entra gradativamente na área de conteúdo até atingir uma margem esquerda de 0%.

+ +
 
+ +

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

+ +

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+ +

Adicionando outro keyframe

+ +

Vamos adicionar outro keyframe à animação do exemplo anterior. Digamos que nós queremos que o tamanho da fonte aumente durante o movimento da direita para a esquerda por um determinado momento, e que depois ele reduzisse ao seu tamanho original. Você precisaria simplesmente adicionar este keyframe:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

+ +

Isso indica ao navegador que até atingir a etapa 75% do progresso da sequência da animação o elemento deve ter 25% no valor da sua margem esquerda e sua largura deve ser de 150%.

+ +

{{EmbedLiveSample("Adicionando_outro_keyframe","100%","250")}}

+ +

Faça repetir-se

+ +

Para fazer a animação se repetir, simplesmente use a propriedade{{ cssxref("animation-iteration-count") }} para indicar a quantidade de vezes que a animação deve se repetir. Neste caso, vamos usar infinite para que a animação se repita indefinidamente:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz linda e sonolenta.

+ +

{{EmbedLiveSample("Faça_repetir-se","100%","250")}}

+ +

Fazendo a animação se mover para trás e para frente

+ +

Com o exemplo anterior, fizemos a animação se repetir, mas é muito estranho tê-la pulando lá do início toda vez que a animação inicia. O que nós realmente queremos é que a animação se mova para trás e para frente por toda tela. Isso é facilmente realizado se adicionarmos o valor alternate à propriedade {{cssxref("animation-direction")}}:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + +
<p> A Lagarta e Alice olharam-se por algum tempo em silêncio:
+finalmente, a Lagarta tirou o narguilé da boca e dirigiu-se a
+ela com uma voz lânguida e sonolenta.</p>
+ +

{{EmbedLiveSample("Fazendo_a_animação_se_mover_para_trás_e_para_frente","100%","250")}}

+ +

Usando eventos de animação

+ +

Você pode ter controle adicional sobre animações -- como também informações úteis sobre elas -- através do uso de eventos de animação. Esses eventos, representados pelo objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , podem ser usados para detectar quando animações iniciam, terminam, e começam uma nova iteração. Cada evento inclui o tempo no qual ele ocorreu como também o nome da animação que lançou o evento.

+ +

Nós vamos modificar o exemplo de deslizamento de texto para gerar alguma informação sobre cada evento de animação quando ele ocorrer, para que possamos perceber como eles funcionam.

+ +

Adicionando o CSS

+ +

Nós começamos criando o CSS para a animação. Essa animação vai durar por 3 segundos, se chamar "slidein", repetir 3 vezes, e alternar a direção cada vez. No {{ cssxref("@keyframes") }}, a largura (width) e a margem esquerda (margin-left) são manipulados para fazer o elemento deslizar na tela.

+ +
.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+ +

Adicionando animação a lista de eventos

+ +

Nós vamos usar o código JavaScript para escutar todos três possíveis eventos de animação. Esse código configura nossos escutadores de evento; nós o chamamos quando o documento é primeiramente carregado para configurar as coisas.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+
+
+ +

Isso é simplesmente código padrão; você pode ter detalhes sobre como ele funciona na documentação para {{ domxref("element.addEventListener()") }}. A última coisa que este código faz é atribuir a classe no elemento o qual estaremos animando para "deslizar" (slidein); nós fazemos isso para iniciar a animação.

+ +

Por que? Porque o evento animationstart dispara assim que a animação começa, e no nosso caso, isso acontece antes do nosso código rodar. Então nós mesmos vamos iniciar a animação através de atribuição da classe do elemento para o estilo que é animado depois do ocorrido.

+ +

Recebendo os eventos

+ +

Os eventos são entregues à função listener(), a qual é mostrada abaixo.

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Esse código também é bem simples. Ele simplemente olha no {{ domxref("event.type") }} para determinar qual tipo de evento de animação ocorreu, então adiciona uma nota apropriada no {{ HTMLElement("ul") }} (lista não ordenada) que estamos usando para logar esses eventos.

+ +

A saída, quando tudo foi dito e feito, parece com algo assim:

+ + + +

Perceba que os tempos são bem próximos, mas não exatamente iguais, àqueles esperados dado o tempo estabelecido quando a animação foi configurada. Perceba também que após a ultima iteração da animação, o evento animationiteration não é enviado; ao invés disso, o evento animationend é enviado.

+ +

O HTML

+ +

Apenas por questão de completude, aqui está o HTML que exibe o conteúdo da pagina, incluindo a lista na qual o script insere informação sobre os eventos recebidos:

+ +
 
+ +

Veja-me mover

+ +

Este exemplo mostra como usar animações CSS para fazer o elemento H1 se mover pela página.

+ +

Além disso, emitimos algum texto sempre que um evento de animação dispara, para que você possa vê-los em ação.

+ + + +

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..d350bce6b5 --- /dev/null +++ b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2627 @@ +--- +title: Gerador de Border-image +slug: Web/CSS/Tools/Border-image_generator +tags: + - Alternativas CSS +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Esta ferramenta pode ser utilizada para gerar o valor {{cssxref("border-image")}} em CSS3.

+ +
+

Border Image Generator

+ +

HTML Content

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * 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;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-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;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-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;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * 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,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	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.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			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);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..a7db08eb69 --- /dev/null +++ b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1593 @@ +--- +title: Gerador de Border-radius +slug: Web/CSS/Tools/Border-radius_generator +tags: + - CSS + - Ferramentas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Esta ferramenta pode ser utilizada para gerar o efeito {{cssxref("border-radius")}} em CSS3.

+
+

border-radius

+

HTML Content

+ 
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+

CSS Content

+ 
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	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;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-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;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+

JavaScript Content

+ 
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		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) {
+			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("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(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		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		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;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		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);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			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 getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	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() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	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,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	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() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+

 

diff --git a/files/pt-br/web/css/css_background_and_borders/index.html b/files/pt-br/web/css/css_background_and_borders/index.html deleted file mode 100644 index 59c2117194..0000000000 --- a/files/pt-br/web/css/css_background_and_borders/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: CSS Background and Borders -slug: Web/CSS/CSS_Background_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -

{{CSSRef}}

- -

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

- -

Reference

- -

CSS Properties

- -
- -
- -

Guides

- -
-
Using CSS multiple backgrounds
-
Explains how to set backgrounds on elements and how they will interact with it.
-
Scaling background images
-
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

Browser compatibility

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
-
diff --git a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index d0e4fa11f7..0000000000 --- a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Multiple backgrounds -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.

- -

Especificar planos de fundo múltplos é fácil:

- -
.minhaClasse {
-  background: fundo1, fundo2, ..., fundoN;
-}
-
- -

Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

- -

Exemplo

- -

Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:

- -
.multi_bg_example {
-  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
-        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
-        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
-  background-repeat: no-repeat, no-repeat, repeat;
-  background-position: bottom right, left, right;
-}
-
- - - - - - - - - - - - -
Captura de TelaDemonstração
css_multibg.png 
- -

Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

- -

Veja também

- - diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..59c2117194 --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,155 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..d7c3ccfa3f --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,109 @@ +--- +title: Alterando a escala das imagens de background +slug: Web/Guide/CSS/Scaling_background_images +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +--- +

A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real. Você pode tanto aumentar como diminuir a imagem.

+ +

Duplicando uma imagem grande

+ +

Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:

+ +

+ +

Isto pode ser conseguido usando o seguinte CSS:

+ +
.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(firefox_logo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+
+ +

O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas você pode considerar a adição de uma versão pré-fixada se você está focando em browsers muito antigos.

+ +

Esticando uma imagem

+ +

Você também pode especificar ambos os tamanhos, horizontal e vertical da imagem, assim:

+ +
background-size: 300px 150px;
+
+ +

O resultado fica assim:

+ +

+ +

Aumentando escala de uma imagem

+ +

Na outra extremidade do espectro, é possível dimensionar-se uma imagem no fundo. Aqui nós aumentamos a escala de um favicon de pixel 32x32 para 300x300 pixels:

+ +

+ +
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

Como você pode ver, o CSS é, na verdade, essencialmente idêntico, salvo o nome do arquivo de imagem.

+ +

Valores especiais: "contain" e "cover"

+ +

Da mesma maneira que o {{cssxref("<length>")}}, a propriedade CSS de {{ cssxref("background-size") }} oferece dois valores de tamanho especial, contain e cover. Vamos dar uma olhada nestes.

+ +

contain

+ +

O valor contain especifica que, independentemente do tamanho da caixa que contém, a imagem de fundo deve ser dimensionado de modo a que cada lado seja tão grande quanto possível ao mesmo tempo que não exceda o comprimento do lado correspondente do recipiente. Tente redimensionar a janela usando um navegador que suporta imagens de fundo de escala (como o Firefox 3.6 ou posterior) para ver isso em ação no exemplo vivo abaixo.

+ +
+

{{ EmbedLiveSample("contain", "100%", "220") }}

+
+ +
<div class="bgSizeContain">
+  <p>Tente redimensionar a janela e ver o que acontece.</p>
+</div>
+ +
.bgSizeContain {
+  height: 200px;
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}
+ +

cover

+ +

O valor cover especifica que a imagem de fundo deve ser dimensionado de modo que seja tão pequena quanto possível ao mesmo tempo assegurar que ambas as dimensões são maiores do que ou igual à dimensão correspondente do recipiente.

+ +
{{ EmbedLiveSample("cover", "100%", "220") }}
+ +

Os exemplos à seguir usam HTML & CSS:

+ +
<div class="bgSizeCover">
+  <p>Tente redimensionar a janela e ver o que acontece.</p>
+</div>
+ +
.bgSizeCover {
+  height: 200px;
+  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..d0e4fa11f7 --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,58 @@ +--- +title: Multiple backgrounds +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.

+ +

Especificar planos de fundo múltplos é fácil:

+ +
.minhaClasse {
+  background: fundo1, fundo2, ..., fundoN;
+}
+
+ +

Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

Exemplo

+ +

Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:

+ +
.multi_bg_example {
+  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
+        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
+        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
+  background-repeat: no-repeat, no-repeat, repeat;
+  background-position: bottom right, left, right;
+}
+
+ + + + + + + + + + + + +
Captura de TelaDemonstração
css_multibg.png 
+ +

Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..8c0db35cf6 --- /dev/null +++ b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,62 @@ +--- +title: Box model +slug: Web/CSS/box_model +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +

Resumo

+ +

Em uma página WEB, cada elemento é representado como um box retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses boxes é o objetivo do mecanismo de renderização.

+ +

No CSS, cada um desses boxes retangulares é descrita usando o box model padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: margin edge, border edge, padding edge e content edge.

+ +

CSS Box model

+ +

A área de conteúdo (content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do content edge; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.

+ +

Se a propriedade CSS {{ cssxref("box-sizing") }} está configurada como padrão, as propriedades CSS {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} e {{ cssxref("max-height") }} controlam o tamanho do conteúdo.

+ +

A área de preenchimento (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do padding edge, e suas dimensões são a largura do padding-box e a altura do padding-box.

+ +

O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} e na forma generalizada {{ cssxref("padding") }}.

+ +

A área de borda (border area) estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do border edge, e suas dimensões são a largura e a altura do border-box. Esta área depende do tamanho da borda que está definido pela propriedade {{ cssxref("border-width") }} ou pela propriedade {{ cssxref("border") }}.

+ +

A área de margem (margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do margin edge, e suas dimensões são a largura e a altura do margin-box.

+ +

O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} e na forma generalizada {{ cssxref("margin") }}.

+ +

Quando ocorre um colapso de margens, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.

+ +

Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade {{ cssxref('line-height') }}, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.

+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Embora mais precisamente formulada, não existem mudanças práticas
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/margin_collapsing/index.html deleted file mode 100644 index cb658d4131..0000000000 --- a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Dominando margin collapsing -slug: Web/CSS/CSS_Box_Model/margin_collapsing -tags: - - CSS - - CSS Box Model - - Guía - - Intermediario(2) - - Referencia -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -
As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
- -
 
- -

Margin collapsing ocorre em três casos básicos:

- -
-
Irmãos adjacentes
-
As margens de irmãos adjacentes são colapsadas (execeto quando  o último irmão precisar ser limpado devido ao uso de floats  em elementos anteriores ). Por exemplo:
-
- 
 <p>A margem inferior deste parágrafo é colapsada...</p>
- <p>... com margem superior deste parágrafo.</p>
-
-
-
Pai e primeiro/último filho
-
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o  {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
-
 
-
- -
-
Blocos vázios
-
Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou  {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.
-
 
-
- -

Algumas coisas podem ser observadas:

- - - -

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspeficicaçõesStatusComentário
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definição inicial
- -

Veja Também

- - diff --git a/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..cb658d4131 --- /dev/null +++ b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,74 @@ +--- +title: Dominando margin collapsing +slug: Web/CSS/CSS_Box_Model/margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Intermediario(2) + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +
As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
+ +
 
+ +

Margin collapsing ocorre em três casos básicos:

+ +
+
Irmãos adjacentes
+
As margens de irmãos adjacentes são colapsadas (execeto quando  o último irmão precisar ser limpado devido ao uso de floats  em elementos anteriores ). Por exemplo:
+
+ 
 <p>A margem inferior deste parágrafo é colapsada...</p>
+ <p>... com margem superior deste parágrafo.</p>
+
+
+
Pai e primeiro/último filho
+
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o  {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
+
 
+
+ +
+
Blocos vázios
+
Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou  {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.
+
 
+
+ +

Algumas coisas podem ser observadas:

+ + + +

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspeficicaçõesStatusComentário
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definição inicial
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/css_colors/color_picker_tool/index.html b/files/pt-br/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..a98aaf9342 --- /dev/null +++ b/files/pt-br/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3241 @@ +--- +title: Seletor de cores +slug: Web/CSS/CSS_Colors/seletor_de_cores +tags: + - CSS + - Cores CSS + - Cores HTML + - Ferramenta para Seleção de Cores CSS + - Ferramenta para Seleção de Cores HTML + - Ferramentas + - Seletor de Cores + - Seletor de Cores CSS + - Seletor de Cores HTML + - cor + - cores +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}}

+ +

Esta ferramenta facilita a criação, ajuste e experimentação com cores personalizadas para uso na web. Ela também facilita a conversão entre vários formatos de cores suportados por CSS, incluindo cores HEXA, RGB (vermelho, verde, azul) e HSL (tonalidade, saturação, luminosidade). Controle sobre o canal alfa também é suportado nos formatos RGB (rgba) e (hsla).

+ +

Enquanto você ajusta os parâmetros que definem a cor, ela é apresentada nos 3 formatos padrão para CSS web. Além disso, com base na seleção de cor atual, é gerada uma paleta para HSL, HSV e também alfa. O selecionador de cor estilo "conta-gotas" pode alternar os estilos HSL e HSV. Você também pode testar as cores e ver como elas se sobrepõem umas sobre às outras. 

+ +

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

+ +

As cores geradas por você acima podem ser usadas em qualquer lugar em que a cor é usada em CSS e HTML, a menos que seja indicado de outra forma.

+ +

Veja também

+ +

Para mais aplicações de cores, veja:

+ + diff --git a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html b/files/pt-br/web/css/css_colors/seletor_de_cores/index.html deleted file mode 100644 index a98aaf9342..0000000000 --- a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html +++ /dev/null @@ -1,3241 +0,0 @@ ---- -title: Seletor de cores -slug: Web/CSS/CSS_Colors/seletor_de_cores -tags: - - CSS - - Cores CSS - - Cores HTML - - Ferramenta para Seleção de Cores CSS - - Ferramenta para Seleção de Cores HTML - - Ferramentas - - Seletor de Cores - - Seletor de Cores CSS - - Seletor de Cores HTML - - cor - - cores -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}}

- -

Esta ferramenta facilita a criação, ajuste e experimentação com cores personalizadas para uso na web. Ela também facilita a conversão entre vários formatos de cores suportados por CSS, incluindo cores HEXA, RGB (vermelho, verde, azul) e HSL (tonalidade, saturação, luminosidade). Controle sobre o canal alfa também é suportado nos formatos RGB (rgba) e (hsla).

- -

Enquanto você ajusta os parâmetros que definem a cor, ela é apresentada nos 3 formatos padrão para CSS web. Além disso, com base na seleção de cor atual, é gerada uma paleta para HSL, HSV e também alfa. O selecionador de cor estilo "conta-gotas" pode alternar os estilos HSL e HSV. Você também pode testar as cores e ver como elas se sobrepõem umas sobre às outras. 

- -

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

- -

As cores geradas por você acima podem ser usadas em qualquer lugar em que a cor é usada em CSS e HTML, a menos que seja indicado de outra forma.

- -

Veja também

- -

Para mais aplicações de cores, veja:

- - diff --git a/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..05318caa79 --- /dev/null +++ b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,239 @@ +--- +title: Conceitos básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox +tags: + - CSS + - Flex + - Tutorial + - conceitos + - conteiner + - eixos + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

O Flexible Box Module, geralmente chamado de flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do flexbox, as quais exploraremos com mais detalhes no restante deste guia.

+ +

Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com o layout em uma dimensão de cada vez - seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de CSS - Layout de Grade, que permite o controle simultâneo das colunas e linhas.

+ +

Os eixos do flexbox

+ +

Ao se utilizar o flexbox, é preciso ter em mente que todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal. O eixo principal é definido através da propriedade flex-direction e o eixo transversal encontra-se na direção perpendicular a ele. Como esses eixos são as engrenagens fundamentais do flexbox é necessário compreender minuciosamente o seu funcionamento.

+ +

Eixo principal

+ +

Conforme descrito acima, a propriedade flex-direction define a direção do eixo principal e pode tem quatro valores possíveis:

+ + + +

Se o valor escolhido for row (linha) ou row-reverse (linha reversa), seu eixo principal se moverá ao longo da linha — na direção inline.

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Se o valor escolhido for column (coluna) ou column-reverse (coluna reversa) e o eixo principal se moverá do topo até o fim da página — na direção block.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

Eixo transversal

+ +

O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade flex-direction estiver definida nas linhas, como row ou row-reverse, o eixo transversal estará na direção das colunas, como column ou column-reverse.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Se o eixo principal for definido nas colunas, como column ou column-reverse, então o eixo transversal estará na direção das linhas, como row ou row-reverse.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Compreender a diferença entre os eixos principal e perpendicular é o que importa quando começamos a observar o alinhamento ou justificação dos itens flexíveis (flex items); o flexbox possui propriedades que alinham e justificam o conteúdo ao longo de um eixo ou de outro.

+ +

Linhas de Início e Fim

+ +

Outra área crítica em termos de compreensão é como o Flexbox não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.

+ +

Essa discussão sobre a relação entre o flexbox e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos flex fluem.

+ +

Se o valor da propriedade flex-direction for row (linha), considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.

+ +

Working in English the start edge is on the left.

+ +

Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.

+ +

The start edge in a RTL language is on the right.

+ +

Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.

+ +

Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.

+ +

Contêiner Flex

+ +

A área de um documento que faz uso do flexbox é chamada de contêiner flex. Para criar essa estrutura, define-se o valor da propriedade {{cssxref("display")}} do elemento representado pelo contêiner como flex ou inline-flex. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo flex. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:

+ + + +

O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total.

+ +

É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Propriedade flex-direction

+ +

A propriedade {{cssxref("flex-direction")}} permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade flex-direction como row-reverse (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.
+
+ Se mudarmos a flex-direction para a column (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para column-reverse (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.
+
+ No exemplo prático abaixo tem-se a propriedade flex-direction definida como row-reverse. Experimente os outros valores - row, column e column-reverse - para ver o que acontece com o conteúdo.
+
+ {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Quebra de linha com "flex-wrap"

+ +

Embora o flexbox seja um modelo unidimensional, é possível fazer com que elementos flex sejam agrupados em múltiplas linhas. Ao fazer isso, considera-se cada linha como um novo contêiner flex. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade {{cssxref("flex-wrap")}} com o valor wrap. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.

+ +

O exemplo prático abaixo contém elementos flex aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade flex-wrap está definida como wrap, os itens serão reorganizados em mais de uma linha. Trocando-se para nowrap, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do nowrap causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Saiba mais sobre o empacotamento de itens flexíveis no guia Masterização de Empacotamento de Itens Flexíveis (em Inglês).

+ +

Propriedade abreviada flex-flow

+ +

Pode-se combinar as propriedades flex-direction e flex-wrap de forma abreviada através da propriedade {{cssxref("flex-flow")}}. O primeiro valor especificado é o flex-direction e o segundo valor é o flex-wrap.

+ +

No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade flex-direction - row, row-reverse, column ou column-reverse, e também altere o segundo para wrap e nowrap.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Expansão, encolhimento e tamanho dos elementos flex

+ +

Para ter mais controle sobre os elementos flex é possível alterá-los diretamente utilizando as três propriedades abaixo:

+ + + +

Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugete-se o tutorial Taxas de Controle de Elementos Flex ao Longo do Eixo Principal (em inglês).

+ +

Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de espaço disponível. Quando se modifica o valor das propriedades  acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.

+ +

Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o flexbox posicionará esse espaço após o último item.

+ +

This flex container has available space after laying out the items.

+ +

Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.

+ +

Propriedade flex-basis

+ +

A propriedade flex-basis define o tamanho inicial dos elementos, em unidades de pixel, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é auto — neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade flex-basis.

+ +

Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se display: flex no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.

+ +

Propriedade flex-grow

+ +

Com a propriedade flex-grow definida como um inteiro positivo, os elementos flex podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no flex-basis. Isto fará com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo ou uma proporção dele, caso outros elementos-irmãos também possam crescer.

+ +

Atribuir o valor 1 à propriedade flex-grow fará com que o espaço disponível no contêiner flex seja igualmente distribuído entre todos os elementos do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.

+ +

Como visto no parágrafo anterior, a propriedade flex-grow pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 parae 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).

+ +

Propriedade flex-shrink

+ +

Enquanto a propriedade flex-grow permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade flex-shrink faz o oposto, controlando a redução dos mesmos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade flex-shrink seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade flex-basis. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros - um elemento cuja propriedade flex-shrink receba um valor inteiro maior irá diminuir mais do que os seus irmão que tenham valores menores.

+ +

O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.

+ +
+

Note que os valores para as propriedades flex-grow e flex-shrink são proporcionais.  Particularmente, se tivermos todos os nossos elementos definidos como flex: 1 1 200px e então quisermos que um deles cresça o dobro, temos de definir o elemento como flex: 2 1 200px. Entretanto, podemos escrever flex: 10 1 200px e flex: 20 1 200px se quisermos.

+
+ +

Abreviatura para os valores das propriedades flex

+ +

As propriedades flex-grow, flex-shrink, and flex-basis raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação {{cssxref("flex")}}. A abreviatura flex permite definir os três valores na seguinte ordem: flex-grow, flex-shrink, flex-basis.

+ +

O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação flex; lembre-se que o primeiro campo corresponde à propriedade flex-grow, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade flex-shrink e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas  somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade flex-basis, que define o valor base, em unidades de pixel, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+ +

Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:

+ + + +

Definir flex: initial reseta os elementos para valores-padrão do Flexbox, sendo equivale a flex: 0 1 auto. Neste ultimo caso, o valor da propriedade flex-grow é 0, então os elementos não irão crescer mais do que o tamanho-base definido na propriedade flex-basis. o valor da propriedade flex-shrink é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade flex-basis é auto e assim será usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.

+ +

Definir flex: auto é equivalente a flex: 1 1 auto. Essa configuração é semelhante a flex:initial, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.

+ +

Definir flex: none irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever flex: 0 0 auto. O elementos não poderão crescer ou diminuir, mas serão criados usando o flexbox com a propriedade flex-basis com o valor auto.

+ +

Outra abreviação normalmente vista em tutoriais é flex: 1 ou flex: 2 e assim por diante, o que equipara-se a flex: 1 1 0. Os elementos podem crescer ou diminuir a partir da propriedade flex-basis com valor nulo.

+ +

Teste essas formas abreviadas no exemplo prático abaixo:

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alinhamento, justificação e distribuição de espaço livre   entre os elementos

+ +

Um atributo chave do flexbox é a capacidade de alinhar e justificar os elementos  flex nos eixos principal e transversal e distribuir o espaço entre eles.

+ +

Propriedade align-items

+ +

A propriedade {{cssxref("align-items")}} irá alinhar os elementos no eixo transversal.

+ +

O valor inicial desta propriedade é stretch e é por essa razão que, por padrão, os elementos flex se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.

+ +

Pode-se definir a propriedade align-items como flex-start, de modo que os elementos fiquem alinhados com topo do contêiner, flex-end para alinhá-los a partir da base ou center, para que o alinhamento seja centralizado.

+ +

Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada  altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade align-items:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

Propriedade justify-content

+ +

A propriedade {{cssxref("justify-content")}} é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (row ou column) é definida a partir da propriedade flex-direction. O valor inicial é flex-start, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como flex-end, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou center, para alinhá-los ao centro.

+ +

O valor space-between pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor space-around.

+ +

Tente os seguintes valores da propriedada justify-content no exemplo prático abaixo:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

No artigo Alinhando Elementos em um Contêiner Flex (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.

+ +

Próximos passos

+ +

Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar como essa especificação se relaciona com outras partes do CSS (em inglês). 

diff --git a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html deleted file mode 100644 index 05318caa79..0000000000 --- a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Conceitos básicos de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox -tags: - - CSS - - Flex - - Tutorial - - conceitos - - conteiner - - eixos - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

O Flexible Box Module, geralmente chamado de flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do flexbox, as quais exploraremos com mais detalhes no restante deste guia.

- -

Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com o layout em uma dimensão de cada vez - seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de CSS - Layout de Grade, que permite o controle simultâneo das colunas e linhas.

- -

Os eixos do flexbox

- -

Ao se utilizar o flexbox, é preciso ter em mente que todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal. O eixo principal é definido através da propriedade flex-direction e o eixo transversal encontra-se na direção perpendicular a ele. Como esses eixos são as engrenagens fundamentais do flexbox é necessário compreender minuciosamente o seu funcionamento.

- -

Eixo principal

- -

Conforme descrito acima, a propriedade flex-direction define a direção do eixo principal e pode tem quatro valores possíveis:

- - - -

Se o valor escolhido for row (linha) ou row-reverse (linha reversa), seu eixo principal se moverá ao longo da linha — na direção inline.

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

Se o valor escolhido for column (coluna) ou column-reverse (coluna reversa) e o eixo principal se moverá do topo até o fim da página — na direção block.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

Eixo transversal

- -

O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade flex-direction estiver definida nas linhas, como row ou row-reverse, o eixo transversal estará na direção das colunas, como column ou column-reverse.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

Se o eixo principal for definido nas colunas, como column ou column-reverse, então o eixo transversal estará na direção das linhas, como row ou row-reverse.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Compreender a diferença entre os eixos principal e perpendicular é o que importa quando começamos a observar o alinhamento ou justificação dos itens flexíveis (flex items); o flexbox possui propriedades que alinham e justificam o conteúdo ao longo de um eixo ou de outro.

- -

Linhas de Início e Fim

- -

Outra área crítica em termos de compreensão é como o Flexbox não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.

- -

Essa discussão sobre a relação entre o flexbox e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos flex fluem.

- -

Se o valor da propriedade flex-direction for row (linha), considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.

- -

Working in English the start edge is on the left.

- -

Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.

- -

The start edge in a RTL language is on the right.

- -

Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.

- -

Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.

- -

Contêiner Flex

- -

A área de um documento que faz uso do flexbox é chamada de contêiner flex. Para criar essa estrutura, define-se o valor da propriedade {{cssxref("display")}} do elemento representado pelo contêiner como flex ou inline-flex. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo flex. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:

- - - -

O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total.

- -

É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

Propriedade flex-direction

- -

A propriedade {{cssxref("flex-direction")}} permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade flex-direction como row-reverse (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.
-
- Se mudarmos a flex-direction para a column (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para column-reverse (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.
-
- No exemplo prático abaixo tem-se a propriedade flex-direction definida como row-reverse. Experimente os outros valores - row, column e column-reverse - para ver o que acontece com o conteúdo.
-
- {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Quebra de linha com "flex-wrap"

- -

Embora o flexbox seja um modelo unidimensional, é possível fazer com que elementos flex sejam agrupados em múltiplas linhas. Ao fazer isso, considera-se cada linha como um novo contêiner flex. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade {{cssxref("flex-wrap")}} com o valor wrap. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.

- -

O exemplo prático abaixo contém elementos flex aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade flex-wrap está definida como wrap, os itens serão reorganizados em mais de uma linha. Trocando-se para nowrap, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do nowrap causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Saiba mais sobre o empacotamento de itens flexíveis no guia Masterização de Empacotamento de Itens Flexíveis (em Inglês).

- -

Propriedade abreviada flex-flow

- -

Pode-se combinar as propriedades flex-direction e flex-wrap de forma abreviada através da propriedade {{cssxref("flex-flow")}}. O primeiro valor especificado é o flex-direction e o segundo valor é o flex-wrap.

- -

No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade flex-direction - row, row-reverse, column ou column-reverse, e também altere o segundo para wrap e nowrap.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Expansão, encolhimento e tamanho dos elementos flex

- -

Para ter mais controle sobre os elementos flex é possível alterá-los diretamente utilizando as três propriedades abaixo:

- - - -

Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugete-se o tutorial Taxas de Controle de Elementos Flex ao Longo do Eixo Principal (em inglês).

- -

Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de espaço disponível. Quando se modifica o valor das propriedades  acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.

- -

Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o flexbox posicionará esse espaço após o último item.

- -

This flex container has available space after laying out the items.

- -

Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.

- -

Propriedade flex-basis

- -

A propriedade flex-basis define o tamanho inicial dos elementos, em unidades de pixel, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é auto — neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade flex-basis.

- -

Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se display: flex no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.

- -

Propriedade flex-grow

- -

Com a propriedade flex-grow definida como um inteiro positivo, os elementos flex podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no flex-basis. Isto fará com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo ou uma proporção dele, caso outros elementos-irmãos também possam crescer.

- -

Atribuir o valor 1 à propriedade flex-grow fará com que o espaço disponível no contêiner flex seja igualmente distribuído entre todos os elementos do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.

- -

Como visto no parágrafo anterior, a propriedade flex-grow pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 parae 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).

- -

Propriedade flex-shrink

- -

Enquanto a propriedade flex-grow permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade flex-shrink faz o oposto, controlando a redução dos mesmos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade flex-shrink seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade flex-basis. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros - um elemento cuja propriedade flex-shrink receba um valor inteiro maior irá diminuir mais do que os seus irmão que tenham valores menores.

- -

O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.

- -
-

Note que os valores para as propriedades flex-grow e flex-shrink são proporcionais.  Particularmente, se tivermos todos os nossos elementos definidos como flex: 1 1 200px e então quisermos que um deles cresça o dobro, temos de definir o elemento como flex: 2 1 200px. Entretanto, podemos escrever flex: 10 1 200px e flex: 20 1 200px se quisermos.

-
- -

Abreviatura para os valores das propriedades flex

- -

As propriedades flex-grow, flex-shrink, and flex-basis raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação {{cssxref("flex")}}. A abreviatura flex permite definir os três valores na seguinte ordem: flex-grow, flex-shrink, flex-basis.

- -

O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação flex; lembre-se que o primeiro campo corresponde à propriedade flex-grow, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade flex-shrink e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas  somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade flex-basis, que define o valor base, em unidades de pixel, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

- -

Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:

- - - -

Definir flex: initial reseta os elementos para valores-padrão do Flexbox, sendo equivale a flex: 0 1 auto. Neste ultimo caso, o valor da propriedade flex-grow é 0, então os elementos não irão crescer mais do que o tamanho-base definido na propriedade flex-basis. o valor da propriedade flex-shrink é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade flex-basis é auto e assim será usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.

- -

Definir flex: auto é equivalente a flex: 1 1 auto. Essa configuração é semelhante a flex:initial, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.

- -

Definir flex: none irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever flex: 0 0 auto. O elementos não poderão crescer ou diminuir, mas serão criados usando o flexbox com a propriedade flex-basis com o valor auto.

- -

Outra abreviação normalmente vista em tutoriais é flex: 1 ou flex: 2 e assim por diante, o que equipara-se a flex: 1 1 0. Os elementos podem crescer ou diminuir a partir da propriedade flex-basis com valor nulo.

- -

Teste essas formas abreviadas no exemplo prático abaixo:

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

Alinhamento, justificação e distribuição de espaço livre   entre os elementos

- -

Um atributo chave do flexbox é a capacidade de alinhar e justificar os elementos  flex nos eixos principal e transversal e distribuir o espaço entre eles.

- -

Propriedade align-items

- -

A propriedade {{cssxref("align-items")}} irá alinhar os elementos no eixo transversal.

- -

O valor inicial desta propriedade é stretch e é por essa razão que, por padrão, os elementos flex se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.

- -

Pode-se definir a propriedade align-items como flex-start, de modo que os elementos fiquem alinhados com topo do contêiner, flex-end para alinhá-los a partir da base ou center, para que o alinhamento seja centralizado.

- -

Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada  altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade align-items:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

Propriedade justify-content

- -

A propriedade {{cssxref("justify-content")}} é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (row ou column) é definida a partir da propriedade flex-direction. O valor inicial é flex-start, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como flex-end, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou center, para alinhá-los ao centro.

- -

O valor space-between pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor space-around.

- -

Tente os seguintes valores da propriedada justify-content no exemplo prático abaixo:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

No artigo Alinhando Elementos em um Contêiner Flex (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.

- -

Próximos passos

- -

Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar como essa especificação se relaciona com outras partes do CSS (em inglês). 

diff --git a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html b/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html deleted file mode 100644 index e14ba15c2d..0000000000 --- a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Implementando sprites de imagens em CSS -slug: Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS -translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS ---- -
{{cssRef}}
- -

Sprites de imagens são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.

- -
-

Nota: Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.

-
- -

Implementação

- -

Suponha que uma imagem é dada a cada item com a classe toolbtn:

- -
.toolbtn {
-  background: url(myfile.png);
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-}
- -

A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de {{cssxref("url()")}} em background , ou como {{cssxref("background-position")}} . Por exemplo:

- -
#btn1 {
-  background-position: -20px 0px;
-}
-
-#btn2 {
-  background-position: -40px 0px;
-}
- -

Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe toolbtn atribuída e estão sendo afetados pela regra da imagem acima).

- -

De forma similar, você pode criar um efeito de hover com:

- -
#btn:hover {
-  background-position: <pixels para direita>px <pixels para baixo>px;
-}
- -

Veja também

- - diff --git a/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..e14ba15c2d --- /dev/null +++ b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,47 @@ +--- +title: Implementando sprites de imagens em CSS +slug: Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +
{{cssRef}}
+ +

Sprites de imagens são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.

+ +
+

Nota: Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.

+
+ +

Implementação

+ +

Suponha que uma imagem é dada a cada item com a classe toolbtn:

+ +
.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de {{cssxref("url()")}} em background , ou como {{cssxref("background-position")}} . Por exemplo:

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe toolbtn atribuída e estão sendo afetados pela regra da imagem acima).

+ +

De forma similar, você pode criar um efeito de hover com:

+ +
#btn:hover {
+  background-position: <pixels para direita>px <pixels para baixo>px;
+}
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_positioning/understanding_z_index/index.html b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..488ca0f600 --- /dev/null +++ b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,48 @@ +--- +title: Understanding CSS z-index +slug: Web/Guide/CSS/Understanding_z_index +tags: + - CSS + - Entendendo_CSS_z-index + - Guía + - Web + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo {{cssxref("z-index")}} lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.

+ +
+

Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.

+
+ +

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao render normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS {{ cssxref("z-index")}}.

+ +

Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de stacking. Uma sessão dedicada foi  reservada na especificação do CSS  CSS-2.1 Appendix E para explicar melhor essas regras.

+ +

Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.

+ +
    +
  1. Stacking without z-index : Regras padrões de empilhamento
    2. +
  2. Stacking and float : Como lidar com elementos que usam float
    3. +
  3. Adding z-index : Usando index-z para mudar o empilhamento padrão
    4. +
  4. The stacking context : Notas sobre contexto do empilhamento
    5. +
  5. Stacking context example 1 : 2-level HTML hierarquia, z-index no último level
    6. +
  6. Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os levels
    7. +
  7. Stacking context example 3 : 3-level HTML hierarquia, z-index no segundo level
    8. +
+ +

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

+ +
+

Original Document Information

+ + +
+ +

 

diff --git a/files/pt-br/web/css/css_reference/index.html b/files/pt-br/web/css/css_reference/index.html deleted file mode 100644 index 1afbf4890e..0000000000 --- a/files/pt-br/web/css/css_reference/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Referência de CSS -slug: Web/CSS/CSS_Reference -translation_of: Web/CSS/Reference ---- -{{CSSRef}} - -

Use esta referência de CSS para navegar por um índice alfabético das propriedades padrão do CSS, pseudo-classes, pseudo-elementos, tipos de dados e @-rules.

- -

Esta referência lista não somente as propriedades do CSS1 e CSS2.1, mas também referências para qualquer propriedade, conceito padronizado ou estabilizado do CSS3.

- -

Veja também Extensões CSS Mozilla para propriedades específicas do Gecko prefixadas com -moz e Extensões CSS do WebKit para propriedades específicas do WebKit. Veja Visão geral de propriedades CSS prefixadas por distribuidor por Peter Beverloo para todas as propriedades prefixadas.

- -

{{ CSS_Ref() }}

- -

Seletores

- - - -

Miscelânea

- - - -

Conceitos

- - diff --git a/files/pt-br/web/css/css_selectors/index.html b/files/pt-br/web/css/css_selectors/index.html new file mode 100644 index 0000000000..644d9d87e9 --- /dev/null +++ b/files/pt-br/web/css/css_selectors/index.html @@ -0,0 +1,150 @@ +--- +title: Seletores CSS +slug: Web/CSS/Seletores_CSS +tags: + - CSS + - Referência(2) + - Seletores + - Seletores CSS +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Os Seletores definem quais elementos um conjunto de regras CSS se aplica.

+ +

Seletores Básicos

+ +
+
Seletor por tag
+
Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
+ Sintaxe: nome-da-tag
+ Exemplo: input corresponderá a qualquer elemento {{HTMLElement('input')}}.
+
Seletor por classe
+
Este seletor básico escolhe elementos baseados no valor de seu atributo classe. Sintaxe: .nome-da-classe
+ Examplo: .index irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).
+
Seletor por ID
+
Este seletor básico escolhe nós baseados no valor do atributo id. Deve existir apenas um elemento com o mesmo ID no mesmo documento.
+ Sintaxe: #nome-do-id
+ Exemplo: #toc irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).
+
Seletores universais
+
Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.
+ Sintaxe: * ns|* *|*
+ Exemplo: * irá corresponder a todos os elementos do documento.
+
Seletores por atributo
+
Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
+ Sintaxe: [atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]
+ Exemplo: [autoplay] irá corresponder a todos os elementos que possuirem o atributo autoplay (para qualquer valor).
+
+ +

Combinadores

+ +
+
Seletores de irmãos adjacentes
+
O combinador + seleciona os nós que seguem imediatamente o elemento especificado anteriormente.
+ Sintaxe: A + B
+ Exemplo: ul + li irá corresponder a qualquer elemento {{HTMLElement('li')}} que segue imediatamente após um elemento {{HTMLElement('ul')}}.
+
Seletores gerais de irmãos
+
O combinador ~ seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.
+ Sintaxe: A ~ B
+ Exemplo: p ~ span irá corresponder a todo elemento {{HTMLElement('span')}} que seguir um elemento {{HTMLElement('p')}} dentro de um mesmo elemento pai.
+
Seletor de filhos
+
O combinador > selecina nós que são filhos diretos do elemento especificado anteriormente.
+ Sintaxe: A > B
+ Exemplo: ul > li irá corresponder a todo elemento {{HTMLElement('li')}} que estiver diretamente dentro de um elemento {{HTMLElement('ul')}} especificado.
+
Seletor de descendentes
+
O combinador   seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).
+ Sintaxe: A B
+ Exemplo: div span irá corresponder a todo e qualquer elemento {{HTMLElement('span')}} que estiver dentro do elemento {{HTMLElement('div')}}.
+
+ +

Pseudo-classes

+ +

Pseudo-classes permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.

+ +

Pseudo-elementos

+ +

Pseudo-elementos são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definição inicial
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/pt-br/web/css/css_tipos/index.html b/files/pt-br/web/css/css_tipos/index.html deleted file mode 100644 index 79256061ae..0000000000 --- a/files/pt-br/web/css/css_tipos/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Tipos básicos de dados CSS -slug: Web/CSS/CSS_Tipos -tags: - - CSS - - CSS tipos de dados - - Referencia - - Visão Geral -translation_of: Web/CSS/CSS_Types ---- -
{{CssRef}}
- -

Tipos básicos de dados CSS definem valores típicos (incluindo palavras chaves e unidades) aceitos pelas propriedades e funções do CSS. Eles são um tipo especial de tipo de valor do componente.
-
- Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada entre os sinais de desigualdade "<" e ">".

- -

Referência

- -
- -
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Definição inicial.
diff --git a/files/pt-br/web/css/css_types/index.html b/files/pt-br/web/css/css_types/index.html new file mode 100644 index 0000000000..79256061ae --- /dev/null +++ b/files/pt-br/web/css/css_types/index.html @@ -0,0 +1,64 @@ +--- +title: Tipos básicos de dados CSS +slug: Web/CSS/CSS_Tipos +tags: + - CSS + - CSS tipos de dados + - Referencia + - Visão Geral +translation_of: Web/CSS/CSS_Types +--- +
{{CssRef}}
+ +

Tipos básicos de dados CSS definem valores típicos (incluindo palavras chaves e unidades) aceitos pelas propriedades e funções do CSS. Eles são um tipo especial de tipo de valor do componente.
+
+ Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada entre os sinais de desigualdade "<" e ">".

+ +

Referência

+ +
+ +
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Definição inicial.
diff --git a/files/pt-br/web/css/elemento_substituido/index.html b/files/pt-br/web/css/elemento_substituido/index.html deleted file mode 100644 index 22ba1b8ad0..0000000000 --- a/files/pt-br/web/css/elemento_substituido/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Elemento substituído -slug: Web/CSS/Elemento_substituido -translation_of: Web/CSS/Replaced_element ---- -
{{CSSRef()}}
- -

Sumario

- -

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are:

- - - -

Some elements are treated as replaced elements only in specific cases:

- - - -

The only form control that is also a replaced element is {{HTMLElement("input")}} of the image type. All other form controls are non-replaced elements.

- -

Objects inserted using the CSS {{cssxref("content")}} properties are anonymous replaced elements.

- -

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

- -

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like {{cssxref("vertical-align")}}.

- -

Veja também

- - diff --git a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html deleted file mode 100644 index 7880e00f6d..0000000000 --- a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Cascata e herança -slug: Web/CSS/Getting_Started/Cascading_and_inheritance -tags: - - Guía - - Iniciante -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do  Primeiros Passos (Tutorial CSS); Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.

- -

Informação: Cascata e Herança

- -

O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.

- -

Existem três fontes principais de estilos que constituem a cascata. São elas:

- - - -

O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.

- -
-
Exemplo
- -

Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.

- -

Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo userContent.css do seu navegador.

- -

Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.

-
- -

Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }}  vem em negrito. Isto vem das configurações padrão do seu navegador.

- -

Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).

- -

Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.

- -

Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.

- -

Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.

- -

Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.

- -

Mais detalhes

- -
-

CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. 

- -

Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.

- -

Se você quiser saber todos os detalhes da cascata e herança, consulte  Assigning property values, Cascading, and Inheritance na especificação do CSS

-
- -

Ação: Usando herança

- -
    -
  1. Edite o seu arquivo CSS.
    2. -
  2. Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element: - 
    p {color: blue; text-decoration: underline;}
-
    -
    3. -
  3. Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.
    - -

    Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.

    -
    4. -
- - -
- - - - - - - - -
Antes
Cascading Style Sheets
- - - - - - - - -
Depois
Cascading Style Sheets
- -
-
Desafio
-Mude o seu estilo de modo que somente as letras vermelhas sublinhadas: - - - - - - - -
Cascading Style Sheets
- -
-
Possible solution
- -

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

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

 

-Hide solution
-Veja a solução do desafio.
- -

Qual o próximo?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, <p> e <strong>, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais seletores.

diff --git a/files/pt-br/web/css/getting_started/como_css_funciona/index.html b/files/pt-br/web/css/getting_started/como_css_funciona/index.html deleted file mode 100644 index 2ead5ccae7..0000000000 --- a/files/pt-br/web/css/getting_started/como_css_funciona/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Como o CSS funciona -slug: Web/CSS/Getting_Started/Como_CSS_funciona -tags: - - 'CSS:PrimeirosPassos' - - Guía - - Iniciante - - Web -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial CSS Getting Started mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo. 

- -

Informação: Como o CSS funciona

- -

Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:

- -
    -
  1. O navegador converte a linguagem de marcação e o CSS  no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.
    2. -
  2. O navegador exibe o conteúdo do DOM.
    3. -
- -

Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando tags, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui tags emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '<' e '>'. Para a tag final, coloque um '/' depois do '<' e antes do nome do elemento.

- -

Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.

- -

O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.

- -

Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.

- -
-
Exemplo
-No seu documento de exemplo, a tag <p>  e seu final </p> criam um recipiente: - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

Exemplo em tempo real

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós 'strongs' e os nós de texto. Os nós 'strong'  são eles próprios pais, com nós de texto como filhos.

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

Ação: Analisando um DOM

- -

Utilizando Inspetor DOM

- -

Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on Inspetor DOM do Mozilla (DOMi)  para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).

- -
    -
  1. Use seu navegador Mozilla para abrir seu documento HTML de exemplo.
    2. -
  2. Na barra de menu do seu navegador, escolha Ferramentas  > Inspetor DOM, ou Ferramentas > Desenvolvimento Web > Inspetor DOM. -
    -
    Mais detalhes
    - -

    Se o seu navegador Mozilla não ter o DOMi, você pode instalá-lo a partir do site de Add-ons  e reiniciar seu navegador.  Depois, retorne para esse tutorial.

    - -

    Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.

    -
    -
    3. -
  3. No DOMi, expanda o nó do seu documento clicando em suas flechas. -

    Nota:  Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.

    - -

    Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:

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

    Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.

    - -

    Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.

    -
    4. -
- -
-
Desafio
- -

No DOMi, clique em um nó STRONG.

- -

Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.

- - -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Hide solution
-Veja a solução para o desafio.
- -

Usando Raio-X Goggles da Web

- -

Raio-X Goggles da Web exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.

- -
    -
  1. Vá para a página inicial do Raio-X Goggles da Web.
    2. -
  2. Arraste o link do bookmarklet na página para a barra de ferramentas do seu navegador.
    3. -
  3. Abra o seu documento HTML de exemplo.
    4. -
  4. Ative o Raio-X Goggles da Web clicando no bookmarklet na sua barra de ferramentas.
    5. -
  5. Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.
    6. -
- -

O que vem depois?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}Se você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A próxima página explica mais sobre essas interações.

diff --git a/files/pt-br/web/css/getting_started/index.html b/files/pt-br/web/css/getting_started/index.html deleted file mode 100644 index 389962ab07..0000000000 --- a/files/pt-br/web/css/getting_started/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Iniciando com o CSS -slug: Web/CSS/Getting_Started -tags: - - CSS - - Guia(2) - - Guía - - Iniciante - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

 

- -

Introdução

- -

Esse tutorial é uma introdução ao Cascading Style Sheets (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:

- - - - - -

Esse tutorial é baseado na Especificação do CSS 2.1.

- -

Quem deve usar esse tutorial?

- -

Esse tutorial é, principalmente, para iniciantes no CSS.

- -

Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.

- -

Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.

- -

Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.

- -

O que você precisa saber antes de começar?

- -

Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.

- -

Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.

- -

Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, você pode ignorá-las. O software referenciado por esse tutorial inclui:

- - - -

Nota: O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.

- -

Como usar esse tutorial

- -

Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.

- -

Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.

- -

Para testar seu entendimento, faça o desafio do fim de cada página. Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.

- -

Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda Mais detalhes (More details). Utilize os links para encontrar informações de referência sobre o CSS.

- -

Parte I do Tutorial

- -

Uma guia básico passo a passo do CSS

- -
    -
  1. O que é o CSS
    2. -
  2. Porque usar o CSS
    3. -
  3. Como o CSS funciona
    4. -
  4. Cascata e herança
    5. -
  5. Seletores
    6. -
  6. CSS legível
    7. -
  7. Estilos de texto
    8. -
  8. Cores
    9. -
  9. Conteúdo
    10. -
  10. Listas
    11. -
  11. Caixas
    12. -
  12. Layout
    13. -
  13. Tabelas
    14. -
  14. Mídia
    15. -
- -

Parte II do Tutorial

- -

Exemplos do uso do CSS juntamente com outras tecnologias

- -
    -
  1. JavaScript
    2. -
  2. Gráficos SVG
    3. -
  3. Dados XML
    4. -
  4. Ligações XBL
    5. -
  5. Interfaces de usuário XUL
    6. -
- -

{{ CSSTutorialTOC() }}

- -

{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/pt-br/web/css/getting_started/javascript/index.html b/files/pt-br/web/css/getting_started/javascript/index.html deleted file mode 100644 index 544deb8960..0000000000 --- a/files/pt-br/web/css/getting_started/javascript/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: JavaScript e CSS -slug: Web/CSS/Getting_Started/JavaScript -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

{{ CSSTutorialTOC() }}

-

Esta é a pirmeira sessão da Parte II do Tutorial de CSS. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.

-

Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.

-

Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.

-

Sessão Anterior (da Parte I): Media
- Próxima sessão: SVG

-

Informação: JavaScript

-

JavaScript é um programming language. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.

-

JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica

-

Há três formas de fazer isso:

- - - - - - - - -
- Mais detalhes
Para mais informações sobre JavaScript, veja a página JavaScript nesta wiki.
-

Ação: Uma demonstração de  JavaScript

-

Faça um novo documento em HTML, doc5.html. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:

-
- 
<!DOCTYPE html>
-<html>
-
-<head>
-<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
-<link rel="stylesheet" type="text/css" href="style5.css" />
-<script type="text/javascript" src="script5.js"></script>
-</head>
-
-<body>
-<h1>JavaScript sample</h1>
-
-<div id="square"></div>
-
-<button type="button" onclick="doDemo(this);">Click Me</button>
-
-</body>
-</html>
-
-
-

Crie um novo arquivo  CSS, style5.css. Copie e cole o conteúdo daqui:

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

Crie um novo arquivo de texto, script5.js. Coie e cole o conteúdo daqui:

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

Abra o documento no seu Browser e pressione o botão.

-

Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:

- - - - - - - -
- - - - - - -
-

JavaScript demonstration

-
- 		- - - - - - -
-

JavaScript demonstration

-
-
-
- Notas importantes sobre esta demonstração: - -
- - - - - - - -
- Desafio
-

Mude o script e então o square salta para a direita em 20 em quando muda as cores, e salta de volta depois.

-
-

Veja a solução deste desafio.

-

O que vem agora?

-

Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de Discussão.

-

Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras stylesheets) para selecionar elementos. A próxima página demonstra isso: XBL bindings

diff --git a/files/pt-br/web/css/getting_started/lists/index.html b/files/pt-br/web/css/getting_started/lists/index.html deleted file mode 100644 index 72dc8dc227..0000000000 --- a/files/pt-br/web/css/getting_started/lists/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Manipulando Listas -slug: Web/CSS/Getting_Started/Lists -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}

- -

Este é o 10º seção do CSS Introdução tutorial; ele descreve como você pode usar CSS para especificar o aparecimento de listas. Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.

- -

Informação: Lists

- -

Se você aceitou o desafio na última seção, em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.

- -

CSS proporciona propriedades especiais que são projetados para listas. Geralmente é mais conveniente usar estas propriedades sempre que puder.

- -

Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.

- -

O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.

- -

Listas não ordenadas

- -

Em uma lista desordenada, cada item da lista é marcado da mesma forma.

- -

CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:

- - - -

        none

- -

Alternativamente, você pode especificar o URL de uma imagem.

- -
-
Exemplo
- -

Essas regras especificam diferentes marcadores para diferentes classes de item da lista:

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

Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):

- -
<ul> 
-  <li class="open"> Lorem ipsum </ li> 
-  <li class="closed"> dolor sit </ li>
-  <li class="closed"> Amet consectetuer </ li>
-  <li class="open"> Magna aliquam </ li>
-  <li class="closed"> Autem veleum </ li>
-</ ul>
-
- -

O resultado pode parecer:

- -

{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}

-
- -

Listas ordenadas

- -

Em uma listaordenada , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.

- -

Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:

- - - -
-
Exemplo
- -

Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe informações, os itens são identificados com letras maiúsculas.

- -
<ol class="info">
-  <li>Lorem ipsum</li>
-  <li>Dolor sit</li>
-  <li>Amet consectetuer</li>
-  <li>Magna aliquam</li>
-  <li>Autem veleum</li>
-</ol>
- -
ol.info {list-style: upper-latin;}
-
- -

O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:

- -

{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}

-
- -
-
Mais detalhes
- -

O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.

- -

Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.

- -

Browsers diferem na maneira de implementar os estilos para listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.

-
- -

Contadores

- -
-

Nota:  Alguns navegadores não suportam contadores. O conteúdo CSS e compatibilidade do navegador página no site de modo Quirks contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. Páginas individuais na referência CSS neste local também têm tabelas de compatibilidade do navegador.

-
- -

Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.

- -

Para especificar a numeração, você precisa de um contador com um nome que você especificar.

- -

Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.

- -

Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.

- -

Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o conteúdo da propriedade (como você fez na página anterior, Conteúdo) .

- -

No valor do conteúdo de propriedade, especifique counter () com o nome de seu contador. Opcionalmente especifique um tipo. Os tipos são os mesmos que na lista ordenada secção acima.

- -

Normalmente, o elemento que apresenta o contador também incrementa-lo.

- -
-
Exemplo
- -

Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe numeradas:

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

 

- -

Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe numeradas:

- -
<p class = "numbered"> Lorem ipsum </ p>
-<p class = "numbered"> dolor sit </ p>
-<p class = "numbered"> Amet consectetuer </ p>
-<p class = "numbered"> Magna aliquam </ p>
-<p class = "numbered"> Autem veleum </ p>
-
- -
body 
-   {counter-reset: 
-mynum;} 
-p.numbered:before
-  {content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
- -

O resultado se parece com isso:

- -

{{ EmbedLiveSample("Contadores", '300', '200', '') }}

-
- -
-
Mais detalhes
- -

Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.

- -

Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. No exemplo acima, os contadores estão em negrito mas os itens da lista não são.

- -

Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. Para mais detalhes, consulte contadores automáticos e numeração em CSS Specification.

-
- -

Listas denominadas: Ação

- -

Crie um novo documento HTML, doc2.html. Copie e cole o conteúdo daqui:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Sample document 2</title>
-    <link rel="stylesheet" href="style2.css">
-  </head>
-  <body>
-
-    <h3 id="oceans">The oceans</h3>
-    <ul>
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-    </ul>
-
-    <h3 class="numbered">Numbered paragraphs</h3>
-    <p class="numbered">Lorem ipsum</p>
-    <p class="numbered">Dolor sit</p>
-    <p class="numbered">Amet consectetuer</p>
-    <p class="numbered">Magna aliquam</p>
-    <p class="numbered">Autem veleum</p>
-
-  </body>
-</html>
-
-
- -

Faça uma nova folha de estilo, style2.css. Copie e cole o conteúdo daqui:

- -
/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
- -

Se o layout e comentário não são a seu gosto, alterá-los.

- -

Abra o documento no seu browser. Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):

- -

{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}

- -
-
Desafios
- -

Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:

- - - - - - - -
-

The oceans

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

 

- -

Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:

- - - - - - - -
-

(A) The oceans

- -

. . .

- -

(B) Numbered paragraphs

- -

. . .

-
-
- -

Ver soluções para esses desafios.

- -

Qual o proximo?

- -

{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, caixas.

diff --git a/files/pt-br/web/css/getting_started/oque_é_css/index.html b/files/pt-br/web/css/getting_started/oque_é_css/index.html deleted file mode 100644 index 1ccc04f0ce..0000000000 --- a/files/pt-br/web/css/getting_started/oque_é_css/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: O que é CSS -slug: Web/CSS/Getting_Started/Oque_é_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de  introdução as CSS  e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.

- -

O que é CSS ?

- -

Cascading Style Sheets (CSS) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).

- -

Um documento é um conjunto de informações que são estruturadas utilizando uma linguagem de marcação.

- -
-
Examples
- - -
- -

Neste tutorial, temos boxes com o título Mais detalhes como o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.

- -
-
Mais detalhes
- -

Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.

- -

Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá trabalhar com documentos que estão armazenados em arquivos.

- -

Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:

- - - - - - - - - - - - - - - - - - - - -
HTMLpara paginas web
XMLpara documentos estruturados em geral
SVGpara gráficos
XULpara interfaces de usuários em Mozilla
- -

Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.

-
- -

Apresentar um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente  — por exemplo, na tela de um computador, projetor ou impressora.

- -
-
Mais detalhes
- -

CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta  um documento a um usuário  é chamado de user agent (UA), no Brasil agente de usuário. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.

- -

Para mais definições formais sobre  terminologia relacionadas com CSS, veja Definições na especificação CSS.

-
- -

Ação: Criando um documento

- -
    -
  1. Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.
    2. -
  2. Copie e cole o código HTML abaixo . Salve o arquivo usando o nome doc1.html - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Documento de exemplo</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    3. -
  3. No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar. -

    Você deve ver o texto  com as letras iniciais em negrito, como este:

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

    O que você vê no seu  navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.

    -
    4. -
- -

O que veremos depois?

- -

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na próxima seção você usará CSS para especificar o estilo.

diff --git a/files/pt-br/web/css/getting_started/porque_usar_css/index.html b/files/pt-br/web/css/getting_started/porque_usar_css/index.html deleted file mode 100644 index 453aa4c966..0000000000 --- a/files/pt-br/web/css/getting_started/porque_usar_css/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Por que usar CSS? -slug: Web/CSS/Getting_Started/Porque_usar_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Esta segunda parte do  CSS Getting Started tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.

- -

Informação: Por que usar CSS?

- -

As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag <head> do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos  na tag <head> de seu documento.

- -

Uma folha de estilo externa, tem muitas vantagens.:

- - - -
-
Exemplo
- -

Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..

- -

Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo  juntamente com o conteúdo da página.

- -

Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.

-
- -

Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo.  Mais adiante neste tutorial, você verá algumas exceções a esta disposição.

- -
-
Mais detalhes
- -

Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.

- -

Por exemplo, você pode usar a tag <b> para fazer o texto em negrito, e pode especificar a cor de fundo  na sua tag <body>.

- -

Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.

-
- -

Ação: Criando uma folha de estilo

- -
    -
  1. Crie outro arquivo de texto no mesmo diretório que o documento doc1.html você criou na primeira seção.
    2. -
  2. Salve seu documento como: style1.css. Este arquivo será sua folha de estilos.
    3. -
  3. Em seu CSS, cole a linha abaixo, e salve o arquivo: - 
    strong {color: red;}
-
    -
    4. -
- -

Linkando seu documento para sua folha de estilo

- -
    -
  1. Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo: - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Documento Simples com CSS</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas: - - - - - - -
    Cascading Style Sheets
    -
    3. -
- -

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

- -
-
Desafio
- -

Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.

- -

Encontre mais cinco nomes de cores que as CSS trabalham.

- -
-
Possible solution
- -

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

-Hide solution
-Veja a solução para este desafio.
- -

O que veremos?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para  aprender mais sobre como seu navegador trabalha e exibe um documento.

diff --git a/files/pt-br/web/css/getting_started/seletores/index.html b/files/pt-br/web/css/getting_started/seletores/index.html deleted file mode 100644 index 3870c68936..0000000000 --- a/files/pt-br/web/css/getting_started/seletores/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: Seletores -slug: Web/CSS/Getting_Started/Seletores -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta é a 5ª seção de Primeiros passos (Tutorial Css), ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.

- -

Informações: Seletores

- -

CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:

- -
strong {
-  color: red;
-}
-
- -

No CSS, este código inteiro é uma regra. Esta regra inicia com strong, que é um seletor. Ele seleciona os elementos do DOM aos quais a regra se aplica.

- -
-
Mais detalhes
- -

A parte dentro das chaves é a declaração.

- -

A palavra-chave color é uma propriedade e red é um valor.

- -

O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.

- -

Esse tutorial se refere ao seletor strong como um seletor de tag. A Especificação do CSS se refere a este seletor como seletor de tipo.

-
- -

Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.

- -

Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.

- -

Dois atributos são especiais para o CSS. São eles o class e o id.

- -

Seletores com Classe

- -

Use o atributo class em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.

- -

Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.

- -

Seletores com ID

- -

Use o atributo id em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.

- -

Em seu CSS, digite cerquilha (#) antes do ID quanto estiver usando em um seletor ID.

- -
-
Exemplo
-Esta tag HTML tem tanto um atributo class quanto um atributo id: - -
<p class="chave" id="principal">
-
- -

O valor de id, principal, precisa ser unico no documento, mas outras tags no documento podem ter o atributo class com o mesmo nome, chave.

- -

Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe chave. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)

- -
.chave {
-  color: green;
-}
-
- -

Esta regra torna negrito um elemento com id principal:

- -
#principal {
-  font-weight: bolder;
-}
-
-
- -

Seletores de Atributo

- -

Você não está restrito aos dois atributos especiais, class e id. Você pode especificar outros atributos usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:

- -
-
[disabled]
-
Seleciona todos os elementos com o atributo "disabled".
-
[type='button']
-
Seleciona todos os elementos do tipo "button".
-
[class~=key]
-
Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). Funcionalmente equivalente a .key.
-
[lang|=es]
-
Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).
-
[title*="example" i]
-
Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.
-
a[href^="https://"]
-
Seleciona links seguros.
-
img[src$=".png"]
-
IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.
-
- -

Seletores de pseudo-classes

- -

Uma pseudo-classe em CSS é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. Por exemplo  {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.

- -

Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite CSS3 Selectors working spec.

- -
-
Syntax
- -
selector:pseudo-class {
-  property: value;
-}
-
-
- -

Lista de pseudo-classes

- - - -

Informação: Especificidade

- -

Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais específico. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.

- -
-
Mais detalhes
- -

Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor .key seleciona todos os elementos que têm a classe com o nome key. O seletor p.key seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe key.

-
- -

Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.

- -

Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.

- -

Information: Selectors based on relationships

- -

CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.

- - - - - - - - - - - - - - - - - - - - - - - - - -
Common selectors based on relationships
SelectorSelects
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child (i.e. direct descendant) of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
- -

You can combine these to express complex relationships.

- -

You can also use the symbol * (asterisk) to mean "any element".

- -
-
Example
- -

An HTML table has an id attribute, but its rows and cells do not have individual identifiers:

- -
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
- -

These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:

- -
    #data-table-1 td:first-child {text-decoration: underline;}
-    #data-table-1 td:first-child + td {text-decoration: line-through;}
-
- -

The result looks like:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
More details
- -

In the usual way, if you make a selector more specific, then you increase its priority.

- -

If you use these techniques, you avoid the need to specify class or id attributes on so many tags in your document. Instead, CSS does the work.

- -

In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.

- -

For more examples about tables, see Tables in the CSS Reference page.

-
- -

Action: Using class and ID selectors

- -
    -
  1. Edit your HTML file, and duplicate the paragraph by copying and pasting it.
    2. -
  2. Then add id and class attributes to the first copy, and an id attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    3. -
  3. Now edit your CSS file. Replace the entire contents with: - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    4. -
  4. Save the files and refresh your browser to see the result: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - -

    You can try rearranging the lines in your CSS file to show that the order has no effect.

    - -

    The class selectors .carrot and .spinach have priority over the tag selector strong.

    - -

    The ID selector #first has priority over the class and tag selectors.

    -
    5. -
- -
-
Challenges
- -
    -
  1. Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
- -
-
Possible solution
- -
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
-Hide solution
-See a solution for the challenge.
- -

Action: Using pseudo-classes selectors

- -
    -
  1. Create an HTML file with following content: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    2. -
  2. Now edit your CSS file. Replace the entire contents with: - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    3. -
  3. Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): - - - - - - -
    Go to our Home page  
    -
    4. -
- -

Action: Using selectors based on relationships and pseudo-classes

- -

With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create pure-CSS dropdown menus (that is only CSS, without using JavaScript). The essence of this technique is the creation of a rule like the following:

- -
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
- -

to be applied to an HTML structure like the following:

- -
<div class="menu-bar">
-  <ul>
-    <li>
-      <a href="example.html">Menu</a>
-      <ul>
-        <li>
-          <a href="example.html">Link</a>
-        </li>
-        <li>
-          <a class="menu-nav" href="example.html">Submenu</a>
-          <ul>
-            <li>
-              <a class="menu-nav" href="example.html">Submenu</a>
-              <ul>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-              </ul>
-            </li>
-            <li><a href="example.html">Link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</div>
-
- -

See our complete CSS-based dropdown menu example for a possible cue.

- -

What next?

- -

Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git a/files/pt-br/web/css/hifens/index.html b/files/pt-br/web/css/hifens/index.html deleted file mode 100644 index c8e718562f..0000000000 --- a/files/pt-br/web/css/hifens/index.html +++ /dev/null @@ -1,902 +0,0 @@ ---- -title: hifens -slug: Web/CSS/hifens -translation_of: Web/CSS/hyphens ---- -
{{CSSRef}}
- -
A propriedade CSS  hyphens especifica como palavras devem ser hifenizadas quando o há quebra de texto em múltiplas linhas. Você pode prevenir a hifenização completamente, especificar pontos manualmente, ou permitir que o navegador insira automaticamente quando apropriado.
- -
 
- -
hyphens: none;
-hyphens: manual;
-hyphens: auto;
-
-/* Valores globais */
-hyphens: inherit;
-hyphens: initial;
-hyphens: unset;
-
- -

Regras de hifenização são específicas para cada idioma. Em HTML, o idioma é determinado pelo atributo lang, e os navegadores irão utilizar hífen apenas caso este atributo esteja presente e se houver um dicionário de hifenização disponível. Em XML, deve ser usado o atributo xml:lang.

- -
-

Nota: As regras que definem como a hifenização é realizada não são explicitamente definidas pela especificação, então a hifenização exata pode variar de navegador para navegador.

-
- -

{{cssinfo}}

- -

Sintaxe

- -

A propriedade hyphens é especificada como uma única palavra-chave escolhida da lista abaixo.

- -

Valores

- -
-
none
-
Palavras não são separadas em quebras de linha, mesmo se seus caracteres sugiram pontos de quebra de linha. Linhas são quebradas apenas em espaços em branco.
-
manual
-
Palavras são separadas apenas onde caracteres dentro de uma palavras sugiram oportunidades de quebra de linha. Veja abaixo {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} para mais detalhes.
-
auto
-
O navegador é livre para quebrar palavras automaticamente nos pontos apropriados de hifenização, seguindo quaisquer regras que ele escolher. Entretanto, oportunidades sugeridas de quebras de linha (veja {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} abaixo) irão sobrepor a seleção automática de pontos de quebra quando presentes.
-
- -
-

Nota: O comportamento da configuração auto requer que a propriedade idioma seja indicada corretamente para que as regras de hifenização sejam selecionadas. Você deve especificar o idioma utilizando o atributo HTML lang para garantir que a hifenização automática seja aplicada na linguagem de sua escolha.

-
- -

Oportunidades sugeridas de quebra de linha

- -

Existem dois caracteres Unicode que podem ser utilizados para especificar manualmente potenciais pontos de quebra de linha no texto:

- -
-
U+2010 (HYPHEN)
-
O caractere hífen "duro" indica uma oportunidade de quebra de linha visível. Mesmo que não haja quebra de linha naquele ponto, o hífen ainda será renderizado.
-
U+00AD (SHY)
-
Um hífen invisivel, "suave". Este caractere não é renderizado visivelmente; ao invés, ele marca um local onde o browser deve quebrar a palavra se um hífen for necessário. Em HTML você pode usar &shy; para inserir um hífen suave.
-
- -

Sintaxe formal

- -
{{csssyntax}}
- -

Exemplo

- -

Este exemplo usa três classes, uma para cada configuração possível da propriedade hyphens.

- -
<ul>
-  <li><code>none</code>: sem hífen; transbordar se necessário
-    <p lang="en" class="none">An extreme&shy;ly long English word</p>
-  </li>
-  <li><code>manual</code>: hífen apenas em &amp;hyphen; ou &amp;shy; (se necessário)
-    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
-  </li>
-  <li><code>auto</code>: hífen onde o algorítmo decidir (se necessário)
-    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
-  </li>
-</ul>
-
- -
p {
-  width: 55px;
-  border: 1px solid black;
- }
-p.none {
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-p.manual {
-  -webkit-hyphens: manual;
-  -ms-hyphens: manual;
-  hyphens: manual;
-}
-p.auto {
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-}
-
- -
-

{{EmbedLiveSample("Example", "100%", "470'")}}

-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoCondiçãoComentário
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
- -

Compatibilidade dos navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(13.0)}}{{property_prefix("-webkit")}}[1]
- {{CompatChrome(55.0)}} (unprefixed)		 -

{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("43.0")}}

- 		{{CompatIE("10.0")}}{{property_prefix("-ms")}}[3]{{CompatOpera(44)}}{{CompatSafari(5.1)}}{{property_prefix("-webkit")}}
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatNo}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for English (en, en-*){{CompatChrome(55.0)}} (unprefixed){{CompatGeckoDesktop("6.0")}}[4]10.0{{CompatOpera(44)}}5.1[5]
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}9.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Latin (la, la-*){{CompatVersionUnknown}}8.0{{CompatNo}}{{CompatOpera(44)}}{{CompatNo}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}8.010.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}31.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}9.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatAndroid("4.0")}}{{property_prefix("-webkit")}}[1]{{CompatChrome(55.0)}} (unprefixed){{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("43.0")}}		{{CompatNo}}{{CompatOperaMobile(44)}}{{CompatSafari(4.2)}}{{property_prefix("-webkit")}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for English (en, en-*){{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed){{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Latin (la, la-*){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatVersionUnknown}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} {{CompatUnknown}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Sem hifenização automática, apenas -webkit-hyphens: none é suportado.

- -

[2] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Gecko. Veja a nota abaixo para ver a lista completa destas linguagens.

- -

[3] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Internet Explorer. Veja a nota abaixo para ver a lista completa destas linguagens.

- -

[4] Usa um dicionário en-US.

- -

[5] en-GB e en-US usam dicionários diferentes.

- -

[6] Usa um dicionário Português.

- -

Veja também

- - diff --git a/files/pt-br/web/css/hyphens/index.html b/files/pt-br/web/css/hyphens/index.html new file mode 100644 index 0000000000..c8e718562f --- /dev/null +++ b/files/pt-br/web/css/hyphens/index.html @@ -0,0 +1,902 @@ +--- +title: hifens +slug: Web/CSS/hifens +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +
A propriedade CSS  hyphens especifica como palavras devem ser hifenizadas quando o há quebra de texto em múltiplas linhas. Você pode prevenir a hifenização completamente, especificar pontos manualmente, ou permitir que o navegador insira automaticamente quando apropriado.
+ +
 
+ +
hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Valores globais */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

Regras de hifenização são específicas para cada idioma. Em HTML, o idioma é determinado pelo atributo lang, e os navegadores irão utilizar hífen apenas caso este atributo esteja presente e se houver um dicionário de hifenização disponível. Em XML, deve ser usado o atributo xml:lang.

+ +
+

Nota: As regras que definem como a hifenização é realizada não são explicitamente definidas pela especificação, então a hifenização exata pode variar de navegador para navegador.

+
+ +

{{cssinfo}}

+ +

Sintaxe

+ +

A propriedade hyphens é especificada como uma única palavra-chave escolhida da lista abaixo.

+ +

Valores

+ +
+
none
+
Palavras não são separadas em quebras de linha, mesmo se seus caracteres sugiram pontos de quebra de linha. Linhas são quebradas apenas em espaços em branco.
+
manual
+
Palavras são separadas apenas onde caracteres dentro de uma palavras sugiram oportunidades de quebra de linha. Veja abaixo {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} para mais detalhes.
+
auto
+
O navegador é livre para quebrar palavras automaticamente nos pontos apropriados de hifenização, seguindo quaisquer regras que ele escolher. Entretanto, oportunidades sugeridas de quebras de linha (veja {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} abaixo) irão sobrepor a seleção automática de pontos de quebra quando presentes.
+
+ +
+

Nota: O comportamento da configuração auto requer que a propriedade idioma seja indicada corretamente para que as regras de hifenização sejam selecionadas. Você deve especificar o idioma utilizando o atributo HTML lang para garantir que a hifenização automática seja aplicada na linguagem de sua escolha.

+
+ +

Oportunidades sugeridas de quebra de linha

+ +

Existem dois caracteres Unicode que podem ser utilizados para especificar manualmente potenciais pontos de quebra de linha no texto:

+ +
+
U+2010 (HYPHEN)
+
O caractere hífen "duro" indica uma oportunidade de quebra de linha visível. Mesmo que não haja quebra de linha naquele ponto, o hífen ainda será renderizado.
+
U+00AD (SHY)
+
Um hífen invisivel, "suave". Este caractere não é renderizado visivelmente; ao invés, ele marca um local onde o browser deve quebrar a palavra se um hífen for necessário. Em HTML você pode usar &shy; para inserir um hífen suave.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplo

+ +

Este exemplo usa três classes, uma para cada configuração possível da propriedade hyphens.

+ +
<ul>
+  <li><code>none</code>: sem hífen; transbordar se necessário
+    <p lang="en" class="none">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>manual</code>: hífen apenas em &amp;hyphen; ou &amp;shy; (se necessário)
+    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>auto</code>: hífen onde o algorítmo decidir (se necessário)
+    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
+  </li>
+</ul>
+
+ +
p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +
+

{{EmbedLiveSample("Example", "100%", "470'")}}

+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoCondiçãoComentário
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
+ +

Compatibilidade dos navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(13.0)}}{{property_prefix("-webkit")}}[1]
+ {{CompatChrome(55.0)}} (unprefixed)		 +

{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("43.0")}}

+ 		{{CompatIE("10.0")}}{{property_prefix("-ms")}}[3]{{CompatOpera(44)}}{{CompatSafari(5.1)}}{{property_prefix("-webkit")}}
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatNo}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for English (en, en-*){{CompatChrome(55.0)}} (unprefixed){{CompatGeckoDesktop("6.0")}}[4]10.0{{CompatOpera(44)}}5.1[5]
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}9.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Latin (la, la-*){{CompatVersionUnknown}}8.0{{CompatNo}}{{CompatOpera(44)}}{{CompatNo}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}8.010.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}31.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}9.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatAndroid("4.0")}}{{property_prefix("-webkit")}}[1]{{CompatChrome(55.0)}} (unprefixed){{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("43.0")}}		{{CompatNo}}{{CompatOperaMobile(44)}}{{CompatSafari(4.2)}}{{property_prefix("-webkit")}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for English (en, en-*){{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed){{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Latin (la, la-*){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatVersionUnknown}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} {{CompatUnknown}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Sem hifenização automática, apenas -webkit-hyphens: none é suportado.

+ +

[2] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Gecko. Veja a nota abaixo para ver a lista completa destas linguagens.

+ +

[3] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Internet Explorer. Veja a nota abaixo para ver a lista completa destas linguagens.

+ +

[4] Usa um dicionário en-US.

+ +

[5] en-GB e en-US usam dicionários diferentes.

+ +

[6] Usa um dicionário Português.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/image/index.html b/files/pt-br/web/css/image/index.html new file mode 100644 index 0000000000..fe9631cb30 --- /dev/null +++ b/files/pt-br/web/css/image/index.html @@ -0,0 +1,157 @@ +--- +title: +slug: Web/CSS/imagem +tags: + - CSS + - CSS imagens + - Layout + - Referencia + - Tipo de data CSS + - Web + - graficos +translation_of: Web/CSS/image +--- +
{{CSSRef}}
+ +

O tipo de data CSS <image> representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um {{cssxref("<url>")}}, e imagens geradas dinamicamente, geradas por {{cssxref("<gradient>")}} ou {{cssxref("element()")}}. Imagens podem ser usadas em inumeras propriedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("cursor")}}, e {{cssxref("list-style-image")}}.

+ +

Tipos de imagens

+ +

CSS pode lidar com os seguintes tipos de imagens:

+ + + +

CCS determina um tamanho concreto do objeto usando (1) suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) é o tamanho padrão, determinado pelo tipo de propriedade em que a imagem é usada:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de objetoTamanho do objeto padrão
{{cssxref("background-image")}}O tamanho da área de posicionamento do fundo do elemento.
{{cssxref("list-style-image")}}O tamanho de um carácter 1em
{{cssxref("border-image")}}O tamanho da área da imagem da borda do elemento
{{cssxref("cursor")}}O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente
{{cssxref("border-image-source")}}?
{{cssxref("mask-image")}}?
{{cssxref("shape-outside")}}?
{{cssxref("mask-border-source")}}?
Substituí o conteúdo, como quando combinando {{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})Um 300px × 150px retângulo
+ +

O tamanho do objeto concreto é calculado usando o seguinte algoritimo:

+ + + +
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.
+ +

Sintaxe

+ +

O tipo de data <image> pode ser representado por qualquer item seguinte:

+ + + +

Exemplos

+ +

Imagens válidas

+ +
url(test.jpg)               /* Uma <url>, enquanto test.jpg é uma imagem real */
+linear-gradient(blue, red)  /* Um <gradient> */
+element(#realid)            /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */
+
+ +

Imagens inválidas

+ +
cervin.jpg        /* Um arquivo imagem deve ser definido usando a função url(). */
+url(report.pdf)   /* Um arquivo apontado pela função url() deve ser uma imagem. */
+element(#fakeid)  /* Um elemento ID deve ser um ID existente na página. */
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName('CSS4 Images', '#typedef-image', '<image>')}}{{Spec2('CSS4 Images')}}Adiciona {{cssxref("element()")}}, {{cssxref("image()")}},  {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}.
{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}{{Spec2('CSS3 Images')}}Definição inicial. Depois disso, não existe definição explicita do tipo de data <image>. Imagens podem ser somente definidas usando a notação funciona url() .
+ +

Compatibilidade do navegador

+ +

 

+ + + +

{{Compat("css.types.image")}}

+ +

 

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/imagem/index.html b/files/pt-br/web/css/imagem/index.html deleted file mode 100644 index fe9631cb30..0000000000 --- a/files/pt-br/web/css/imagem/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: -slug: Web/CSS/imagem -tags: - - CSS - - CSS imagens - - Layout - - Referencia - - Tipo de data CSS - - Web - - graficos -translation_of: Web/CSS/image ---- -
{{CSSRef}}
- -

O tipo de data CSS <image> representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um {{cssxref("<url>")}}, e imagens geradas dinamicamente, geradas por {{cssxref("<gradient>")}} ou {{cssxref("element()")}}. Imagens podem ser usadas em inumeras propriedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("cursor")}}, e {{cssxref("list-style-image")}}.

- -

Tipos de imagens

- -

CSS pode lidar com os seguintes tipos de imagens:

- - - -

CCS determina um tamanho concreto do objeto usando (1) suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) é o tamanho padrão, determinado pelo tipo de propriedade em que a imagem é usada:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipo de objetoTamanho do objeto padrão
{{cssxref("background-image")}}O tamanho da área de posicionamento do fundo do elemento.
{{cssxref("list-style-image")}}O tamanho de um carácter 1em
{{cssxref("border-image")}}O tamanho da área da imagem da borda do elemento
{{cssxref("cursor")}}O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente
{{cssxref("border-image-source")}}?
{{cssxref("mask-image")}}?
{{cssxref("shape-outside")}}?
{{cssxref("mask-border-source")}}?
Substituí o conteúdo, como quando combinando {{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})Um 300px × 150px retângulo
- -

O tamanho do objeto concreto é calculado usando o seguinte algoritimo:

- - - -
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.
- -

Sintaxe

- -

O tipo de data <image> pode ser representado por qualquer item seguinte:

- - - -

Exemplos

- -

Imagens válidas

- -
url(test.jpg)               /* Uma <url>, enquanto test.jpg é uma imagem real */
-linear-gradient(blue, red)  /* Um <gradient> */
-element(#realid)            /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */
-
- -

Imagens inválidas

- -
cervin.jpg        /* Um arquivo imagem deve ser definido usando a função url(). */
-url(report.pdf)   /* Um arquivo apontado pela função url() deve ser uma imagem. */
-element(#fakeid)  /* Um elemento ID deve ser um ID existente na página. */
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{SpecName('CSS4 Images', '#typedef-image', '<image>')}}{{Spec2('CSS4 Images')}}Adiciona {{cssxref("element()")}}, {{cssxref("image()")}},  {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}.
{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}{{Spec2('CSS3 Images')}}Definição inicial. Depois disso, não existe definição explicita do tipo de data <image>. Imagens podem ser somente definidas usando a notação funciona url() .
- -

Compatibilidade do navegador

- -

 

- - - -

{{Compat("css.types.image")}}

- -

 

- -

Veja também

- - diff --git a/files/pt-br/web/css/initial_value/index.html b/files/pt-br/web/css/initial_value/index.html new file mode 100644 index 0000000000..fea27bfe3c --- /dev/null +++ b/files/pt-br/web/css/initial_value/index.html @@ -0,0 +1,30 @@ +--- +title: Valor inicial +slug: Web/CSS/valor_inicial +tags: + - CSS + - Iniciante + - Web + - valor inicial +translation_of: Web/CSS/initial_value +--- +
{{cssref}}
+ +

O Valor inicial de uma propriedade CSS é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.

+ + + +
+

Nota: Você pode especificar explicitamente um valor inicial, utilizando a palavra-chave {{cssxref("initial")}}

+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/layout_mode/index.html b/files/pt-br/web/css/layout_mode/index.html new file mode 100644 index 0000000000..883cdbd4a4 --- /dev/null +++ b/files/pt-br/web/css/layout_mode/index.html @@ -0,0 +1,25 @@ +--- +title: Modelo de layout +slug: Web/CSS/Modelo_layout +translation_of: Web/CSS/Layout_mode +--- +

O modelo de layout CSS, às vezes abreviado por layout, é um algoritimo que determina a posição e tamanho dos boxes baseado em como estes interagem com os boxes filhos e boxe ancestral. Há vários layouts:

+ + + +
+

Note: Not all CSS properties apply to all layout modes. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/mask/index.html b/files/pt-br/web/css/mask/index.html new file mode 100644 index 0000000000..4b7f7f52d5 --- /dev/null +++ b/files/pt-br/web/css/mask/index.html @@ -0,0 +1,150 @@ +--- +title: mask +slug: mask +tags: + - CSS + - Compatibilidade Mobile + - Internet + - Layout + - Referencia + - SVG + - Web + - máscaras +translation_of: Web/CSS/mask +--- +
{{CSSRef}}
+ +

Resumo

+ +

A propriedade máscara no CSS permite aos usuários alterarem a visibilidade de um item parcialmente ou totalmente escondendo o item. Isso é obtido por qualquer mascaramento ou cortes na imagem em pontos específicos.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
/* Palavra-Chave */
+mask: none;
+
+/* Valor das Imagens */
+mask: url(mask.png);                       /* Imagem bitmap usada da máscara */
+mask: url(masks.svg#star);                 /* Elemento dentro do SVG usado como máscara */
+
+/* Valores Combinados */
+mask: url(masks.svg#star) luminance;       /* Elemento dentro do SVG usado como máscara de luminância */
+mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro do SVG usado como máscara com a largura e altura de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Elemento dentro do SVG usado como máscara repedida horizontalmente */
+mask: url(masks.svg#star) stroke-box;      /* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha */
+mask: url(masks.svg#star) exclude;         /* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem */
+
+/* Valores Globais */
+mask: inherit;
+mask: initial;
+mask: unset;
+
+ +

Valores

+ +

Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.

+ +
{{csssyntax}}
+ +

Exemplos

+ +
.target { mask: url(#c1); }
+
+.anothertarget { mask: url(resources.svg#c1); }
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Estende-se a sua utilização para elementos HTML.
+ Estende sua sintaxe, tornando-a uma simplificação para as novas propriedades da mask-* definidos nessa especificação.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Definição inicial.
+ +

Compatibilidade dos Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte Básico (para o SVG){{CompatVersionUnknown}}{{CompatVersionUnknown}} [*]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Aplica-se a elementos HTML{{CompatNo}}{{CompatGeckoDesktop("1.9.1")}} [*]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[*] A partir do Gecko 10.0 {{geckoRelease("10.0")}}, o espaço de cor padrão ao manusear máscaras é sRGB; anteriormente, o padrão (suportado apenas espaço de cor) era linearRGB. Isso muda a aparência de efeitos de máscara, mas traz o Gecko em conformidade com a segunda edição da especificação SVG 1.1.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/media_queries/using_media_queries/index.html b/files/pt-br/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..4b9728eebd --- /dev/null +++ b/files/pt-br/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,639 @@ +--- +title: Usando Media Queries +slug: Web/Guide/CSS/CSS_Media_queries +tags: + - CSS + - Desenho Responsivo + - Design Responsivo +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +

Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor. Media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.

+ +

Sintaxe

+ +

Media queries consistem de um media type e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em media features, que determinam ou verdadeiro ou falso. Os resultados da query são verdadeiros se o media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media query são verdadeiras.

+ +
<!-- CSS media query em um elemento de link -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- CSS media query dentro de um stylesheet -->
+
+<style>
+@media (max-width: 600px)
+{
+  .facet_sidebar
+   {
+    display: none;
+   }
+}
+</style>
+ +

Quando uma media query é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos com media queries ligadas a tag <link> vão fazer download mesmo se suas medias queries retornarem falso (eles não se aplicam, no entanto).

+ +

A menos que você use os operadores not ou only, o media type é opcional e o tipo all será implícito.

+ +

Operadores lógicos

+ +

Você pode compor media queries complexos usando operadores lógicos, incluindo not, and, e only. O operador and é usado para combinar múltiplas media features em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeiro. O operador not é usado para negar uma media query inteira. O operador only é usado para aplicar um estilo apenas se a query inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores not ou only, você tem que especificar um tipo de media explícito.

+ +

Você também pode combinar múltiplas medias queries em uma  lista separadas por vírgulas, se qualquer uma das media queries na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.

+ +

and

+ +

A palavra-chave and é usada para combinar múltiplas media features, bem como combinar media features com media types. Uma media query básica, uma media feature simples com a media type all, pode parecer com isso:

+ +
@media (min-width: 700px) { ... }
+ +

Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador and para deixar todas as media features juntas.

+ +
@media (min-width: 700px) and (orientation: landscape) { ... }
+ +

Agora, a media query acima vai apenas retorna verdadeira se o viewport for 700px, wide ou wider e a tela estiver em landscape. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for media type TV, você pode encadear essas features com a media type usando o operador and.

+ +
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
+ +

Agora, a media query acima vai ser aplicada apenas se a media type for TV, o viewport for 700px wide ou wider, e a tela estiver em paisagem.

+ +

Listas separadas por vírgula

+ +

Listas separadas por vírgulas comportam-se como o operador or quando utilizadas em media queries. Quando utilizamos media queries com uma lista separada por vírgulas, se qualquer media queries retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada media query em um lista separa por vírgulas é tratada como uma query individual, e qualquer operador aplica em uma media query não afeta os outros. Isto significa que media queries separadas por vírgulas podem ter objetivos diferentes de media features, types e states.

+ +

Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:

+ +
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
+ +

Acima, se eu estivesse em um dispositivo screen com um viewport largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como @media all and (min-width: 700px) será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo screen iria falhar no media type handheld na segunda media query. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um viewport de largura de 500px, enquanto a primeira media query falha devido a largura do viewport, a segunda media query teria sucesso e assim o media statement retorna verdadeiro.

+ +

not

+ +

A palavra chave not se aplica em toda a media query e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um min-width: 700px recurso consultado). Um not vai apenas negar a media query que é aplicada, de modo não toda a media query que apresente uma media querie com uma lista separada por vírgulas. A palavra chave not não pode ser usada para negar uma característica individual da query, apenas uma media query inteira. Por exemplo, o not é avaliado por último na query seguinte:

+ +
@media not all and (monochrome) { ... }
+
+ +

Isto significa que a query é avaliada assim:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... em vez disso:

+ +
@media (not all) and (monochrome) { ... }
+ +

Um outro exemplo, veja a media query seguinte:

+ +
@media not screen and (color), print and (color)
+
+ +

É avalida desta forma:

+ +
@media (not (screen and (color))), print and (color)
+ +

only

+ +

A palavra chave only previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:

+ +
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+
+ +

Pseudo-BNF

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Media queries são case insensitive.  Media queries envolvidas em media types desconhecidos serão sempre falsas.

+ +
Nota: Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.
+ +

Características de mídia

+ +

A maioria das media features podem ter prefixo “min-” ou “max-“ para expressar as restrições “maior ou igual” ou “menor ou igual”. Isto evita o uso dos símbolos  “<” e “>” , que entrem em conflito com HTML e XML. Se você usar uma media feature sem especificar um valor, a expressão retorna verdadeiro, se o valor da feature for diferente de zero.

+ +
Nota: Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.
+ +

cor

+ +

Valor: {{cssxref("<color>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: sim

+ +

Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.

+ +
Nota: Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.
+ +

Exemplos

+ +

Aplicar uma folha de estilo a todos dispositivos:

+ +
@media all and (color) { ... }
+
+ +

Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: Sim

+ +

Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.

+ +

Exemplos

+ +

Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:

+ +
@media all and (color-index) { ... }
+
+ +

Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra (“/”). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).

+ +

Exemplo

+ +

A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.

+ +

device-aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra (“/”). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).

+ +

Exemplo

+ +

A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.

+ +

device-height

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

+ +

Exemplo

+ +

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
+
+ +

device-width

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

+ +

Exemplo

+ +

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+ +

grid

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: todas
+ Aceita prefixos min/max: não

+ +

Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.

+ +

Exemplo

+ +

Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Nota:  A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.
+ +

height

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: yes

+ +

A característica height descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).

+ +
Nota: Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features width e height.
+ +

monochrome

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: sim

+ +

Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.

+ +

Exemplos

+ +

Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:

+ +
@media all and (monochrome) { ... }
+
+ +

Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Valor: landscape | portrait
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Indica se o viewport é modo landscape (o visor é mais largo do que mais alto) ou portrait (o visor é mais alto do que mais largo).

+ +

Exemplo

+ +

Para aplicar a folha de estilo apenas em orientação portrait:

+ +
@media all and (orientation: portrait) { ... }
+ +
Nota: Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.
+ +

resolution

+ +

Valor: {{cssxref("<resolution>")}}
+ Mídia: {{cssxref("Media/Bitmap", "bitmap")}}
+ Aceita prefixos min/max: sim

+ +

Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).

+ +

Exemplos

+ +

Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):

+ +
@media screen and (min-resolution: 2dppx) { ... }
+ +

scan

+ +

Valor: progressive | interlace
+ Mídia: {{cssxref("Media/TV")}}
+ Aceita prefixos min/max: não

+ +

Descreve o processo de digitalização de dispositivos saída de televisão.

+ +

Exemplo

+ +

Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

A media feature width descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).

+ +

Nota:
+ Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em media queries usando media features width e height.

+ +

Exemplos

+ +

Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essa query:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

Essa media query especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

Essa query especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Especificação da Mozilla para mídias características

+ +

Mozilla oferece várias media features para específicos Gecko . Algumas dessas podem ser sugeridas como media features oficiais.

+ +

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max:no

+ +

Se o usuário tenha configurado seu dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência padrão blue, ou não está num Mac OS X, o valor é 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se o usuário está usando Maemo com o tema original, o valor é 1; Se está usando o mais novo tema Fremantle, o valor é 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

+ +

Valor: {{cssxref("<number>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: sim

+ +

Dar o número de pixels do dispositivo por pixels do CSS.

+ +
+

Não use este recurso.

+ +

Em vez disso, use o recurso resolution com a unidade dppx.
+
+ -moz-device-pixel-ratio pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e -webkit-device-pixel-ratio com navegadores baseados no WebKit que não suportam dppx.

+ +

Exemplo:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores mais antigos do Firefox (antes do Firefox 16) */
+       (min-resolution: 2dppx),             /* Forma padrão */
+       (min-resolution: 192dpi)             /* dppx fallback */
+ +

Veja este artigo CSSWG para ccompatibilidade de boas práticas em relação a resolution e dppx.

+
+ +
Nota: Esta media feature é também implementada pelo Webkit e pelo IE 11 para Windows Phone 8.1como -webkit-device-pixel-ratio. Os prefixos min e max implementados pelo Gecko são nomeados min--moz-device-pixel-ratio e max--moz-device-pixel-ratio; mas os mesmos prefixos implementados pelo Webkit são chamados -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio.
+ +

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+ +

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:

+ + + +

Isto é fornecido pelas skins das aplicações e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

+ +

Exemplo

+ +

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

+ +

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

+ +

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+ +

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

+ + + +

Isto é previsto para skins de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.

+ +

Compatibilidade no navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
Grade{{ CompatUnknown() }}{{ CompatNo() }} (grid media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Resolução{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;
+ {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Scan{{ CompatUnknown() }}{{ CompatNo() }} (tv media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ + diff --git a/files/pt-br/web/css/modelo_layout/index.html b/files/pt-br/web/css/modelo_layout/index.html deleted file mode 100644 index 883cdbd4a4..0000000000 --- a/files/pt-br/web/css/modelo_layout/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Modelo de layout -slug: Web/CSS/Modelo_layout -translation_of: Web/CSS/Layout_mode ---- -

O modelo de layout CSS, às vezes abreviado por layout, é um algoritimo que determina a posição e tamanho dos boxes baseado em como estes interagem com os boxes filhos e boxe ancestral. Há vários layouts:

- - - -
-

Note: Not all CSS properties apply to all layout modes. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

-
- -

Veja Também

- - diff --git a/files/pt-br/web/css/modelo_visual/index.html b/files/pt-br/web/css/modelo_visual/index.html deleted file mode 100644 index a37a0cc7b0..0000000000 --- a/files/pt-br/web/css/modelo_visual/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Modelo de formatação visual -slug: Web/CSS/Modelo_Visual -tags: - - CSS - - CSS conceitos basicos - - Intermediário -translation_of: Web/CSS/Visual_formatting_model ---- -

{{CSSRef}}

- -

The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS.

- -

The visual formatting model transforms each element of the document and generates zero, one, or several boxes that conform to the CSS box model. The layout of each box is defined by:

- - - -

The model renders a box, in relation to the edge of its containing block. Usually, a box establishes the containing block for its descendants. However, a box is not constrained by its containing block; when a box's layout goes outside the containing block, it is said to overflow.

- -

 Gerando um Box

- -

Box generation is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect how the visual formatting is done. The type of the box generated depends on the value of the {{ cssxref("display") }} CSS property.

- -

Block-level elements and block boxes

- -

An element is said to be block-level when the calculated value of its {{ cssxref("display") }} CSS property is: block, list-item, or table. A block-level element is visually formatted as a block (e.g., paragraph), intended to be vertically stacked.

- -

Each block-level box participates in a block formatting context. Each block-level element generates at least one block-level box, called the principal block-level box. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.

- -

The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the positioning scheme.

- -

venn_blocks.pngA block-level box may also be a block container box. A block container box is a box that contains only other block-level boxes, or creates an inline formatting context, thus containing only inline boxes.

- -

It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.

- -

Block-level boxes that also are block container boxes are called block boxes.

- -

Anonymous block boxes

- -

In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.

- -

Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.

- -

Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.

- -

Exemplo

- -

If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have display:block :

- -
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
- -

Two anonymous block boxes are created: one for the text before the paragraph (Some inline text), and another for the text after it (followed by more inline text). This builds the following block structure:

- -

anonymous_block-level_boxes.png

- -

Leading to:

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the initial value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.

- -

Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.

- -

If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.

- -

Exemplo

- -

If we take the following HTML code, with {{ HTMLElement("p") }} have display:inline and {{ HTMLElement("span") }} have display:block :

- -
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
- -

Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:

- -

- -

Which leads to:

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

Inline-level elements and inline boxes

- -

An element is said to be inline-level when the calculated value of its {{ cssxref("display") }} CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.

- -

venn_inlines.png

- -
-

This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2

-
- -

Inline-level elements generate inline-level boxes that are defined as boxes participating to an inline formatting context. Inline boxes are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with display:inline. Inline-level boxes, whose contents do not participate in an inline formatting context, are called atomic inline-level boxes. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of inline-block or inline-table, are never split into several boxes, as is possible with inline boxes.

- -
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
- -
Atomic inline boxes cannot be split into several lines in an inline formatting context. -
-
<style>
-  span {
-    display:inline; /* default value*/
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>can be split in several
-   lines as it</span> is an inline box.
-</div>
-
- -

which leads to:

- -
The text in the span can be split into several lines as it is an inline box.
- -
<style>
-  span {
-    display:inline-block;
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>cannot be split in several
-   lines as it</span> is an inline-block box.
-</div>
-
- -

which leads to:

- -
The text in the span cannot be split into several lines as it is an inline-block box.
-
-
- -

Anonymous inline boxes

- -

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to initial for all others.

- -

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.

- -
Example TBD
- -

Outros tipos de boxes

- -

Line boxes

- -

Line boxes are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

- -

These boxes are technical, and Web authors do not usually have to bother with them.

- -

Run-in boxes

- -

Run-in boxes, defined using display:run-in, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

- -
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
- -

Model-induced boxes

- -

Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

- - - -

Positioning schemes

- -

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

- - - -

Normal flow

- -

In the normal flow, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value static or relative, and if the CSS {{ cssxref("float") }} is set to the value none.

- -

Exemplo

- -
When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:
-
-[image]
-
-When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:
-
-[image]
- -

There are two sub-cases of the normal flow: static positioning and relative positioning:

- - - -

Floats

- -

In the float positioning scheme, specific boxes (called floating boxes or simply floats) are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.

- -

The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than none and {{ cssxref("position") }} to static or relative. If {{ cssxref("float") }} is set to left, the float is positioned at the beginning of the line box. If set to right, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

- -

[image]

- -

Absolute positioning

- -

In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.

- -

An element is absolutely positioned if the {{ cssxref("position") }} is set to absolute or fixed.

- -

With a fixed positioned element, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.

- -

Veja Também

- - diff --git a/files/pt-br/web/css/overflow-wrap/index.html b/files/pt-br/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..c23f4b966d --- /dev/null +++ b/files/pt-br/web/css/overflow-wrap/index.html @@ -0,0 +1,117 @@ +--- +title: word-wrap +slug: Web/CSS/word-wrap +translation_of: Web/CSS/overflow-wrap +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

Resumo

+ +

A propriedade CSS word-wrap é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.

+ +
Nota: Originalmente uma extensão proprietária da Microsoft (não prefixada), a propriedade word-wrap foi renomeada para overflow-wrap no rascunho atual do texto de especificações do CSS3. Compilações estáveis do Google Chrome e do Opera têm suporte a nova sintaxe.
+ +

{{cssinfo}}

+ +

Sintaxe

+ +
word-wrap:  normal | break-word
+ +

Valores

+ +
+
normal
+
Indica que as linhas só podem quebrar em pontos de quebra normais de palavras.
+
break-word
+
Indica que as palavras normalmente inquebráveis podem ser quebrados em pontos arbitrários se não houver pontos de quebra de outra forma aceitáveis na linha.
+
+ +

Exemplos

+ +
p { width: 13em; background: gold; }
+ +

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

+ +
p { width: 13em; background: gold; word-wrap: break-word; }
+ +

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
CSS Text Level 3{{ Spec2('CSS3 Text') }} 
+ +

Compatibilidade entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico{{ CompatGeckoDesktop("1.9.1") }}1.05.510.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatGeckoMobile("1.9.1") }}1.0{{ CompatUnknown() }}{{ CompatUnknown() }}1.0
+
+ + + +

Veja também

+ + diff --git a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html b/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html deleted file mode 100644 index 273c7765e3..0000000000 --- a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 'Privacidade e o seletor :visited' -slug: 'Web/CSS/Privacidade_e_o_seletor_:visited' -tags: - - CSS - - Guía - - Pseudo-classe - - Referencia - - Segurança - - Seletores -translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' ---- -
{{cssref}}
- -

Antes de 2010, o seletor CSS {{ cssxref(":visited") }} permitia que websites descobrissem o histórico de navegação dos usuários e quais sites estes haviam visitado. Isto foi feito por meio do {{domxref("window.getComputedStyle")}} e outras tecnicas. Este processo era fácil de ser feito, e tornou possível não somente determinar onde os usuários estiveram na internet, mas também poderia ser usado para descobrir um monte de informação sobre a identidade destes.

- -

Para contornar este problema, {{ Gecko("2") }} implementou atualizações de privacidade para limitar a quantidade de informações que poderiam ser obtidas através dos links visitados. Outros navegadores também fizeram mudanças similares.

- -

Pequenas mentiras brancas

- -

Para preservar a privacidade dos usuários, Firefox e outros navegadores irão mentir para aplicações webs sob certas circustâncias:

- - - - - -

Você pode estilizar links visitados, porém existem limites de quais estilos você pode usar. Somente os seguintes estilos podem ser aplicados para links visitados:

- - - -

Em adição, mesmo para os estilos acima, você não poderá alterar a transparência entre links visitados e não visitados, ou de outra maneira você seria capaz de usar rgba(), hsla(), ou a palavra chave transparent.

- -

Aqui está um exemplo de como estilizar com as restrições acima mencionadas:

- -
:link {
-  outline: 1px dotted blue;
-  background-color: white;
-  /* O valor padrão de background-color é `transparent`. Você precisa
-     especificar um valor diferente, caso contrário as mudanças
-     feitas em :visited não se aplicam. */
-}
-
-:visited {
-  outline-color: orange;    /* Links visitados tem contornos laranja */
-  background-color: green;  /* Links visitados tem um fundo verde */
-  color: yellow;            /* Links visitados tem texto amarelo */
-}
-
- -

Impacto nos desenvolvedores web

- -

No geral, essas restrições estas restrições não deveriam afetar desenvolvedores web tão significamente. Eles poderiam, como sempre, They may, no entanto, requerer essas seguintes mudanças nos sites existentes:

- - - -

Veja também

- - diff --git a/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html new file mode 100644 index 0000000000..273c7765e3 --- /dev/null +++ b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html @@ -0,0 +1,76 @@ +--- +title: 'Privacidade e o seletor :visited' +slug: 'Web/CSS/Privacidade_e_o_seletor_:visited' +tags: + - CSS + - Guía + - Pseudo-classe + - Referencia + - Segurança + - Seletores +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +
{{cssref}}
+ +

Antes de 2010, o seletor CSS {{ cssxref(":visited") }} permitia que websites descobrissem o histórico de navegação dos usuários e quais sites estes haviam visitado. Isto foi feito por meio do {{domxref("window.getComputedStyle")}} e outras tecnicas. Este processo era fácil de ser feito, e tornou possível não somente determinar onde os usuários estiveram na internet, mas também poderia ser usado para descobrir um monte de informação sobre a identidade destes.

+ +

Para contornar este problema, {{ Gecko("2") }} implementou atualizações de privacidade para limitar a quantidade de informações que poderiam ser obtidas através dos links visitados. Outros navegadores também fizeram mudanças similares.

+ +

Pequenas mentiras brancas

+ +

Para preservar a privacidade dos usuários, Firefox e outros navegadores irão mentir para aplicações webs sob certas circustâncias:

+ + + + + +

Você pode estilizar links visitados, porém existem limites de quais estilos você pode usar. Somente os seguintes estilos podem ser aplicados para links visitados:

+ + + +

Em adição, mesmo para os estilos acima, você não poderá alterar a transparência entre links visitados e não visitados, ou de outra maneira você seria capaz de usar rgba(), hsla(), ou a palavra chave transparent.

+ +

Aqui está um exemplo de como estilizar com as restrições acima mencionadas:

+ +
:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* O valor padrão de background-color é `transparent`. Você precisa
+     especificar um valor diferente, caso contrário as mudanças
+     feitas em :visited não se aplicam. */
+}
+
+:visited {
+  outline-color: orange;    /* Links visitados tem contornos laranja */
+  background-color: green;  /* Links visitados tem um fundo verde */
+  color: yellow;            /* Links visitados tem texto amarelo */
+}
+
+ +

Impacto nos desenvolvedores web

+ +

No geral, essas restrições estas restrições não deveriam afetar desenvolvedores web tão significamente. Eles poderiam, como sempre, They may, no entanto, requerer essas seguintes mudanças nos sites existentes:

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/css/pseudo-elementos/index.html b/files/pt-br/web/css/pseudo-elementos/index.html deleted file mode 100644 index a457c9ac9a..0000000000 --- a/files/pt-br/web/css/pseudo-elementos/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Pseudo-elementos -slug: Web/CSS/Pseudo-elementos -tags: - - CSS - - Principiantes - - Pseudo-elementos - - Referencia - - Seletores -translation_of: Web/CSS/Pseudo-elements ---- -
{{ CSSRef() }}
- -
Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado. Por exemplo, o pseudo-elemento {{CSSxRef("::first-line")}} aplica o estilo apenas na primeira linha de um parágrafo.
- -
- -
/* A primeira linha de todo elemento <p>. */
-p::first-line {
-  color: blue;
-  text-transform: uppercase;
-}
- -
-

Observação: Diferentemente dos pseudo-elementos, {{cssxref("pseudo-classes")}} podem ser utilizadas para estilizar um elemento baseado em seu estado.

-
- -

Sintaxe

- -
seletor::pseudo-elemento {
-  propriedade: valor;
-}
-
- -

Você pode utilizar apenas um pseudo-elemento em um seletor. Ele deve aparecer depois da declaração de um elemento simples.

- -

Observação: Como regra, os dois pontos devem ser usados duas vezes  (::)  ao invés de uma única vez  (:). Isso distingue pseudo-classes de pseudo-elementos. Apesar disso, devido a essa distinção não estar presente em versões mais antigas da especificação da W3C, a maioria dos navegadores suportam ambas as sintaxes para os pseudo-elementos originais.

- -

Índice de pseudo-elementos comuns

- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersão mais baixaSuporte de
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- -

Ver também

- - diff --git a/files/pt-br/web/css/pseudo-elements/index.html b/files/pt-br/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..a457c9ac9a --- /dev/null +++ b/files/pt-br/web/css/pseudo-elements/index.html @@ -0,0 +1,104 @@ +--- +title: Pseudo-elementos +slug: Web/CSS/Pseudo-elementos +tags: + - CSS + - Principiantes + - Pseudo-elementos + - Referencia + - Seletores +translation_of: Web/CSS/Pseudo-elements +--- +
{{ CSSRef() }}
+ +
Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado. Por exemplo, o pseudo-elemento {{CSSxRef("::first-line")}} aplica o estilo apenas na primeira linha de um parágrafo.
+ +
+ +
/* A primeira linha de todo elemento <p>. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+ +
+

Observação: Diferentemente dos pseudo-elementos, {{cssxref("pseudo-classes")}} podem ser utilizadas para estilizar um elemento baseado em seu estado.

+
+ +

Sintaxe

+ +
seletor::pseudo-elemento {
+  propriedade: valor;
+}
+
+ +

Você pode utilizar apenas um pseudo-elemento em um seletor. Ele deve aparecer depois da declaração de um elemento simples.

+ +

Observação: Como regra, os dois pontos devem ser usados duas vezes  (::)  ao invés de uma única vez  (:). Isso distingue pseudo-classes de pseudo-elementos. Apesar disso, devido a essa distinção não estar presente em versões mais antigas da especificação da W3C, a maioria dos navegadores suportam ambas as sintaxes para os pseudo-elementos originais.

+ +

Índice de pseudo-elementos comuns

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersão mais baixaSuporte de
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

Ver também

+ + diff --git a/files/pt-br/web/css/reference/index.html b/files/pt-br/web/css/reference/index.html new file mode 100644 index 0000000000..1afbf4890e --- /dev/null +++ b/files/pt-br/web/css/reference/index.html @@ -0,0 +1,75 @@ +--- +title: Referência de CSS +slug: Web/CSS/CSS_Reference +translation_of: Web/CSS/Reference +--- +{{CSSRef}} + +

Use esta referência de CSS para navegar por um índice alfabético das propriedades padrão do CSS, pseudo-classes, pseudo-elementos, tipos de dados e @-rules.

+ +

Esta referência lista não somente as propriedades do CSS1 e CSS2.1, mas também referências para qualquer propriedade, conceito padronizado ou estabilizado do CSS3.

+ +

Veja também Extensões CSS Mozilla para propriedades específicas do Gecko prefixadas com -moz e Extensões CSS do WebKit para propriedades específicas do WebKit. Veja Visão geral de propriedades CSS prefixadas por distribuidor por Peter Beverloo para todas as propriedades prefixadas.

+ +

{{ CSS_Ref() }}

+ +

Seletores

+ + + +

Miscelânea

+ + + +

Conceitos

+ + diff --git a/files/pt-br/web/css/replaced_element/index.html b/files/pt-br/web/css/replaced_element/index.html new file mode 100644 index 0000000000..22ba1b8ad0 --- /dev/null +++ b/files/pt-br/web/css/replaced_element/index.html @@ -0,0 +1,40 @@ +--- +title: Elemento substituído +slug: Web/CSS/Elemento_substituido +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef()}}
+ +

Sumario

+ +

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are:

+ + + +

Some elements are treated as replaced elements only in specific cases:

+ + + +

The only form control that is also a replaced element is {{HTMLElement("input")}} of the image type. All other form controls are non-replaced elements.

+ +

Objects inserted using the CSS {{cssxref("content")}} properties are anonymous replaced elements.

+ +

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

+ +

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like {{cssxref("vertical-align")}}.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/resolved_value/index.html b/files/pt-br/web/css/resolved_value/index.html new file mode 100644 index 0000000000..a045149bc7 --- /dev/null +++ b/files/pt-br/web/css/resolved_value/index.html @@ -0,0 +1,40 @@ +--- +title: Valor Resolvido +slug: Web/CSS/Valor_resolvido +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

The resolved value of a CSS property is the value returned by {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. For most properties, it is the {{cssxref("computed_value", "computed value") }}, but for a few legacy properties (including {{cssxref("width")}} and {{cssxref("height")}}), it is instead the {{cssxref("used_value", "used value")}}. See the specification link below for more per-property details.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Definicação inicial
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/seletor_de_atributos/index.html b/files/pt-br/web/css/seletor_de_atributos/index.html deleted file mode 100644 index 88881a61ea..0000000000 --- a/files/pt-br/web/css/seletor_de_atributos/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Seletor de atributos -slug: Web/CSS/Seletor_de_atributos -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

O seletor de atributos combina elementos baseado no valor de um atributo dado.

- -
/* <a> elementos com um atributo de título  */
-a[title] {
-  color: purple;
-}
-
-/* <a> elementos combinando com um href "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* <a> elementos com um href contendo "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* <a> elementos com href terminando em ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
- -
-
[attr]
-
Representa um elemento com atributo de nome attr.
-
[attr=value]
-
Representa um elemento com um atributo de nome attr, o qual o valor é  exatamente  value.
-
[attr~=value]
-
Representa um elemento com um atributo de nome attr, o qual value é  uma lista de palavras separadas por espaços, e uma dessas é  exatamente  value.
-
[attr|=value]
-
Representa um elemento com um atributo de nome attr  o qual o valor pode ser exatamente value ou pode começar com value imediatamente seguido por hífen - (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.
-
[attr^=value]
-
Representa um elemento com um atributo com nome attr que tem um valor prefixado (precedido) por value.
-
[attr$=value]
-
Representa um elemento com um atributo de nome attr que  tem como sufixo (seguido) por value.
-
[attr*=value]
-
Representa um elemento com um atributo de nome attr o qual valor contém ao menos uma ocorrência de value contido na string.
-
[attr operator value i]
-
Adiciona um i (ou I) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).
-
- -

Exemplos

- - - -

CSS

- -
a {
-  color: blue;
-}
-
-/* Links internos, começando com "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Links com "example" em qualquer lugar da URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Links com "insensitive" em qualquer lugar da URL,
-   independentemente da capitalização */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Links com final ".org" */
-a[href$=".org"] {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li><a href="#internal">Internal link</a></li>
-  <li><a href="http://example.com">Example link</a></li>
-  <li><a href="#InSensitive">Insensitive internal link</a></li>
-  <li><a href="http://example.org">Example org link</a></li>
-</ul>
- -

Resultado

- -

{{EmbedLiveSample('Links')}}

- -

Languages

- -

CSS

- -
/* Todas divs com um atributo `lang` em negrito. */
-div[lang] { font-weight: bold; }
-/* Todas divs com US English em azul (blue). */
-div[lang~="en-us"] { color: blue; }
-/* Todas divs onde Portuguese esta em verde (green). */
-div[lang="pt"] { color: green; }
-/* Todas divs onde Chinese esta em vermelho (red), Simplificado para (zh-CN) ou tradicional (zh-TW). */
-div[lang|="zh"] { color: red; }
-/* Todas divs com Traditional Chinese `data-lang` que é purple. */
-/* Nota: Você também poderia usar atributos separados por hífen com aspas duplas */
-div[data-lang="zh-TW"] { color: purple; }
-
- -

 

- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">?世界您好！</div>
- -

Resultado

- -

{{EmbedLiveSample('Languages')}}

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Adiciona um modificador para a seleção do valor do atributo ASCII 
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definição Inicial
- -

Browser compatibilidade

- - - -

{{Compat("css.selectors.attribute")}}

diff --git a/files/pt-br/web/css/seletor_universal/index.html b/files/pt-br/web/css/seletor_universal/index.html deleted file mode 100644 index 15e64a08ca..0000000000 --- a/files/pt-br/web/css/seletor_universal/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Seletor universal -slug: Web/CSS/Seletor_universal -tags: - - CSS - - Referências - - Seletores -translation_of: Web/CSS/Universal_selectors ---- -
{{CSSRef}}
- -

O seletor universal do CSS (*) aplica estilos a elementos de qualquer tipo.

- -
/* Seleciona todos os elementos */
-* {
-  color: green;
-}
- -

A partir do CSS3, o asterisco pode ser combinado com {{cssxref("CSS_Namespaces", "namespaces")}}:

- - - -

Sintaxe

- -
* { propriedades de estilo }
- -

O asterisco é opcional para seletores simples. Por exemplo, *.atencao e .atencao são equivalentes.

- -

Exemplos

- -

CSS

- -
* [lang^=pt] {
-  color: green;
-}
-
-*.atencao {
-  color: red;
-}
-
-*#conteudoprincipal {
-  border: 1px solid blue;
-}
-
-.flutuando {
-  float: left
-}
-
-/* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando */
-.flutuando + * {
-  clear: left;
-}
-
- -

HTML

- -
<p class="atencao">
-  <span lang="pt-br">Um span verde</span> em um parágrafo vermelho.
-</p>
-<p id="conteudoprincipal" lang="pt-pt">
-  <span class="atencao">Um span vermelho</span> em um parágrafo verde.
-</p>
- -

Resultado

- -

{{EmbedLiveSample('Exemplos')}}

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}}{{Spec2('CSS4 Selectors')}}Sem mudanças
{{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}}{{Spec2('CSS3 Selectors')}}Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}}{{Spec2('CSS2.1')}}Definição inicial
- -

Compatibilidade dos Browsers

- - - -

{{Compat("css.selectors.universal")}}

diff --git a/files/pt-br/web/css/seletores_css/index.html b/files/pt-br/web/css/seletores_css/index.html deleted file mode 100644 index 644d9d87e9..0000000000 --- a/files/pt-br/web/css/seletores_css/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Seletores CSS -slug: Web/CSS/Seletores_CSS -tags: - - CSS - - Referência(2) - - Seletores - - Seletores CSS -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef}}
- -

Os Seletores definem quais elementos um conjunto de regras CSS se aplica.

- -

Seletores Básicos

- -
-
Seletor por tag
-
Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
- Sintaxe: nome-da-tag
- Exemplo: input corresponderá a qualquer elemento {{HTMLElement('input')}}.
-
Seletor por classe
-
Este seletor básico escolhe elementos baseados no valor de seu atributo classe. Sintaxe: .nome-da-classe
- Examplo: .index irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).
-
Seletor por ID
-
Este seletor básico escolhe nós baseados no valor do atributo id. Deve existir apenas um elemento com o mesmo ID no mesmo documento.
- Sintaxe: #nome-do-id
- Exemplo: #toc irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).
-
Seletores universais
-
Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.
- Sintaxe: * ns|* *|*
- Exemplo: * irá corresponder a todos os elementos do documento.
-
Seletores por atributo
-
Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
- Sintaxe: [atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]
- Exemplo: [autoplay] irá corresponder a todos os elementos que possuirem o atributo autoplay (para qualquer valor).
-
- -

Combinadores

- -
-
Seletores de irmãos adjacentes
-
O combinador + seleciona os nós que seguem imediatamente o elemento especificado anteriormente.
- Sintaxe: A + B
- Exemplo: ul + li irá corresponder a qualquer elemento {{HTMLElement('li')}} que segue imediatamente após um elemento {{HTMLElement('ul')}}.
-
Seletores gerais de irmãos
-
O combinador ~ seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.
- Sintaxe: A ~ B
- Exemplo: p ~ span irá corresponder a todo elemento {{HTMLElement('span')}} que seguir um elemento {{HTMLElement('p')}} dentro de um mesmo elemento pai.
-
Seletor de filhos
-
O combinador > selecina nós que são filhos diretos do elemento especificado anteriormente.
- Sintaxe: A > B
- Exemplo: ul > li irá corresponder a todo elemento {{HTMLElement('li')}} que estiver diretamente dentro de um elemento {{HTMLElement('ul')}} especificado.
-
Seletor de descendentes
-
O combinador   seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).
- Sintaxe: A B
- Exemplo: div span irá corresponder a todo e qualquer elemento {{HTMLElement('span')}} que estiver dentro do elemento {{HTMLElement('div')}}.
-
- -

Pseudo-classes

- -

Pseudo-classes permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.

- -

Pseudo-elementos

- -

Pseudo-elementos são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definição inicial
- -

Compatibilidade de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
diff --git a/files/pt-br/web/css/sintaxe/index.html b/files/pt-br/web/css/sintaxe/index.html deleted file mode 100644 index 4d6ff0bf1c..0000000000 --- a/files/pt-br/web/css/sintaxe/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Sintaxe -slug: Web/CSS/sintaxe -translation_of: Web/CSS/Syntax ---- -

O Objetivo básico da linguagem de folhas de estilo em cascata (CSS) é permitir que um motor do navegador pinte elementos na página com características específicas como cores, posições, ou decorações. A sintaxe CSS reflete estes objetivos e seus blocos de contrução básicos são:

- - - -

Declarações do CSS

- -

A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de declaração, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-lo com o estilo correto.

- -

Tanto as propriedades como os valores são case-sensitive no CSS. Os pares se separam por dois pontos, ':' (U+003A COLON), e espaços em branco antes, entre e depois de propriedades e valores, porém os espaços dentro da declaração são ignorados.

- -

css syntax - declaration.png

- -

Existem mais de 100 propriedades diferentes no CSS e um número quase infinito de diferentes valores. Nem todos os pares de propriedades e valores são permitidos em cada propriedade define o que são valores válidos. Quando um valor não é válido para uma determinada propriedade, a declaração é considerada inválida e é totalmente ignorada pelo motor do CSS.

- -

Blocos de declaração CSS

- -

Declarações são agrupadas em blocos, que estão delimitados na estrutura com uma chave de abertura, '{' (U+007B LEFT CURLY BRACKET), e fechadas com outra, '}' (U+007D RIGHT CURLY BRACKET). Os blocos as vezes podem estar aninhados, a abertura e fechamento de chaves no bloco CSS deve ser realizada.

- -

css syntax - block.png

- -

Esses blocos são chamados de blocos de declaração e as declarações dentro deles são separadas por, ';' (U+003B SEMICOLON). Um bloco de declaração pode não conter nenhuma declaração. Espaços em branco em volta das declarações não são consideradas. Não é necessário que a última declaração possua ponto e vírgula, apesar de ser considerada uma boa prática pois previne o esquecimento de acrescê-la quando for necessário aumentar o bloco.

- -

css syntax - declarations block.png

- -
O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML style.
- -

Regras CSS

- -

Se as folhas de estilo pudessem apenas aplicar uma declaração para cada elemento de uma página da web, eles seriam bem limitados. O principal objetivo é aplicar diferentes declarações a diferentes partes do documento.

- -

O CSS associa as condições com os blocos de declaração. Cada bloco (válido) é precedido por um ou mais seletores, separados por vírgula, que são condições selecionando alguns elementos da página. O grupo de seletores é chamado de regra.css syntax - ruleset.png

- -

Um elemento pode ser modificado por diversos seletores, e por isso por diversas regras que potencialmente podem conter diversas propriedades, com diferentes valores, o CSS padrão define aquele que possui a precedência e que será aplicado: esse é o tal algoritmo em cascata.

- -
É importante perceber que quando uma regra é caracterizada por um grupo de seletores que são algum tipo de atalho com cada um sendo um simples seletor isso não se aplica a validade da regra por si só.
-
-Isso leva a uma importante consequência: se apenas um dos seletores for inválido, como usar uma pseudo-classe ou pseudo-elemento desconhecido, todo o seletor é inválido e por isso toda a regra é ignorada (invalidada também).
- -

CSS statements

- -

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

- -

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

- -

css syntax - statements Venn diag.png

- -

There are different kinds of statements:

- - - -

Any statement which isn't a rule or an at-rule is invalid and ignored.

- -

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not support by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

- -

See also

- - diff --git a/files/pt-br/web/css/sintexe_valor/index.html b/files/pt-br/web/css/sintexe_valor/index.html deleted file mode 100644 index d14bcaecdf..0000000000 --- a/files/pt-br/web/css/sintexe_valor/index.html +++ /dev/null @@ -1,436 +0,0 @@ ---- -title: Sintexe do valor -slug: Web/CSS/Sintexe_valor -tags: - - CSS - - Guía - - Iniciante - - Web -translation_of: Web/CSS/Value_definition_syntax ---- -
{{CSSRef}}
- -

CSS value definition syntax, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).

- -

The definition syntax describes which values are allowed and the interactions between them. A component can be a keyword, some characters considered as a literal, or a value of a given CSS data type or of another CSS property.

- -

Tipos de componente

- -

Keywords

- -

Generic keywords

- -

A keyword with a predefined meaning appears literally, without quotation marks. For example: auto, smaller or ease-in.

- -

The specific case of inherit, initial and unset

- -

All CSS properties accept the keywords inherit, initial and unset, that are defined throughout CSS. They are not shown in the value definition, and are implicitly defined.

- -

Literals

- -

In CSS, a few characters can appear on their own, like the slash ('/') or the comma (','), and are used in a property definition to separate its parts. The comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. Typically, the slash is used in shorthand properties; to separate component that are of the same type, but belong to different properties.

- -

Both symbols appear literally in a value definition.

- -

Data types

- -

Basic data types

- -

Some kind of data are used throughout CSS, and are defined once for all values in the specification. Called basic data types, they are represented with their name surrounded by the symbol '<' and '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

- -

Non-terminal data types

- -

Less common data types, called non-terminal data types, are also surrounded  by '<' and '>'.

- -

Non-terminal data types are of two kinds:

- - - -

Component value combinators

- -

Brackets

- -

Brackets enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to group components to bypass the precedence rules.

- -
bold [ thin && <length> ]
- -

This example matches the following values:

- - - -

But not:

- - - -

Juxtaposition

- -

Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. All juxtaposed components are mandatory and should appear in the exact order.

- -
bold <length> , thin
-
- -

This example matches the following values:

- - - -

But not:

- - - -

Double ampersand

- -

Separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.

- -
bold && <length>
-
- -

This example matches the following values:

- - - -

But not:

- - - -
Note: juxtaposition has precedence over the double ampersand, meaning that bold thin && <length> is equivalent to [ bold thin ] && <length>. It describes bold thin <length> or <length> bold thin but not bold <length> thin.
- -

Double bar

- -

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

- -
<'border-width'> || <'border-style'> || <'border-color'>
-
- -

This example matches the following values:

- - - -

But not:

- - - -
Note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && <length> ]. It describes bold, thin <length>, bold thin <length>, or thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component.
- -

Single bar

- -

Separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. This is typically used to separate a list of possible keywords.

- -
<percentage> | <length> | left | center | right | top | bottom
- -

This example matches the following values:

- - - -

But not:

- - - -
-

Note: the double bar has precedence over the single bar, meaning that bold | thin || <length> is equivalent to bold | [ thin || <length> ]. It describes bold, thin, <length>, <length> thin, or thin <length> but not bold <length> as only one entity from each side of the | combinator can be present.

-
- -

Component value multipliers

- -

A multiplier is a sign that indicate how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

- -

Note that multipliers cannot be added and have all precedence over combinators.

- -

Asterisk (*)

- -

The asterisk multiplier indicates that the entity may appear zero, one or several times.

- -
bold smaller*
- -

This example matches the following values:

- - - -

But not:

- - - -

Plus (+)

- -

The plus multiplier indicates that the entity may appear one or several times.

- -
bold smaller+
- -

This example matches the following values:

- - - -

But not:

- - - -

Question mark (?)

- -

The question mark multiplier indicates that the entity is optional, and must appear zero or one time.

- -
bold smaller?
- -

This example matches the following values:

- - - -

But not:

- - - -

Curly braces ({ })

- -

The curly braces multiplier, enclosing two integers separated by a comma, A and B, indicates that the entity must appear at least A times and at most B times.

- -
bold smaller{1,3}
- -

This example matches the following values:

- - - -

But not:

- - - -

Hash mark (#)

- -

The hash mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

- -
bold smaller#
- -

This example matches the following values:

- - - -

But not:

- - - -

Exclamation point (!)

- -

The exclamation point multiplier after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

- -
[ bold? smaller? ]!
-
- -

This example matches the following values:

- - - -

But not:

- - - -

Summary

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SignNameDescriptionExample
Combinators
 JuxtapositionComponents are mandatory and should appear in that ordersolid <length>
&&Double ampersandComponents are mandatory but may appear in any order<length> && <string>
||Double barAt least one of the components must be present, and they may appear in any order.<'border-image-outset'> || <'border-image-slice'>
|Single barExactly one of the components must be presentsmaller | small | normal | big | bigger
[ ]BracketsGroup components to bypass precedence rulesbold [ thin && <length> ]
Multipliers
 No multiplierExactly 1 timessolid
*Asterisk0 or more timesbold smaller*
+Plus sign1 or more timesbold smaller+
?Question mark0 or 1 time (that is optional)bold smaller?
{A,B}Curly bracesAt least A times, at most B timesbold smaller{1,3}
#Hash mark1 or more times, but each occurrence separated by a comma (',')bold smaller#
!Exclamation pointGroup must produce at least 1 value[ bold? smaller? ]!
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2("CSS3 Values")}}Adds the hash mark multiplier.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2("CSS2.1")}}Adds the double ampersand combinator.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2("CSS1")}}Initial definition
- -

See also

- - diff --git a/files/pt-br/web/css/specified_value/index.html b/files/pt-br/web/css/specified_value/index.html new file mode 100644 index 0000000000..939aa09234 --- /dev/null +++ b/files/pt-br/web/css/specified_value/index.html @@ -0,0 +1,44 @@ +--- +title: Valor Especifícado +slug: Web/CSS/valor_espeficifco +tags: + - CSS + - Iniciante + - Web +translation_of: Web/CSS/specified_value +--- +

{{CSSRef}}

+ +

O valor especificado de uma propriedade CSS está definido em uma de três maneiras.

+ +
    +
  1. If the document's stylesheet has specified a value for the property then it will be used. For example; if the {{cssxref("color")}} property is set to green then the text color of the corresponding element will be green.
    2. +
  2. If the document's stylesheet has not specified a value then it will be inherited form the parent element (if possible). For example; if we have a paragraph ({{HTMLElement("p")}}) inside a {{HTMLElement("div")}} and the {{HTMLElement("div")}} has a CSS font property value of "Arial" and the {{HTMLElement("p")}} doesn't have a font property defined then it will inherit the Arial font.
    3. +
  3. If none of the above are available, the initial value for the element as specified by the CSS specification is applied.
    4. +
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentario
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Definição inicial
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/syntax/index.html b/files/pt-br/web/css/syntax/index.html new file mode 100644 index 0000000000..4d6ff0bf1c --- /dev/null +++ b/files/pt-br/web/css/syntax/index.html @@ -0,0 +1,70 @@ +--- +title: Sintaxe +slug: Web/CSS/sintaxe +translation_of: Web/CSS/Syntax +--- +

O Objetivo básico da linguagem de folhas de estilo em cascata (CSS) é permitir que um motor do navegador pinte elementos na página com características específicas como cores, posições, ou decorações. A sintaxe CSS reflete estes objetivos e seus blocos de contrução básicos são:

+ + + +

Declarações do CSS

+ +

A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de declaração, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-lo com o estilo correto.

+ +

Tanto as propriedades como os valores são case-sensitive no CSS. Os pares se separam por dois pontos, ':' (U+003A COLON), e espaços em branco antes, entre e depois de propriedades e valores, porém os espaços dentro da declaração são ignorados.

+ +

css syntax - declaration.png

+ +

Existem mais de 100 propriedades diferentes no CSS e um número quase infinito de diferentes valores. Nem todos os pares de propriedades e valores são permitidos em cada propriedade define o que são valores válidos. Quando um valor não é válido para uma determinada propriedade, a declaração é considerada inválida e é totalmente ignorada pelo motor do CSS.

+ +

Blocos de declaração CSS

+ +

Declarações são agrupadas em blocos, que estão delimitados na estrutura com uma chave de abertura, '{' (U+007B LEFT CURLY BRACKET), e fechadas com outra, '}' (U+007D RIGHT CURLY BRACKET). Os blocos as vezes podem estar aninhados, a abertura e fechamento de chaves no bloco CSS deve ser realizada.

+ +

css syntax - block.png

+ +

Esses blocos são chamados de blocos de declaração e as declarações dentro deles são separadas por, ';' (U+003B SEMICOLON). Um bloco de declaração pode não conter nenhuma declaração. Espaços em branco em volta das declarações não são consideradas. Não é necessário que a última declaração possua ponto e vírgula, apesar de ser considerada uma boa prática pois previne o esquecimento de acrescê-la quando for necessário aumentar o bloco.

+ +

css syntax - declarations block.png

+ +
O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML style.
+ +

Regras CSS

+ +

Se as folhas de estilo pudessem apenas aplicar uma declaração para cada elemento de uma página da web, eles seriam bem limitados. O principal objetivo é aplicar diferentes declarações a diferentes partes do documento.

+ +

O CSS associa as condições com os blocos de declaração. Cada bloco (válido) é precedido por um ou mais seletores, separados por vírgula, que são condições selecionando alguns elementos da página. O grupo de seletores é chamado de regra.css syntax - ruleset.png

+ +

Um elemento pode ser modificado por diversos seletores, e por isso por diversas regras que potencialmente podem conter diversas propriedades, com diferentes valores, o CSS padrão define aquele que possui a precedência e que será aplicado: esse é o tal algoritmo em cascata.

+ +
É importante perceber que quando uma regra é caracterizada por um grupo de seletores que são algum tipo de atalho com cada um sendo um simples seletor isso não se aplica a validade da regra por si só.
+
+Isso leva a uma importante consequência: se apenas um dos seletores for inválido, como usar uma pseudo-classe ou pseudo-elemento desconhecido, todo o seletor é inválido e por isso toda a regra é ignorada (invalidada também).
+ +

CSS statements

+ +

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

+ +

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

+ +

css syntax - statements Venn diag.png

+ +

There are different kinds of statements:

+ + + +

Any statement which isn't a rule or an at-rule is invalid and ignored.

+ +

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not support by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

+ +

See also

+ + diff --git a/files/pt-br/web/css/tools/border-image_generator/index.html b/files/pt-br/web/css/tools/border-image_generator/index.html deleted file mode 100644 index d350bce6b5..0000000000 --- a/files/pt-br/web/css/tools/border-image_generator/index.html +++ /dev/null @@ -1,2627 +0,0 @@ ---- -title: Gerador de Border-image -slug: Web/CSS/Tools/Border-image_generator -tags: - - Alternativas CSS -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Esta ferramenta pode ser utilizada para gerar o valor {{cssxref("border-image")}} em CSS3.

- -
-

Border Image Generator

- -

HTML Content

- -
    <div id="container">
-
-        <div id="gallery">
-            <div id="image-gallery">
-                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
-            </div>
-        </div>
-
-        <div id="load-actions" class="group section">
-            <div id="toggle-gallery" data-action="hide"> </div>
-            <div id="load-image" class="button"> Upload image </div>
-            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
-            <div id="load-remote" class="button"> </div>
-        </div>
-
-        <div id="general-controls" class="group section">
-            <div class="name"> Control Box </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">scale</div>
-                <div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10">
-                </div>
-            </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">draggable</div>
-                <div class="ui-checkbox" data-topic='drag-subject'></div>
-            </div>
-            <div class="property right">
-                <div class="name">section height</div>
-                <div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000">
-                </div>
-            </div>
-        </div>
-
-        <div id="preview_section" class="group section">
-            <div id="subject">
-                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
-                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
-            </div>
-            <div id="preview"> </div>
-        </div>
-
-        <!-- controls -->
-        <div id="controls" class="group section">
-
-            <!-- border-image-slice -->
-            <div id="border-slice-control" class="category">
-                <div class="title"> border-image-slice </div>
-                <div class="property">
-                    <div class="name">fill</div>
-                    <div class="ui-checkbox" data-topic='slice-fill'></div>
-                </div>
-            </div>
-
-            <!-- border-image-width -->
-            <div id="border-width-control" class="category">
-                <div class="title"> border-image-width </div>
-            </div>
-
-            <!-- border-image-outset -->
-            <div id="border-outset-control" class="category">
-                <div class="title"> border-image-outset </div>
-            </div>
-
-            <!-- other-settings -->
-            <div id="aditional-properties" class="category">
-                <div class="title"> aditional-properties </div>
-                <div class="property">
-                    <div class="name"> repeat-x </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
-                        <div data-value="0">repeat</div>
-                        <div data-value="0">stretch</div>
-                        <div data-value="0">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="name"> repeat-y </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
-                        <div data-value="1">repeat</div>
-                        <div data-value="1">stretch</div>
-                        <div data-value="1">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3">
-                    </div>
-                </div>
-
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
-                    </div>
-                </div>
-            </div>
-
-
-            <div id="output" class="category">
-                <div class="title"> CSS Code </div>
-                <div class="css-property">
-                    <span class="name"> border-image-slice: </span>
-                    <span id="out-border-slice" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-width: </span>
-                    <span id="out-border-width" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-outset: </span>
-                    <span id="out-border-outset" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-repeat: </span>
-                    <span id="out-border-repeat" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-source: </span>
-                    <span id="out-border-source" class="value">  </span>
-                </div>
-            </div>
-
-        </div>
-    </div>
- -

CSS Content

- -
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-
-/*
- * 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;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-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;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list > div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list > div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 2px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-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;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover > * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] > * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider > input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-/**
- * 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,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time < 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index >= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	};
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	};
-
-	var setValue = function setValue(topic, value) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	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.checkbox.checked);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			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);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j<4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i < positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- -

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

- -

 

diff --git a/files/pt-br/web/css/tools/border-radius_generator/index.html b/files/pt-br/web/css/tools/border-radius_generator/index.html deleted file mode 100644 index a7db08eb69..0000000000 --- a/files/pt-br/web/css/tools/border-radius_generator/index.html +++ /dev/null @@ -1,1593 +0,0 @@ ---- -title: Gerador de Border-radius -slug: Web/CSS/Tools/Border-radius_generator -tags: - - CSS - - Ferramentas -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Esta ferramenta pode ser utilizada para gerar o efeito {{cssxref("border-radius")}} em CSS3.

-
-

border-radius

-

HTML Content

- 
<div id="container">
-    <div class="group section">
-        <div id="preview" class="col span_12">
-            <div id="subject">
-                <div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top">
-                </div>
-                <div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top">
-                </div>
-                <div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom">
-                </div>
-                <div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom">
-                </div>
-
-                <div id="radius-ui-sliders">
-                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="controls" class="group section">
-
-        <div class="group section">
-            <div id="dimensions">
-                <div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
-
-                <div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
-            </div>
-
-            <div id="output"></div>
-        </div>
-
-        <div class="group section">
-            <div id="radius-lock">
-                <div class="info"> rounded corner </div>
-                <div class="ui-checkbox" data-topic='top-left'></div>
-                <div class="ui-checkbox" data-topic='top-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-left'></div>
-            </div>
-
-            <div id="unit-selection">
-                <div class="info"> select border units </div>
-            </div>
-        </div>
-
-    </div>
-</div>
-
-

CSS Content

- 
/*  GRID OF TEN
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider-container {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider-container * {
-	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;
-}
-
-/*
- * UI Component
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-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;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview {
-	height: 500px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	overflow: hidden;
-	position: relative;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#preview input {
-	color: #333;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-#subject {
-	width: 400px;
-	height: 150px;
-	margin: 0 auto;
-	border: 3px solid #C60;
-	background: #FFF;
-	position: relative;
-}
-
-.radius {
-	width: 50%;
-	height: 50%;
-	border: 1px solid #CCC;
-	display: none;
-	position: absolute;
-	z-index: 1;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.handle {
-	width: 16px;
-	height: 16px;
-	position: absolute;
-	z-index: 2;
-}
-
-.handle-top-left {
-	top: -12px;
-	left: -12px;
-	cursor: se-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
-}
-
-.handle-top-right {
-	top: -12px;
-	right: -12px;
-	cursor: sw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
-}
-
-.handle-bottom-right {
-	bottom: -12px;
-	right: -12px;
-	cursor: nw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
-}
-
-.handle-bottom-left {
-	bottom: -12px;
-	left: -12px;
-	cursor: ne-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
-}
-
-
-.radius-container {
-	position: absolute;
-	display : block;
-	z-index: 1;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* TOP LEFT */
-#top-left {
-	top: 0;
-	left: 0;
-}
-
-#top-left .radius {
-	border-top-left-radius: 100%;
-	top: 0;
-	left: 0;
-}
-
-/* TOP RIGHT */
-#top-right {
-	top: 0;
-	right: 0;
-}
-
-#top-right .radius {
-	border-top-right-radius: 100%;
-	top: 0;
-	right: 0;
-}
-
-/* BOTTOM RIGHT */
-#bottom-right {
-	bottom: 0;
-	right: 0;
-}
-
-#bottom-right .radius {
-	border-bottom-right-radius: 100%;
-	bottom: 0;
-	right: 0;
-}
-
-/* BOTTOM lEFT */
-#bottom-left {
-	bottom: 0;
-	left: 0;
-}
-
-#bottom-left .radius {
-	border-bottom-left-radius: 100%;
-	bottom: 0;
-}
-
-/* INPUT SLIDERS */
-
-#preview .ui-input-slider {
-	margin: 10px;
-	position: absolute;
-	z-index: 10;
-}
-
-#radius-ui-sliders {
-	width: 100%;
-	height: 100%;
-	min-height: 75px;
-	min-width: 150px;
-	padding: 20px 50px;
-	top: -20px;
-	left: -50px;
-	position: relative;
-}
-
-#tlr {
-	top: -30px;
-	left: -50px;
-	display: none;
-}
-
-#tlw {
-	top: -30px;
-	left: 30px;
-}
-
-#tlh {
-	top: 20px;
-	left: -50px;
-}
-
-#trr {
-	top: -30px;
-	right: -50px;
-	display: none;
-}
-
-#trw {
-	top: -30px;
-	right: 30px;
-}
-
-#trh {
-	top: 20px;
-	right: -50px;
-}
-
-#brr {
-	bottom: -30px;
-	right: -50px;
-	display: none;
-}
-
-#brw {
-	bottom: -30px;
-	right: 30px;
-}
-
-#brh {
-	bottom: 20px;
-	right: -50px;
-}
-
-#blr {
-	bottom: -30px;
-	left: -50px;
-	display: none;
-}
-
-#blw {
-	bottom: -30px;
-	left: 30px;
-}
-
-#blh {
-	bottom: 20px;
-	left: -50px;
-}
-
-#preview .ui-input-slider-left, #preview .ui-input-slider-right {
-	visibility: hidden;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-left {
-	visibility: visible;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-right {
-	visibility: visible;
-}
-
-/*
- *
- */
-
-#unit-selection {
-	width: 200px;
-	height: 75px;
-	margin: 30px 30px 0 0;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: right;
-}
-
-#unit-selection .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#unit-selection .dropdown {
-	width: 50px;
-	height: 20px;
-	margin: 10px;
-	padding: 0;
-	border-radius: 3px;
-	position: absolute;
-	overflow: hidden;
-}
-
-#unit-selection select {
-	width: 50px;
-	height: 20px;
-	marign: 0;
-	padding: 0 0 0 10px;
-	background: #555;
-	border: 1px solid #555;
-	border: none;
-	color: #FFF;
-	float: left;
-}
-
-#unit-selection select option {
-	background: #FFF;
-	color: #333;
-}
-
-#unit-selection select:hover {
-	cursor: pointer;
-}
-
-#unit-selection .dropdown:before {
-	content: "";
-	width: 18px;
-	height: 20px;
-	display: block;
-	background-color: #555;
-	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	top: 0px;
-	right: 0px;
-	position: absolute;
-	z-index: 1;
-	pointer-events: none;
-}
-
-#unit-selection .unit-top-left {
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-left-w {
-	top: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-top-left-h {
-	top: 20px;
-	left: -37px;
-}
-
-#unit-selection .unit-top-right {
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-right-w {
-	top: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-top-right-h {
-	top: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-right {
-	bottom: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-right-w {
-	bottom: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-bottom-right-h {
-	bottom: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-left {
-	bottom: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-left-w {
-	bottom: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-bottom-left-h {
-	bottom: 20px;
-	left: -37px;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-
-
-#radius-lock {
-	width: 200px;
-	height: 75px;
-	margin: 30px 0 0 30px;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: left;
-}
-
-#radius-lock .ui-checkbox {
-	color: #FFF;
-	position: absolute;
-}
-
-#radius-lock .ui-checkbox > label {
-	height: 20px;
-	width: 34px;
-	padding: 0;
-}
-
-#radius-lock .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#radius-lock [data-topic="top-left"] {
-	top: 10px;
-	left: 10px;
-}
-
-#radius-lock [data-topic="top-right"] {
-	top: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-right"] {
-	bottom: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-left"] {
-	bottom: 10px;
-	left: 10px;
-}
-
-/**
- * Controls
- */
-
-#dimensions {
-	width: 200px;
-	color: #444;
-	float:left;
-}
-
-#dimensions input {
-	background: #555;
-	color: #FFF;
-	border: none;
-	border-radius: 3px;
-}
-
-#output {
-	width: 500px;
-	padding: 10px 0;
-	margin: 10px 0;
-	color: #555;
-	text-align: center;
-	border: 1px dashed #999;
-	border-radius: 3px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-
-	float: right;
-}
-
-
-
-

JavaScript Content

- 
'use strict';
-
-
-/**
- * UI-InputSliderManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseInt(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		subscribe(obj.topic, function(value) {
-			input.value = value + obj.unit;
-		});
-
-		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) {
-			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("mousemove", sliderMotion);
-		});
-
-		document.addEventListener("mouseup", function(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		= node.getAttribute('data-min') | 0;
-		var max		= node.getAttribute('data-max') | 0;
-		var step	= node.getAttribute('data-step') | 0;
-		var value	= node.getAttribute('data-value') | 0;
-		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;
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-
-		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);
-		node.className = 'ui-input-slider ui-input-slider-container';
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	}
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined && send_notify === false) {
-			slider.input.value = value + slider.unit;
-			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 getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	}
-
-	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() {
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	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,
-		getNode : getNode,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-		}
-		catch(error) {
-			console.log(error);
-		}
-	}
-
-	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() {
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function() {
-	BorderRadius.init();
-});
-
-var BorderRadius = (function BorderRadius() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	var subject;
-	var units = ['px', '%'];
-	var output = null;
-
-	var UnitSelector = function UnitSelector(topic) {
-
-		this.container = document.createElement("div");
-		this.select = document.createElement("select");
-		for (var i in units) {
-			var option = document.createElement("option");
-			option.value = i;
-			option.textContent = units[i];
-			this.select.appendChild(option);
-		}
-
-		this.container.className = 'dropdown ' + 'unit-' + topic;
-		this.container.appendChild(this.select);
-	}
-
-	UnitSelector.prototype.setValue = function setValue(value) {
-		this.salect.value = value;
-	}
-
-
-	var RadiusContainer = function RadiusContainer(node) {
-		var radius = document.createElement('div');
-		var handle = document.createElement('div');
-		var x = node.getAttribute('data-x');
-		var y = node.getAttribute('data-y');
-		var active = false;
-
-		this.id = node.id;
-		this.node = node;
-		this.radius = radius;
-		this.handle = handle;
-		this.width = 100;
-		this.height = 50;
-		this.size = 0;
-		this.rounded = false;
-
-		this.unitX = 0;
-		this.unitY = 0;
-		this.unitR = 0;
-
-		this.maxW = 100;
-		this.maxH = 100;
-		this.maxR = 100;
-
-		this.topic = y + '-' + x;
-
-		var sliderW = InputSliderManager.getNode(this.topic + '-w');
-		var sliderH = InputSliderManager.getNode(this.topic + '-h');
-		var sliderR = InputSliderManager.getNode(this.topic);
-
-		this.setUnitX(this.unitX);
-		this.setUnitY(this.unitY);
-		this.setUnitR(this.unitR);
-
-		this.updateWidth();
-		this.updateHeight();
-		this.updateRadius();
-
-		if (x === 'left')	this.resizeX =  1;
-		if (x === 'right')	this.resizeX = -1;
-		if (y === 'top')	this.resizeY =  1;
-		if (y === 'bottom')	this.resizeY = -1;
-
-		radius.className = 'radius';
-
-		var unit_selector = document.getElementById("unit-selection");
-		var unitW = new UnitSelector(this.topic + '-w');
-		var unitH = new UnitSelector(this.topic + '-h');
-		var unitR = new UnitSelector(this.topic);
-
-		unit_selector.appendChild(unitW.container);
-		unit_selector.appendChild(unitH.container);
-		unit_selector.appendChild(unitR.container);
-		node.appendChild(radius);
-		subject.appendChild(handle);
-
-		unitW.select.addEventListener('change', function(e) {
-			this.setUnitX(e.target.value | 0);
-		}.bind(this));
-
-		unitH.select.addEventListener('change', function(e) {
-			this.setUnitY(e.target.value | 0);
-		}.bind(this));
-
-		unitR.select.addEventListener('change', function(e) {
-			this.setUnitR(e.target.value | 0);
-		}.bind(this));
-
-		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
-
-		handle.addEventListener("mousedown", function(e) {
-			active = true;
-			this.radius.style.display = 'block';
-			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		document.addEventListener("mouseup", function(e) {
-			this.radius.style.display = 'none';
-			if (active === true)
-				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
-		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
-		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
-
-		ButtonManager.subscribe(this.topic, function(value) {
-			this.rounded = value;
-			if (value === true) {
-				unitW.container.style.display = 'none';
-				unitH.container.style.display = 'none';
-				unitR.container.style.display = 'block';
-				sliderW.style.display = 'none';
-				sliderH.style.display = 'none';
-				sliderR.style.display = 'block';
-				this.setUnitR(this.unitR);
-				this.updateRadius();
-			}
-
-			if (value === false) {
-				unitW.container.style.display = 'block';
-				unitH.container.style.display = 'block';
-				unitR.container.style.display = 'none';
-				sliderW.style.display = 'block';
-				sliderH.style.display = 'block';
-				sliderR.style.display = 'none';
-				this.setUnitX(this.unitX);
-				this.setUnitY(this.unitY);
-				this.updateWidth();
-				this.updateHeight();
-			}
-
-			this.updateBorderRadius();
-
-		}.bind(this));
-
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.updateWidth = function updateWidth() {
-		this.node.style.width = this.width + units[this.unitX];
-		var value = Math.round(this.width / 2);
-		InputSliderManager.setValue(this.topic + '-w', value, false);
-	}
-
-	RadiusContainer.prototype.updateHeight = function updateHeight() {
-		this.node.style.height = this.height + units[this.unitY];
-		var value = Math.round(this.height / 2);
-		InputSliderManager.setValue(this.topic + '-h', value, false);
-	}
-
-	RadiusContainer.prototype.updateRadius = function updateRadius() {
-		var value = Math.round(this.size / 2);
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		InputSliderManager.setValue(this.topic, value, false);
-	}
-
-	RadiusContainer.prototype.setWidth = function setWidth(value) {
-		this.radius.style.display = 'block';
-		this.width = 2 * value;
-		this.node.style.width = this.width + units[this.unitX];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setHeight = function setHeight(value) {
-		this.radius.style.display = 'block';
-		this.height = 2 * value;
-		this.node.style.height = this.height + units[this.unitY];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setRadius = function setRadius(value) {
-		this.radius.style.display = 'block';
-		this.size = 2 * value;
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
-		this.unitX = value;
-		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
-		if (this.unitX === 1) this.maxW = 200;
-		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
-		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
-	}
-
-	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
-		this.unitY = value;
-		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
-		if (this.unitY === 1) this.maxH = 200;
-		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
-		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
-	}
-
-	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
-		this.unitR = value;
-
-		if (this.unitR === 0)
-			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
-
-		if (this.unitR === 1)
-			this.maxR = 200;
-
-		InputSliderManager.setUnit(this.topic, units[this.unitR]);
-		InputSliderManager.setMax(this.topic, this.maxR / 2);
-	}
-
-	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
-		if (this.rounded) {
-			this.setUnitR(this.unitR);
-			return;
-		}
-
-		if (unit === 0)
-			this.setUnitX(this.unitX);
-
-		if (unit === 1)
-			this.setUnitY(this.unitY);
-	}
-
-	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
-
-		if (this.rounded === true) {
-			var unit = units[this.unitR];
-			var value = Math.round(this.size / 2);
-			return value + unit;
-		}
-
-		var unitX = units[this.unitX];
-		var unitY = units[this.unitY];
-		var valueX = Math.round(this.width / 2);
-		var valueY = Math.round(this.height / 2);
-
-		if (valueX === valueY && this.unitX === this.unitY)
-			return valueX + unitX;
-
-		return valueX + unitX + ' ' + valueY + unitY;
-	}
-
-	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
-		var radius = this.composeBorderRadius();
-		var corner = 0;
-
-		if (this.topic === 'top-left') {
-			subject.style.borderTopLeftRadius = radius;
-			corner = 0;
-		}
-
-		if (this.topic === 'top-right') {
-			subject.style.borderTopRightRadius = radius;
-			corner = 1;
-		}
-
-		if (this.topic === 'bottom-right') {
-			subject.style.borderBottomRightRadius = radius;
-			corner = 2;
-		}
-
-		if (this.topic === 'bottom-left') {
-			subject.style.borderBottomLeftRadius = radius;
-			corner = 3;
-		}
-
-		Tool.updateOutput(corner, radius);
-	}
-
-	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
-
-		if (this.rounded === true) {
-			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
-			if (this.size < 0)	this.size = 0;
-			if (this.size > this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width < 0)	this.width = 0;
-			if (this.width > this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height < 0) this.height = 0;
-			if (this.height > this.maxH)	this.height = this.maxH;
-			this.updateHeight();
-		}
-
-		if (deltaX || deltaY)
-			this.updateBorderRadius();
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview;
-		var preview_ui;
-		var radius_containers = [];
-		var border_width = 3;
-		var borders1 = [null, null, null, null];
-		var borders2 = [0, 0, 0, 0];
-
-		var updateUIWidth = function updateUIWidth(value) {
-			var pwidth = subject.parentElement.clientWidth;
-			var left = (pwidth - value) / 2;
-			subject.style.width = value + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(0);
-		}
-
-		var updateUIHeight = function updateUIHeight(value) {
-			var pheight = subject.parentElement.clientHeight;
-			var top = (pheight - value) / 2;
-			subject.style.height = value + "px";
-			subject.style.top = top - border_width + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(1);
-		}
-
-		var updatePreviewUIWidth = function updatePreviewUIWidth() {
-			var p = subject.parentElement.clientWidth;
-			var v = preview_ui.clientWidth;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.left = (p - v) / 2 + "px" ;
-		}
-
-		var updatePreviewUIHeight = function updatePreviewUIHeight() {
-			var p = subject.parentElement.clientHeight;
-			var v = preview_ui.clientHeight;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.top = (p - v) / 2 + "px" ;
-		}
-
-		var updateOutput = function updateOutput(corner, radius) {
-			var values = radius.split(" ");
-
-			borders1[corner] = values[0];
-			borders2[corner] = values[0];
-
-			if (values.length === 2)
-				borders2[corner] = values[1];
-
-			var border_1_value = borders1.join(" ");
-			var border_2_value = borders2.join(" ");
-			var border_radius = 'border-radius: ' + border_1_value;
-
-			if (border_2_value !== border_1_value)
-				border_radius += ' / ' + border_2_value;
-
-			border_radius += ';';
-			output.textContent = border_radius;
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-			subject = getElemById("subject");
-			output = getElemById("output");
-			preview_ui = getElemById("radius-ui-sliders");
-
-			var elem = document.querySelectorAll('.radius-container');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				radius_containers[i] = new RadiusContainer(elem[i]);
-
-			InputSliderManager.subscribe("width", updateUIWidth);
-			InputSliderManager.subscribe("height", updateUIHeight);
-
-			InputSliderManager.setValue("width", subject.clientWidth);
-			InputSliderManager.setValue("height", subject.clientHeight);
-		}
-
-		return {
-			init : init,
-			updateOutput : updateOutput
-		}
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		InputSliderManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-
-
-

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

-

 

diff --git a/files/pt-br/web/css/universal_selectors/index.html b/files/pt-br/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..15e64a08ca --- /dev/null +++ b/files/pt-br/web/css/universal_selectors/index.html @@ -0,0 +1,105 @@ +--- +title: Seletor universal +slug: Web/CSS/Seletor_universal +tags: + - CSS + - Referências + - Seletores +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

O seletor universal do CSS (*) aplica estilos a elementos de qualquer tipo.

+ +
/* Seleciona todos os elementos */
+* {
+  color: green;
+}
+ +

A partir do CSS3, o asterisco pode ser combinado com {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintaxe

+ +
* { propriedades de estilo }
+ +

O asterisco é opcional para seletores simples. Por exemplo, *.atencao e .atencao são equivalentes.

+ +

Exemplos

+ +

CSS

+ +
* [lang^=pt] {
+  color: green;
+}
+
+*.atencao {
+  color: red;
+}
+
+*#conteudoprincipal {
+  border: 1px solid blue;
+}
+
+.flutuando {
+  float: left
+}
+
+/* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando */
+.flutuando + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="atencao">
+  <span lang="pt-br">Um span verde</span> em um parágrafo vermelho.
+</p>
+<p id="conteudoprincipal" lang="pt-pt">
+  <span class="atencao">Um span vermelho</span> em um parágrafo verde.
+</p>
+ +

Resultado

+ +

{{EmbedLiveSample('Exemplos')}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}}{{Spec2('CSS4 Selectors')}}Sem mudanças
{{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}}{{Spec2('CSS3 Selectors')}}Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}}{{Spec2('CSS2.1')}}Definição inicial
+ +

Compatibilidade dos Browsers

+ + + +

{{Compat("css.selectors.universal")}}

diff --git a/files/pt-br/web/css/used_value/index.html b/files/pt-br/web/css/used_value/index.html new file mode 100644 index 0000000000..18c48dedb5 --- /dev/null +++ b/files/pt-br/web/css/used_value/index.html @@ -0,0 +1,114 @@ +--- +title: Valor usado +slug: Web/CSS/Valor_usado +translation_of: Web/CSS/used_value +--- +
{{cssref}}
+ +

O valor usado de uma propriedade CSS é o valor final dessa propriedade depois de todos os cálculos terem sido executados.

+ +

After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., width, line-height) are in pixels. The used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color, display) and with position and float.

+ +

For some properties, JavaScript can retrieve the used value through the window.getComputedStyle method.

+ +

Detalhes

+ +

There are four steps to calculating any CSS property's final value. First, the specified value is the result of cascading (choosing the most specific stylesheet rule that changes the property), inheritance (using the same computed value as a parent if the property is inheritable), or using the default. Then, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block). Then, layout is calculated (dimensions that are auto or percentages relative to a parent are replaced with pixel values), and the result is the used value.

+ +

Finally, transformed according to the limitations of the local environment, the result is actual value. The actual value is the used value after any approximations have been applied. For example, a user agent may only be able to render borders with integer pixel widths, and therefore have to approximate the computed width, or the user agent may be forced to use only black and white shades, instead of full color. These steps are calculated internally.

+ +

JavaScript can read only the final used values with window.getComputedStyle. This method may instead return computed values, depending on the property. The values it returns are generically called {{cssxref("resolved_value", "resolved values")}}).

+ +

Exemplo

+ +

Compute and show the used width of three elements (updates on resize):

+ +

HTML

+ +
<div id="no-width">
+  <p>No explicit width.</p>
+  <p class="show-used-width">..</p>
+
+  <div id="width-50">
+    <p>Explicit width: 50%.</p>
+    <p class="show-used-width">..</p>
+
+    <div id="width-inherit">
+      <p>Explicit width: inherit.</p>
+      <p class="show-used-width">..</p>
+    </div>
+  </div>
+</div>
+
+ +

CSS

+ +
#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Make results easier to see: */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}
+ +

JavaScript

+ +
function updateUsedWidth(id) {
+  var div = document.getElementById(id);
+  var par = document.querySelector(`#${id} .show-used-width`);
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '80%', '372px') }}

+ +

 

+ +

Diferentes valores computados

+ +

CSS 2.0 defined only computed value as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., display, font-size, line-height), the computed values and used values are the same. These are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

+ + + +

Especificações

+ +

CSS Level 2: Used Values

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/valor_atual/index.html b/files/pt-br/web/css/valor_atual/index.html deleted file mode 100644 index b7f9307a58..0000000000 --- a/files/pt-br/web/css/valor_atual/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Valor atual -slug: Web/CSS/Valor_atual -translation_of: Web/CSS/actual_value ---- -
{{CSSRef}}
- -

The actual value of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentario
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Definição inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_computado/index.html b/files/pt-br/web/css/valor_computado/index.html deleted file mode 100644 index a4932b8d40..0000000000 --- a/files/pt-br/web/css/valor_computado/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Valor Computado -slug: Web/CSS/valor_computado -tags: - - CSS - - Guía - - Iniciante - - Web -translation_of: Web/CSS/computed_value ---- -
{{cssref}}
- -

The computed value of a CSS property is computed from the specified value by:

- - - -

The computation needed to reach the computed value for the property typically involves converting relative values (such as those in em units or percentages) to absolute values.

- -

For example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size).

- -

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the line-height property become the computed value, as specified. These relative values that remain in the computed value become absolute when the used value is determined.

- -

The main use of the computed value (other than as a step between the specified value and used value) is inheritance, including the {{cssxref("inherit")}} keyword.

- -

Notas

- -

The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the {{cssxref("resolved_value", "resolved value")}}, which may either be the {{cssxref("computed_value", "computed value")}} or the {{cssxref("used_value", "used value")}}, depending on the property.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Especificação inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_espeficifco/index.html b/files/pt-br/web/css/valor_espeficifco/index.html deleted file mode 100644 index 939aa09234..0000000000 --- a/files/pt-br/web/css/valor_espeficifco/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Valor Especifícado -slug: Web/CSS/valor_espeficifco -tags: - - CSS - - Iniciante - - Web -translation_of: Web/CSS/specified_value ---- -

{{CSSRef}}

- -

O valor especificado de uma propriedade CSS está definido em uma de três maneiras.

- -
    -
  1. If the document's stylesheet has specified a value for the property then it will be used. For example; if the {{cssxref("color")}} property is set to green then the text color of the corresponding element will be green.
    2. -
  2. If the document's stylesheet has not specified a value then it will be inherited form the parent element (if possible). For example; if we have a paragraph ({{HTMLElement("p")}}) inside a {{HTMLElement("div")}} and the {{HTMLElement("div")}} has a CSS font property value of "Arial" and the {{HTMLElement("p")}} doesn't have a font property defined then it will inherit the Arial font.
    3. -
  3. If none of the above are available, the initial value for the element as specified by the CSS specification is applied.
    4. -
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentario
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Definição inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_inicial/index.html b/files/pt-br/web/css/valor_inicial/index.html deleted file mode 100644 index fea27bfe3c..0000000000 --- a/files/pt-br/web/css/valor_inicial/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Valor inicial -slug: Web/CSS/valor_inicial -tags: - - CSS - - Iniciante - - Web - - valor inicial -translation_of: Web/CSS/initial_value ---- -
{{cssref}}
- -

O Valor inicial de uma propriedade CSS é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.

- - - -
-

Nota: Você pode especificar explicitamente um valor inicial, utilizando a palavra-chave {{cssxref("initial")}}

-
- -

Veja Também

- - diff --git a/files/pt-br/web/css/valor_resolvido/index.html b/files/pt-br/web/css/valor_resolvido/index.html deleted file mode 100644 index a045149bc7..0000000000 --- a/files/pt-br/web/css/valor_resolvido/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Valor Resolvido -slug: Web/CSS/Valor_resolvido -tags: - - CSS - - Guía - - Iniciante - - Web -translation_of: Web/CSS/resolved_value ---- -
{{cssref}}
- -

The resolved value of a CSS property is the value returned by {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. For most properties, it is the {{cssxref("computed_value", "computed value") }}, but for a few legacy properties (including {{cssxref("width")}} and {{cssxref("height")}}), it is instead the {{cssxref("used_value", "used value")}}. See the specification link below for more per-property details.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Definicação inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_usado/index.html b/files/pt-br/web/css/valor_usado/index.html deleted file mode 100644 index 18c48dedb5..0000000000 --- a/files/pt-br/web/css/valor_usado/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Valor usado -slug: Web/CSS/Valor_usado -translation_of: Web/CSS/used_value ---- -
{{cssref}}
- -

O valor usado de uma propriedade CSS é o valor final dessa propriedade depois de todos os cálculos terem sido executados.

- -

After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., width, line-height) are in pixels. The used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color, display) and with position and float.

- -

For some properties, JavaScript can retrieve the used value through the window.getComputedStyle method.

- -

Detalhes

- -

There are four steps to calculating any CSS property's final value. First, the specified value is the result of cascading (choosing the most specific stylesheet rule that changes the property), inheritance (using the same computed value as a parent if the property is inheritable), or using the default. Then, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block). Then, layout is calculated (dimensions that are auto or percentages relative to a parent are replaced with pixel values), and the result is the used value.

- -

Finally, transformed according to the limitations of the local environment, the result is actual value. The actual value is the used value after any approximations have been applied. For example, a user agent may only be able to render borders with integer pixel widths, and therefore have to approximate the computed width, or the user agent may be forced to use only black and white shades, instead of full color. These steps are calculated internally.

- -

JavaScript can read only the final used values with window.getComputedStyle. This method may instead return computed values, depending on the property. The values it returns are generically called {{cssxref("resolved_value", "resolved values")}}).

- -

Exemplo

- -

Compute and show the used width of three elements (updates on resize):

- -

HTML

- -
<div id="no-width">
-  <p>No explicit width.</p>
-  <p class="show-used-width">..</p>
-
-  <div id="width-50">
-    <p>Explicit width: 50%.</p>
-    <p class="show-used-width">..</p>
-
-    <div id="width-inherit">
-      <p>Explicit width: inherit.</p>
-      <p class="show-used-width">..</p>
-    </div>
-  </div>
-</div>
-
- -

CSS

- -
#no-width {
-  width: auto;
-}
-
-#width-50 {
-  width: 50%;
-}
-
-#width-inherit {
-  width: inherit;
-}
-
-/* Make results easier to see: */
-div {
-  border: 1px solid red;
-  padding: 8px;
-}
- -

JavaScript

- -
function updateUsedWidth(id) {
-  var div = document.getElementById(id);
-  var par = document.querySelector(`#${id} .show-used-width`);
-  var wid = window.getComputedStyle(div)["width"];
-  par.textContent = `Used width: ${wid}.`;
-}
-
-function updateAllUsedWidths() {
-  updateUsedWidth("no-width");
-  updateUsedWidth("width-50");
-  updateUsedWidth("width-inherit");
-}
-
-updateAllUsedWidths();
-window.addEventListener('resize', updateAllUsedWidths);
-
-
- -

Resultado

- -

{{ EmbedLiveSample('Example', '80%', '372px') }}

- -

 

- -

Diferentes valores computados

- -

CSS 2.0 defined only computed value as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., display, font-size, line-height), the computed values and used values are the same. These are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

- - - -

Especificações

- -

CSS Level 2: Used Values

- -

Veja também

- - diff --git a/files/pt-br/web/css/value_definition_syntax/index.html b/files/pt-br/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..d14bcaecdf --- /dev/null +++ b/files/pt-br/web/css/value_definition_syntax/index.html @@ -0,0 +1,436 @@ +--- +title: Sintexe do valor +slug: Web/CSS/Sintexe_valor +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/Value_definition_syntax +--- +
{{CSSRef}}
+ +

CSS value definition syntax, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).

+ +

The definition syntax describes which values are allowed and the interactions between them. A component can be a keyword, some characters considered as a literal, or a value of a given CSS data type or of another CSS property.

+ +

Tipos de componente

+ +

Keywords

+ +

Generic keywords

+ +

A keyword with a predefined meaning appears literally, without quotation marks. For example: auto, smaller or ease-in.

+ +

The specific case of inherit, initial and unset

+ +

All CSS properties accept the keywords inherit, initial and unset, that are defined throughout CSS. They are not shown in the value definition, and are implicitly defined.

+ +

Literals

+ +

In CSS, a few characters can appear on their own, like the slash ('/') or the comma (','), and are used in a property definition to separate its parts. The comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. Typically, the slash is used in shorthand properties; to separate component that are of the same type, but belong to different properties.

+ +

Both symbols appear literally in a value definition.

+ +

Data types

+ +

Basic data types

+ +

Some kind of data are used throughout CSS, and are defined once for all values in the specification. Called basic data types, they are represented with their name surrounded by the symbol '<' and '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

+ +

Non-terminal data types

+ +

Less common data types, called non-terminal data types, are also surrounded  by '<' and '>'.

+ +

Non-terminal data types are of two kinds:

+ + + +

Component value combinators

+ +

Brackets

+ +

Brackets enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to group components to bypass the precedence rules.

+ +
bold [ thin && <length> ]
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Juxtaposition

+ +

Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. All juxtaposed components are mandatory and should appear in the exact order.

+ +
bold <length> , thin
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Double ampersand

+ +

Separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.

+ +
bold && <length>
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +
Note: juxtaposition has precedence over the double ampersand, meaning that bold thin && <length> is equivalent to [ bold thin ] && <length>. It describes bold thin <length> or <length> bold thin but not bold <length> thin.
+ +

Double bar

+ +

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +
Note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && <length> ]. It describes bold, thin <length>, bold thin <length>, or thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component.
+ +

Single bar

+ +

Separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. This is typically used to separate a list of possible keywords.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

This example matches the following values:

+ + + +

But not:

+ + + +
+

Note: the double bar has precedence over the single bar, meaning that bold | thin || <length> is equivalent to bold | [ thin || <length> ]. It describes bold, thin, <length>, <length> thin, or thin <length> but not bold <length> as only one entity from each side of the | combinator can be present.

+
+ +

Component value multipliers

+ +

A multiplier is a sign that indicate how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

+ +

Note that multipliers cannot be added and have all precedence over combinators.

+ +

Asterisk (*)

+ +

The asterisk multiplier indicates that the entity may appear zero, one or several times.

+ +
bold smaller*
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Plus (+)

+ +

The plus multiplier indicates that the entity may appear one or several times.

+ +
bold smaller+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Question mark (?)

+ +

The question mark multiplier indicates that the entity is optional, and must appear zero or one time.

+ +
bold smaller?
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Curly braces ({ })

+ +

The curly braces multiplier, enclosing two integers separated by a comma, A and B, indicates that the entity must appear at least A times and at most B times.

+ +
bold smaller{1,3}
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Hash mark (#)

+ +

The hash mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

+ +
bold smaller#
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Exclamation point (!)

+ +

The exclamation point multiplier after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

+ +
[ bold? smaller? ]!
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Summary

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SignNameDescriptionExample
Combinators
 JuxtapositionComponents are mandatory and should appear in that ordersolid <length>
&&Double ampersandComponents are mandatory but may appear in any order<length> && <string>
||Double barAt least one of the components must be present, and they may appear in any order.<'border-image-outset'> || <'border-image-slice'>
|Single barExactly one of the components must be presentsmaller | small | normal | big | bigger
[ ]BracketsGroup components to bypass precedence rulesbold [ thin && <length> ]
Multipliers
 No multiplierExactly 1 timessolid
*Asterisk0 or more timesbold smaller*
+Plus sign1 or more timesbold smaller+
?Question mark0 or 1 time (that is optional)bold smaller?
{A,B}Curly bracesAt least A times, at most B timesbold smaller{1,3}
#Hash mark1 or more times, but each occurrence separated by a comma (',')bold smaller#
!Exclamation pointGroup must produce at least 1 value[ bold? smaller? ]!
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2("CSS3 Values")}}Adds the hash mark multiplier.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2("CSS2.1")}}Adds the double ampersand combinator.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2("CSS1")}}Initial definition
+ +

See also

+ + diff --git a/files/pt-br/web/css/visual_formatting_model/index.html b/files/pt-br/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..a37a0cc7b0 --- /dev/null +++ b/files/pt-br/web/css/visual_formatting_model/index.html @@ -0,0 +1,227 @@ +--- +title: Modelo de formatação visual +slug: Web/CSS/Modelo_Visual +tags: + - CSS + - CSS conceitos basicos + - Intermediário +translation_of: Web/CSS/Visual_formatting_model +--- +

{{CSSRef}}

+ +

The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS.

+ +

The visual formatting model transforms each element of the document and generates zero, one, or several boxes that conform to the CSS box model. The layout of each box is defined by:

+ + + +

The model renders a box, in relation to the edge of its containing block. Usually, a box establishes the containing block for its descendants. However, a box is not constrained by its containing block; when a box's layout goes outside the containing block, it is said to overflow.

+ +

 Gerando um Box

+ +

Box generation is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect how the visual formatting is done. The type of the box generated depends on the value of the {{ cssxref("display") }} CSS property.

+ +

Block-level elements and block boxes

+ +

An element is said to be block-level when the calculated value of its {{ cssxref("display") }} CSS property is: block, list-item, or table. A block-level element is visually formatted as a block (e.g., paragraph), intended to be vertically stacked.

+ +

Each block-level box participates in a block formatting context. Each block-level element generates at least one block-level box, called the principal block-level box. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.

+ +

The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the positioning scheme.

+ +

venn_blocks.pngA block-level box may also be a block container box. A block container box is a box that contains only other block-level boxes, or creates an inline formatting context, thus containing only inline boxes.

+ +

It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.

+ +

Block-level boxes that also are block container boxes are called block boxes.

+ +

Anonymous block boxes

+ +

In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.

+ +

Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.

+ +

Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.

+ +

Exemplo

+ +

If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have display:block :

+ +
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
+ +

Two anonymous block boxes are created: one for the text before the paragraph (Some inline text), and another for the text after it (followed by more inline text). This builds the following block structure:

+ +

anonymous_block-level_boxes.png

+ +

Leading to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the initial value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.

+ +

Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.

+ +

If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.

+ +

Exemplo

+ +

If we take the following HTML code, with {{ HTMLElement("p") }} have display:inline and {{ HTMLElement("span") }} have display:block :

+ +
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
+ +

Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:

+ +

+ +

Which leads to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Inline-level elements and inline boxes

+ +

An element is said to be inline-level when the calculated value of its {{ cssxref("display") }} CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.

+ +

venn_inlines.png

+ +
+

This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2

+
+ +

Inline-level elements generate inline-level boxes that are defined as boxes participating to an inline formatting context. Inline boxes are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with display:inline. Inline-level boxes, whose contents do not participate in an inline formatting context, are called atomic inline-level boxes. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of inline-block or inline-table, are never split into several boxes, as is possible with inline boxes.

+ +
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
+ +
Atomic inline boxes cannot be split into several lines in an inline formatting context. +
+
<style>
+  span {
+    display:inline; /* default value*/
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>can be split in several
+   lines as it</span> is an inline box.
+</div>
+
+ +

which leads to:

+ +
The text in the span can be split into several lines as it is an inline box.
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>cannot be split in several
+   lines as it</span> is an inline-block box.
+</div>
+
+ +

which leads to:

+ +
The text in the span cannot be split into several lines as it is an inline-block box.
+
+
+ +

Anonymous inline boxes

+ +

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to initial for all others.

+ +

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.

+ +
Example TBD
+ +

Outros tipos de boxes

+ +

Line boxes

+ +

Line boxes are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

+ +

These boxes are technical, and Web authors do not usually have to bother with them.

+ +

Run-in boxes

+ +

Run-in boxes, defined using display:run-in, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

+ +
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
+ +

Model-induced boxes

+ +

Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

+ + + +

Positioning schemes

+ +

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

+ + + +

Normal flow

+ +

In the normal flow, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value static or relative, and if the CSS {{ cssxref("float") }} is set to the value none.

+ +

Exemplo

+ +
When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:
+
+[image]
+
+When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:
+
+[image]
+ +

There are two sub-cases of the normal flow: static positioning and relative positioning:

+ + + +

Floats

+ +

In the float positioning scheme, specific boxes (called floating boxes or simply floats) are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.

+ +

The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than none and {{ cssxref("position") }} to static or relative. If {{ cssxref("float") }} is set to left, the float is positioned at the beginning of the line box. If set to right, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

+ +

[image]

+ +

Absolute positioning

+ +

In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.

+ +

An element is absolutely positioned if the {{ cssxref("position") }} is set to absolute or fixed.

+ +

With a fixed positioned element, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.

+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/word-wrap/index.html b/files/pt-br/web/css/word-wrap/index.html deleted file mode 100644 index c23f4b966d..0000000000 --- a/files/pt-br/web/css/word-wrap/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: word-wrap -slug: Web/CSS/word-wrap -translation_of: Web/CSS/overflow-wrap ---- -
{{CSSRef}} {{SeeCompatTable}}
- -

Resumo

- -

A propriedade CSS word-wrap é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.

- -
Nota: Originalmente uma extensão proprietária da Microsoft (não prefixada), a propriedade word-wrap foi renomeada para overflow-wrap no rascunho atual do texto de especificações do CSS3. Compilações estáveis do Google Chrome e do Opera têm suporte a nova sintaxe.
- -

{{cssinfo}}

- -

Sintaxe

- -
word-wrap:  normal | break-word
- -

Valores

- -
-
normal
-
Indica que as linhas só podem quebrar em pontos de quebra normais de palavras.
-
break-word
-
Indica que as palavras normalmente inquebráveis podem ser quebrados em pontos arbitrários se não houver pontos de quebra de outra forma aceitáveis na linha.
-
- -

Exemplos

- -
p { width: 13em; background: gold; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -
p { width: 13em; background: gold; word-wrap: break-word; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
CSS Text Level 3{{ Spec2('CSS3 Text') }} 
- -

Compatibilidade entre navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico{{ CompatGeckoDesktop("1.9.1") }}1.05.510.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatGeckoMobile("1.9.1") }}1.0{{ CompatUnknown() }}{{ CompatUnknown() }}1.0
-
- - - -

Veja também

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