scrollbar-color - CSS

scrollbar-color
===============

**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A propriedade CSS **`scrollbar-color`** define as cores da barra de rolagem do navegador.

**Track** refere-se ao fundo da barra de rolagem, que normalmente é fixa, independente da posição da página.

**Thumb** refere-se a parte móvel da barra de rolagem, um botão auxiliar que flutua acima da **Track**.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | scrolling boxes |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |

Sintaxe
-------

```css
/\* Palavras reservadas \*/
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/\* Nomes de <color> \*/
scrollbar-color: rebeccapurple green; /\* Duas cores válidas.
O primeiro valor aplica-se ao Thumb, o segundo ao Track \*/

/\* Valores globais \*/
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;
```

### Valores

`<scrollbar-color>`

Define a cor da scrollbar.

| `auto` | Valor padrão de renderização do background da scrollbar (Track), caso não sejam definidos outros valores. |
| --- | --- |
| `dark` | Mostra uma scrollbar mais escura, podendo ser um estilo padrão definido pelo navegador, ou personalizado com cores escuras. |
| `light` | Mostra uma scrollbar mais clara, podendo ser um estilo padrão definido pelo navegador, ou personalizado com cores escuras. |
| `<color> <color>` | A primeira cor é aplicada à **thumb**, a segunda cor ao **track** |

**Nota:** User Agents must apply any `scrollbar-color` value set on the root element to the viewport.

### Sintaxe formal
```

scrollbar-color =
  auto        | (en-US)
  <color>{2} (en-US)

```

Exemplo
-------

### CSS

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}
```

### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### Result

Cuidados de acessibilidade
--------------------------

When using `scrollbar-color` property with specific color values, authors should ensure the specified colors have enough contrast between them. For keyword values, UAs should ensure the colors they use have enough contrast. See Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1.

Especificações
--------------

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


grid-auto-flow - CSS

grid-auto-flow
==============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade de CSS **`grid-auto-flow`** controla como o algoritmo de arrumação automática funciona, especificando exatamente como os itens fluirão no grid.

```css
/\* Keywords Chaves \*/
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/\* Valores globais \*/
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;
```

|  |  |
| --- | --- |
| Initial value | `row` |
| Aplica-se a | grid containers |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Syntaxe
-------

Esta propriedade pode ser de duas maneiras:

* uma única keyword (palavra-chave): `row(linha)`, `column`(coluna), ou `dense(denso)`.
* duas keywords (palavras-chave): `row dense(linha densa)` ou `column dense(coluna densa)`.
### Valores

`row` (linha)

Keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloca os itens preenchendo cada linha de uma vez, adicionando novas linhas se necessário. Se nem `row` (linha) ou `column` (coluna) for especificado, `row` (linha) é assumido.

`column` (coluna)

É uma keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloque os itens preenchendo colunas, adicionando novas se necessário.

`dense` (denso)

Keyword (palavra-chave) que determina que o algoritmo de arrumação automática use um formato de compactação "denso", que tenta preencher os espaços anteriores do grid caso receba itens menores após. Isto talvez deixe os itens fora de ordem, preenchendo espaços deixados por itens maiores.

Se omitido, o algoritmo "esparso" é utilizado, onde o algoritmo de arrumação somente "avança" no grid ao colocar os itens, nunca voltando para preencher os espaços. Isso garante que todos os itens colocados automaticamente apareçam "em ordem", mesmo que deixem espaçs que poderiam ser preenchidos por itens posteriores.

### Sintaxe Formal
```

grid-auto-flow =
  [ (en-US) row | (en-US) column ] (en-US)  || (en-US)
  dense

```

Exemplo
-------

### Conteúdo HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()" />
<label for="dense">dense</label>
```

### Conteúdo CSS

```css
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column; /\* or 'row', 'row dense', 'column dense' \*/
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}
```

```
function changeGridAutoFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("direction");
  var dense = document.getElementById("dense");
  var gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja Também
-----------

* Propriedades CSS relacionadas: `grid-auto-rows` (en-US), `grid-auto-columns` (en-US), `grid`
* Guia de Grid Layout: *Arrumação automática no grid layout (en-US)*
* Video tutorial: *Introduzindo arrumação automática no grid e ordem*

1. **CSS**
2. **CSS Reference**
3. CSS Grid Layout
4. **Guias**
    1. Conceitos básicos do grid layout
    2. Relacionamento com outros tipos de layout
    3. Arrumação baseada em linha (en-US)
    4. Grid template areas (en-US)
    5. Layout usando named grid lines (en-US)
    6. Arrumação automática no grid layout (en-US)
    7. Alinhamento de Box no grid layout (en-US)
    8. Grids, logical values e writing modes (en-US)
    9. CSS Grid Layout e Acessibilidade (en-US)
    10. CSS Grid Layout e Progressive Enhancement (en-US)
    11. Identificando layouts comuns usando grids (en-US)
5. **Propriedades**
    1. grid
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows
6. **Glossário**
    1. Grid lines (en-US)
    2. Grid tracks (en-US)
    3. Grid cell (en-US)
    4. Grid areas
    5. Gutters (en-US)
    6. Grid row (en-US)
    7. Grid column (en-US)


margin-bottom - CSS

margin-bottom
=============

A propriedade CSS **`margin-bottom`** define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.

Experimente
-----------

![The effect of the CSS margin-bottom property on the element box](/files/4045/margin-bottom.svg)

A propriedade não tem efeito em non-replaced (en-US) elementos inline, como `<span>` ou `<code>`.

Sintaxe
-------

```css
/\* <length> values \*/
margin-bottom: 10px; /\* Um tamanho absoluto \*/
margin-bottom: 1em; /\* relativo ao tamanho do texto \*/
margin-bottom: 5%; /\* relativo à largura do container do bloco mais próximo \*/

/\* Keyword values \*/
margin-bottom: auto;

/\* Global values \*/
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;
```

A propriedade `margin-bottom` é especificada como a palavra chave `auto`, ou a `<length>`, ou a`<percentage>`. Esse valor pode ser positivo, zero ou negativo

### Values

`<length>` (en-US)

O tamanho de uma margin com um valor fixo

`<percentage>` (en-US)

O tamanho de uma margin como porcentagem, é relativa com o *tamanho* do bloco pai.

`auto`

O navegador seleciona um valor adequado para usar. Veja `margin`.

### Sintaxe formal
```

margin-bottom =
  <length-percentage>  | (en-US)
  auto

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

Exemplo
-------

### HTML

```html
<div class="container">
  <div class="box0">Box 0</div>
  <div class="box1">Box 1</div>
  <div class="box2">Box one's negative margin pulls me up</div>
</div>
```

### CSS

CSS para definir margin-bottom e height

```css
.box0 {
  margin-bottom: 1em;
  height: 3em;
}
.box1 {
  margin-bottom: -1.5em;
  height: 4em;
}
.box2 {
  border: 1px dashed black;
  border-width: 1px 0;
  margin-bottom: 2em;
}
```

Algumas definições para container e divs, para que o os efeitos de margin possam ser vistos com mais clareza

```css
.container {
  background-color: orange;
  width: 320px;
  border: 1px solid black;
}
div {
  width: 320px;
  background-color: gold;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

|  |  |
| --- | --- |
| Initial value | `0` |
| Aplica-se a | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSS Basic User Interface - CSS

CSS Basic User Interface
========================

**CSS Basic User Interface** é um módulo CSS que permite definir a renderização e a funcionalidade de recursos relacionados à interface do usuário.

Referência
----------

### Propriedades

* `appearance` (en-US)
Experimental
* `box-sizing`
* `cursor`
* `ime-mode`
Deprecated
* `nav-down`
Experimental
* `nav-left`
Experimental
* `nav-right`
Experimental
* `nav-up`
Experimental
* `outline`
* `outline-width` (en-US)
* `outline-style` (en-US)
* `outline-color` (en-US)
* `outline-offset` (en-US)
* `resize` (en-US)
* `text-overflow`
* `user-select` (en-US)
Experimental
Guias
-----

Usando valores URL na propriedade `cursor` (en-US)

Explica como uma URL pode ser usada com a propriedade `cursor` para criar cursores personalizados.

Especificações
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |


:first-of-type - CSS

:first-of-type
==============

A CSS pseudo-classe **`:first-of-type`** representa o primeiro elemento de seu tipo entre os filhos de seu elemento pai.

```css
/\* Seleciona qualquer <p> que seja o primeiro elemento
 desse tipo entre seus irmãos \*/
p:first-of-type {
  color: red;
}
```

**Nota:** Originalmente definido, o elemento selecionado tinha que ter um pai. Desde o Seletores Nível 4, isso não é mais necessário.

Sintaxe
-------

Error: could not find syntax for this itemExemplos
--------

### Estilizando o primeiro parágrafo

#### HTML

```html
<h2>Título</h2>
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
```

#### CSS

```css
p:first-of-type {
  color: red;
  font-style: italic;
}
```

#### Resultado

### Elementos aninhados

Este exemplo mostra como os elementos aninhados também podem ser estilizados. Note que o seletor universal (`*`) está implícito quando nenhum seletor simples está escrito.

#### HTML

```html
<article>
  <div>Esta `div` é a primeira!</div>
  <div>Esta <span>`span` aninhada é a primeira</span>!</div>
  <div>
    Este <em>`em` aninhado é o primeiro</em>, mas este
    <em>`em` aninhado é o último</em>!
  </div>
  <div>Este <span>`span` aninhado pegou o estilo</span>!</div>
  <b>Este `b` qualifica!</b>
  <div>Esta é a `div` final.</div>
</article>
```

#### CSS

```css
article :first-of-type {
  background-color: pink;
}
```

#### Resultado

Especificações
--------------

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `:first-child`, `:last-of-type`, `:nth-of-type`


:disabled - CSS

:disabled
=========

A pseudo-classe CSS **`:disabled`** representa qualquer elemento desativado. Um elemento é desativado se não puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado habilitado, no qual ele pode ser ativado ou aceitar o foco.

```css
/\* Selects any disabled <input> \*/
input:disabled {
  background: #ccc;
}
```

Sintaxe
-------

Error: could not find syntax for this itemExemplo
-------

Este exemplo mostra um formulário básico de envio. Ele usa o evento JavaScript `change` (en-US) para permitir que o usuário ative / desative os campos de faturamento.

### HTML

```html
<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Address" />
    <input type="text" placeholder="Zip Code" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing-checkbox">Same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Address" disabled />
    <input type="text" placeholder="Zip Code" disabled />
  </fieldset>
</form>
```

### CSS

```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript

```js
// Wait for the page to finish loading
document.addEventListener(
  "DOMContentLoaded",
  function () {
    // Attach `change` event listener to checkbox
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // Select the billing text fields
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `:enabled`


margin-top - CSS

margin-top
==========

Sumário
-------

![The effect of the CSS margin-top property on the element box](/files/4101/margin-top.svg)A propriedade CSS **`margin-top`** de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.

Essa propriedade não tem efeito em *elementos non-replaced* inline elements, como `<tt>` (en-US) ou `<span>`.

|  |  |
| --- | --- |
| Initial value | `0` |
| Aplica-se a | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

Sintaxe
-------

```css
/\* Valores <length> \*/
margin-top: 10px; /\* An absolute length \*/
margin-top: 1em; /\* A length relative to the text size \*/
margin-top: 5%; /\* A margin relative to the nearest block container's width \*/

/\* Valores padrão \*/
margin-top: auto;

/\* Valores globais \*/
margin-top: inherit;
margin-top: initial;
margin-top: unset;
```

### Valores

`<length>`

Especifica um tamanho fixo. Veja `<length>` (en-US) para possíveis valores.

`<porcentagem>`

Um `<percentage>` (en-US) sempre relativo ao **width** do bloco.

`auto`

Veja `margin`.

### Sintaxe formal
```

margin-top =
  <length-percentage>  | (en-US)
  auto

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

Exemplos
--------

```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

Compatibilidade de navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


transform-style - CSS

transform-style
===============

A propriedade **`transform-style`** CSS define se os elemento filhos são posicionados em um espaco 3D ou serão achatados ( flattened ) no plano do elemento

Experimente
-----------

Se achatados, os elementos filho não existirão por conta própria ou sozinhos no espaço 3D.

Como essa propriedade não é herdada, ela deve ser definida para todos os descendentes que não sejam folhas do elemento.

Syntax
------

```css
/\* Keyword values \*/
transform-style: flat;
transform-style: preserve-3d;

/\* Valores globais \*/
transform-style: inherit;
transform-style: initial;
transform-style: unset;
```

### Values

`flat`

Indica que os filhos do elemento estão no plano do próprio elemento.

`preserve-3d`

Indica que os filhos do elemento devem ser posicionados no espaço 3D.

### Formal syntax
```

transform-style =
  flat         | (en-US)
  preserve-3d

```

Especificações
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

|  |  |
| --- | --- |
| Initial value | `flat` |
| Aplica-se a | qualquer elemento transformavel |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |
| Creates stacking context | yes |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Using CSS transforms


Valor inicial - CSS

Valor inicial
=============

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.

* Para propriedades herdadas, o valor inicial é usado apenas em seu elemento raíz, desde que nenhum valor especificado seja fornecido.
* Para propriedades não-herdadas, o valor inicial é usado em todos os elementos, enquanto nenhum valor especificado é fornecido

**Nota:** Você pode especificar explicitamente um valor inicial, utilizando a palavra-chave `initial`

Veja Também
-----------

* Refercia CSS
* `initial` (en-US)


<display-outside> - CSS

<display-outside>
=================

O `<display-outside>` as palavras-chave especificam a parte externa do elemento `display` type, que é essencialmente seu papel no layout de fluxo. Essas palavras-chave são usadas como valores do `display` e pode ser usada para fins legados como uma única palavra-chave ou conforme definido na especificação do Nível 3, juntamente com um valor do `<display-inside>` palavras-chave.

Sintaxe
-------

O `<display-outside>` O valor é definido usando uma palavra-chave da lista abaixo:

### Valor

`block`

O elemento gera uma caixa de elemento de bloco, gerando quebras de linha antes e depois do elemento, quando no fluxo normal.

`inline`

O elemento gera uma ou mais caixas de elementos embutidos que não geram quebras de linha antes ou depois de si mesmas. No fluxo normal, o próximo elemento estará na mesma linha se houver espaço

`run-in`
Experimental

O elemento gera uma caixa de introdução. Se o irmão adjacente do elemento definido como`display: run-in` box é uma caixa de bloco, o `run-in` box se torna a primeira caixa embutida da caixa de bloco a seguir.

Os elementos de entrada funcionam como linhas ou blocos, dependendo dos elementos circundantes. Ou seja: Se a caixa de introdução contém uma caixa de bloco, o mesmo que bloco. Se uma caixa de bloco segue a caixa de introdução, a caixa de introdução torna-se a primeira caixa embutida da caixa de bloco. Se uma caixa embutida se seguir, a caixa de introdução se tornará uma caixa de bloco.

**Nota:**: Navegadores que suportam a sintaxe de dois valores, encontrando apenas o valor externo, como quando `display: block` ou `display: inline` especificado, definirá o valor interno como`flow`. Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento a ser bloco, seria de esperar que os filhos desse elemento participassem do layout de fluxo normal em bloco e em linha.

### Sintaxe formal
```

<display-outside> =
  block   | (en-US)
  inline  | (en-US)
  run-in

```

Exemplo
-------

No exemplo a seguir, os elementos de extensão (normalmente exibidos como elementos embutidos) são definidos como `display: block` e, assim, divida em novas linhas e expanda para preencher seu contêiner na dimensão embutida.

### HTML

```html
<span>span 1</span> <span>span 2</span>
```

### CSS

```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### Resultado

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `display`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* Layout de bloco e embutido no fluxo normal (en-US)
* Contextos de formatação explicados (en-US)


word-break - CSS

word-break
==========

A propriedade CSS **`word-break`** é usada para especificar se o navegador deve inserir ou não quebras de linha onde, normalmente, o texto vazaria de seu container.

Experimente
-----------

**Nota:** comparando com `overflow-wrap`, `word-break` criará uma quebra de linha no ponto exato em que o texto vazaria, mesmo que uma palavra pudesse ser colocada por completo em uma nova linha sem a necessidade de quebra da palavra.

Sintaxe
-------

```css
/\* Valores específicos \*/
word-break: normal;
word-break: break-all;
word-break: keep-all;

/\* Valores globais \*/
word-break: inherit;
word-break: initial;
word-break: unset;
```

### Valores

`normal`

Usa a regra de quebra de linha padrão.

`break-all`

Quebras de linha podem ser inseridas entre quaisquer caracteres de texto não-CJC (Chinês/Japonês/Coreano).

`keep-all`

Não permite quebra de linha para texto CJC. Texto não-CJC se comporta como `normal`.

`break-word`

Para evitar o vazamento, palavras que normalmente não seriam quebradas podem ser quebradas em pontos arbitrários se não houver pontos de quebra válidos na linha.

### Sintaxe formal
```

word-break =
  normal      | (en-US)
  keep-all    | (en-US)
  break-all   | (en-US)
  break-word

```

Exemplos
--------

### Conteúdo HTML

```html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
</p>
```

### Conteúdo CSS

```css
.narrow {
  padding: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Text Module Level 3 # word-break-property |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `word-wrap`


visibility - CSS

visibility
==========

A propriedade CSS de visibilidade pode mostrar ou ocultar um elemento sem afetar o layout de um documento (ou seja, o espaço é criado para elementos independentemente de serem visíveis ou não). A propriedade também pode ocultar linhas ou colunas em um `<table>`.

```css
/\* palavra-chave valores \*/
visibility: visible;
visibility: hidden;
visibility: collapse;

/\* Global values \*/
visibility: inherit;
visibility: initial;
visibility: unset;
```

**Nota:** Para ocultar um elemento ou removê-lo do layout do documento, defina a propriedade `display` como `none` em vez de usar `visibility`.

|  |  |
| --- | --- |
| Initial value | `visible` |
| Aplica-se a | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | a visibility |

Sintaxe
-------

A propriedade é especificada como um dos valores das palavras-chave listados abaixo.

### Valores

`visible`

The element box is visible.

`hidden`

The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have `visibility` set to `visible`. The element cannot receive focus (such as when navigating through tab indexes).

`collapse`

The `collapse` keyword has different effects for different elements:

* For `<table>` rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if ``display`: none` were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.
* Collapsed flex items and ruby annotations are hidden, and the space they would have occupied is removed.
* For other elements, `collapse` is treated the same as `hidden`.

### Formal syntax
```

visibility =
  visible   | (en-US)
  hidden    | (en-US)
  collapse

```

Interpolação
------------

Visibility values are interpolable between *visible* and *not-visible*. One of the start or ending values must therefore be `visible` or no interpolation can happen. The value is interpolated as a discrete step, where values of the timing function between `0` and `1` map to `visible` and other values of the timing function (which occur only at the start/end of the transition or as a result of `cubic-bezier()` functions with y values outside of [0, 1]) map to the closer endpoint.

Exemplos
--------

### Exemplo básico

#### HTML

```html
<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">
  The third paragraph is visible. Notice the second paragraph is still occupying
  space.
</p>
```

#### CSS

```css
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}
```

### Table example

#### HTML

```html
<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
```

#### CSS

```css
.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}
```

Notas
-----

* Support for `visibility: collapse` is missing or partially incorrect in some modern browsers. It may not be correctly treated like `visibility: hidden` on elements other than table rows and columns.
* `visibility: collapse` may change the layout of a table if the table has nested tables within the cells that are collapsed, unless `visibility: visible` is specified explicitly on nested tables.
Especificações
--------------

| Specification |
| --- |
| CSS Display Module Level 3 # visibility |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSS Grid Layout - CSS

CSS Grid Layout
===============

**Nota:** CSS Grid será suportado por vários navegadores até meados de 2017. O suporte em navegadores antigos pode ser obtido habilitando-se uma flag que permite o uso da API. Nesse caso não se esqueça de consultar e fazer referência a cada propriedade e funcionalidade da especificação para certificar-se da sua compatibilidade, bem como para obter maiores informações.

**CSS Grid layout** é uma especificação do W3C projetada para proporcionar um método bi-dimensional para criação de layout CSS que oferece a possibilidade de "layoutar" itens da página com uso de linhas e colunas. CSS grid poderá ser usado para obter uma infinidade de diferentes layouts. O diferencial desse método de criação de layouts reside na possibilidade de se dividir uma página em grandes regiões e de se definir o relacionamento em termos de medidas, posicionamento e camadas entre os diferentes componentes da marcação HTML.

Tal como as tabelas, grid layout permite ao autor alinhar os componentes da página fazendo uso de linhas e colunas. Contudo ao contrário das tabelas, grid layout não se baseia em estruturação de conteúdos, possibilitando uma enorme variedade de layouts, o que não é possível de se obter com uso de tabelas. Por exemplo: elementos filhos de um grid container podem ser posicionados à vontade se sobrepondo ou mudando de layer, de modo idêntico como se faz com uso das funcionalidades do nosso já conhecido posicionamento CSS.

Exemplo básico
--------------

### HTML

```html
<div class="wrapper">
  <div class="box a">a</div>
  <div class="box b">b</div>
  <div class="box c">c</div>
  <div class="box d">d</div>
  <div class="box e">e</div>
  <div class="box f">f</div>
</div>
```

### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
```

Referência
----------

### Propriedades CSS

* `grid-template-columns`
* `grid-template-rows`
* `grid-template-areas` (en-US)
* `grid-template` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-flow`
* `grid`
* `grid-row-start` (en-US)
* `grid-column-start` (en-US)
* `grid-row-end` (en-US)
* `grid-column-end` (en-US)
* `grid-row` (en-US)
* `grid-column` (en-US)
* `grid-area` (en-US)
* `grid-row-gap` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)
### Funções CSS

* `repeat()` (en-US)
* `minmax()` (en-US)
### Glossário

* Grid Lines (en-US)
* Grid Tracks (en-US)
* Grid Cell (en-US)
* Grid Area
* Gutters (en-US)
* Grid row (en-US)
* Grid column (en-US)
Guias
-----

* Conceitos básicos de Grid Layout
* Relação do Grid Layout com outros métodos de layout
* Layout usando grid lines nomeadas (en-US)
* Grid template areas (en-US)
* Posicionamento Automático CSS Grid Layout (en-US)
* Alinhamento Box no CSS Grid Layout (en-US)
* CSS Grid, Valores Lógicos e Modos de Escrita (en-US)
* CSS Grid Layout e Acessibilidade (en-US)
* CSS Grid e Aprimoramento Progressivo (en-US)
* Realizando layouts comuns usando CSS Grid (en-US)
Especificações
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |

Veja também
-----------

* Glossário:
    + Grid lines (en-US)
    + Grid tracks (en-US)
    + Grid cell (en-US)
    + Grid areas
    + Gutters (en-US)
    + Grid row (en-US)
    + Grid column (en-US)


Understanding CSS z-index - CSS

Understanding CSS 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 `z-index` (en-US) 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 `z-index` (en-US).

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. Stacking and float : Como lidar com elementos que usam *float*
3. Adding z-index : Usando index-z para mudar o empilhamento padrão
4. The stacking context : Notas sobre contexto do empilhamento
5. Stacking context example 1 : 2-level HTML hierarquia, z-index no último *level*
6. Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os *levels*
7. Stacking context example 3 : 3-level HTML hierarquia, z-index no segundo *level*

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

### Original Document Information

* Author(s): Paolo Lombardi
* This article is the English translation of an article I wrote in Italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


prefers-color-scheme - CSS

prefers-color-scheme
====================

**Nota:** Se você definiu `privacy.resistFingerprinting` como **true**, `prefers-color-scheme` será substituída pela `light`.

O **`prefers-color-scheme`** CSS media feature é usado para detectar se o usuário solicitou que o sistema use um tema de cores claras ou escuras.

Syntax
------

`no-preference`

Indica que o usuário não fez nenhuma preferência conhecida pelo sistema. Este valor da palavra-chave é avaliado como `false` no contexo booleano.

`light`

Indica que o usuário notificou o sistema de que prefere uma interface com um tema claro.

`dark`

Indica que o usuário notificou o sistema de que prefere uma interface com um tema escuro.

Exemplos
--------

Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temáticos de acordo com a preferência do esquema de cores do usuário.

### HTML

```html
<div class="day">Dia (inicial)</div>
<div class="day light-scheme">Dia (modificar e utilizar um tema claro)</div>
<div class="day dark-scheme">Dia (modificar e utilizar um tema escuro)</div>
<br />

<div class="night">Noite (inicial)</div>
<div class="night light-scheme">Noite (modificar e utilizar um tema claro)</div>
<div class="night dark-scheme">Noite (modificar e utilizar um tema escuro)</div>
```

### CSS

```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Video tutorial: Coding a Dark Mode for your Website
* Redesigning your product and website for dark mode
* Changing color schemes in Windows, macOS and Android.


aspect-ratio - CSS

aspect-ratio
============

A característica de mídia CSS **`aspect-ratio`** pode ser utilizada para testar a taxa de aspecto de sua viewport.

Sintaxe
-------

A característica de `aspect-ratio` é especificada como um valor de `<ratio>` (en-US) representando a relação de largura-para-altura em aspecto à sua viewport. É uma característica de diferencial, o que significa que você pode fazer uso de variações pré-fixadas de **`min-aspect-ratio`** e **`max-aspect-ratio`** para definir os os seus valores mínimos e máximos, respectivamente.

Exemplo
-------

O exemplo abaixo está contido em um `<iframe>`, que cria o seu próprio viewport. Redimensione o `<iframe>` para ver o `aspect-ratio` em ação !

### HTML

```html
<div id="inner">
  Observe este elemento, conforme você altera a largura e a altura da sua
  viewport.
</div>
```

### CSS

```css
/\* Taxa de aspecto mínima \*/
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /\* azul \*/
  }
}

/\* Taxa de aspecto máxima \*/
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /\* ciano \*/
  }
}

/\* Taxa de aspecto exata, coloque-a no final para evitar sobrescrita\*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /\* vermelho \*/
  }
}
```

```
<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />

<iframe
 id="outer"
 src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Observe este elemento, conforme você altera a largura e a altura da sua viewport.</div>">
</iframe>
```

```
iframe {
  display: block;
}
```

```
outer.style.width = outer.style.height = "165px";

w.onchange = w.oninput = function () {
  outer.style.width = w.value + "px";
  wf.textContent = "width:" + w.value;
};
h.onchange = h.oninput = function () {
  outer.style.height = h.value + "px";
  hf.textContent = "height:" + h.value;
};
```

### Result

Especificações
--------------

| Specification |
| --- |
| Media Queries Level 4 # aspect-ratio |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Modo de exibição (display-mode) - CSS

Modo de exibição (display-mode)
===============================

O recurso de mídia CSS `@media` (en-US) do modo de exibição pode ser usado para aplicar estilos com base no modo de exibição de um aplicativo. Você pode usar para prover uma consistente experiência de usuário entre abrir um site a partir de uma URL e um ícone desktop.

Esse recurso corresponde ao membro da exibição do manifesto do aplicativo da Web. Ambos aplicam-se ao contexto de navegação de nível superior e a qualquer contexto afilhado de navegação. O recurso de consulta aplica-se independentemente de onde um manifesto de aplicativo web está presente.

Sintaxe
-------

O recurso `display-mode` é especificado como um valor de uma palavra chave escolhido da lista abaixo.

| Modo de exibição | Descrição | Modo de exibição secundário |
| --- | --- | --- |
| `fullscreen` | Toda a área disponível da tela será usada e nada do agente-usuário (navegador) chrome é mostrado. | `standalone` |
| `standalone` | A aplicação irá parecer uma aplicação independente. Isso pode incluir a aplicação ter uma janela diferente, seu próprio ícone no menu de aplicações, etc. Neste modo, o navegador não irá mostrar os controles de navegação (como barra de endereço, botão voltar, botão página inicial, etc), mas pode incluir outros elementos gráficos como a barra de status. | `minimal-ui` |
| `minimal-ui` | A aplicação irá parecer uma aplicação independente, mas terá um conjunto mínimo de elementos gráficos (UI) para controlar a navegação. Esses elementos podem variar de acordo com o navegador. | `browser` |
| `browser` | A aplicação abre numa aba ou nova janela convencional do navegador, dependendo do navegador e da plataforma. | (nenhum) |

Exemplo
-------

```css
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}
```

Especificações
--------------

| Specification |
| --- |
| Media Queries Level 5 # display-mode |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Navegação "Migalha de Pão" - CSS

Navegação "Migalha de Pão"
==========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
A navegação "migalha de pão" ajuda o usuário a enteder sua localização no site, fornecendo uma trilha de navegação de volta à pagina inicial.

![Links displayed inline with separators](/pt-BR/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation/breadcrumb-navigation.png)

Exigências
----------

Os itens tipicamente são exibidos em linha com um separador para indicar uma hierarquia entre páginas individuais.

Receita
-------

**Nota:** Baixe esse exemplo

Faça escolhas
-------------

Esse padrão é apresentado usando um layout flexível simples demonstrando como uma linha de CSS pode nos fornecer nossa navegação. Os separadores são adicionados usando o conteúdo gerado por CSS. Você pode alterá-las para qualquer separador que desejar.

Preocupações com acessibilidade
-------------------------------

Eu utilizei os atributos `aria-label` e `aria-current` para ajudar os usuários a entender o que é essa navegação e onde a página atual está na estrutura. Veja os links relacionados para mais informações.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Os vários métodos de layout têm diferente suporte para o navegador. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.

#### Flexbox

Veja também
-----------

* CSS Flexible Box Layout
* Fornecendo uma trilha de "migalha de pão"
* Usando o atributo aria-current


Recipe: Media objects - CSS

Recipe: Media objects
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
O *Media Object* (Objeto de Mídia) é um padrão que vemos em toda web. Nomeado por Nicole Sullivan refere-se a uma caixa de duas colunas com uma imagem de um lado e texto descritivo do outro, por ex. uma postagem no facebook ou tweet.

![](/pt-BR/docs/Web/CSS/Layout_cookbook/Media_objects/media-object.png)

Exigências
----------

O Padrão Media Object precisa de algumas ou todas as seguintes características:

* Empilhados no Celular, duas colunas no Computador.
* A imagem pode estar à esquerda ou à direita.
* A imagem pode ser pequena ou grande.
* Media Objects (Objetos de Mídia) podem ser aninhados.
* O Media Object deve limpar o conteúdo, não importando o tamanho.
A receita
---------

**Nota:** Download this example

Escolhas feitas
---------------

Eu escolhi usar o Layout de Grade para o Media Object (Objeto de Layout), pois ele permite controlar o layout em duas dimensões quando preciso. Isso significa que, quando temos um rodapé, com conteúdo curto acima, o rodapé pode ser empurrado para a parte inferior do Media Object (Objeto de Layout).

Outro motivo para usar o Layout de Gride é para que eu possa usar `fit-content` (en-US) para o tamanho da faixa de imagem. Usando `fit-content` com um tamanho máximo de 200 pixels, quando temos uma imagem pequena como o ícone, a faixa fica tão grande quanto o tamanho dessa imagem — o tamanho `max-content`. Se a imagem for maior, a faixa para de crescer em 200 pixels e, como a imagem possui `max-width`  de 100% aplicado, ele diminui para que continue a caber dentro da coluna.

Usando `grid-template-areas` (en-US) para alcançar o layout, eu posso ver o padrão no CSS. Eu defino minha grade quando tivermos uma largura máxima de 500 pixels, em dispositivos menores o Media Object empilha.

Uma opção para o padrão é girá-lo para mudar a imagem para o outro lado — isso é feito adicionando a classe `media-flip`, que define um modelo de grade invertida, fazendo com que o layout seja espelhado.

Quando aninhamos um media object (Objeto de Layout) dentro do outro, precisamons colocá-lo na segunda faixa no layout regular, e na primeira faixa quando invertida.

Fallbacks (Alternativas, Plano B)
---------------------------------

Existem várias alternativas possíveis para esse padrão, dependendo dos navegadores que você deseja oferecer suporte. Um bom exemplo seria flutuar a imagem para a esquerda e adicionar uma correção clara à caixa para garantir que ela contivesse as flutuações.

**Nota:** Baixe este exemplo

Depois que os elementos flutuantes se tornam itens da grade, o flutuador não se aplica mais; portanto, você não precisa fazer nada de especial para limpá-lo.

O que você precisará fazer é remover as margens aplicadas ao item e as larguras que não precisamos em um contexto de grade (nós temos o `gap` propriedade para controlá-lo em grades, e a faixa assume o controle do dimensionamento).

Recursos relevantes no MDN
--------------------------

* Layout Grade CSS
* Aprimoramento progressivo e Layout de Grid (en-US)
* Usando áreas de modelo de Grade (en-US)
* Conteúdo Adequado (en-US)
* Áreas de Modelo de Grade (en-US)
Compatibilidade com navegadores
-------------------------------

Os vários métodos de layout tem suporte diferente para os navegadores. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.

#### Áreas de Modelo de Grade

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### Flutuador

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Usando CSS transforms - CSS

Usando CSS transforms
=====================

Mudando coordenadas no espaço da tela o **CSS transforms** permite que a posição do conteúdo afetado seja alterada sem afetar o fluxo de informação da página. Elas são implementadas usando um conjunto de propriedades CSS que permitem alterações lineares em elementos HTML. Essas alterações incluem rotação, inclinações, alteração da escala e tradução tanto em 2D quanto em 3D.

Propriedades de CSS transforms
------------------------------

Duas propriedades principais são usadas para definir o CSS transforms: `transform` and `transform-origin`

`transform-origin`

Define a posição de origem do elemento. Por padrão esta posição é o canto superior esquerdo do elemento e pode ser movido. É utilizado para muitas alterações, como rotação, alteração de escala e inclinação, que precisam de um ponto especifico como parâmetro.

`transform`

Define qual alteração será feita no elemento. Pode-se usar mais de um efeito separado-os por um espaço. Tais efeitos serão aplicados um após o outro, na ordem determinada no código.

### Exemplo: Rotação

Este exemplo cria um iframe que permite que a página inicial do Google seja utilizada com uma rotação de 90 graus a partir do canto inferior esquerdo

Veja um exemplo funcionando
Veja uma foto do exemplo

```html
<div style="transform: rotate(90deg); transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="500" height="600"></iframe>
</div>
```

### Example: Inclinando e Movendo

Este exemplo cria um iframe que permite que você use a página inicial do Google inclinada em 10 graus no eixo X.

Veja um exemplo funcionando
View uma foto do exemplo

```html
<div
 style="transform: skewx(10deg) translatex(150px);
 transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="600" height="500"></iframe>
</div>
```

Propriedades especificas 3D do CSS
----------------------------------

Trabalhar com propriedades CSS em 3D é um pouco mais difícil. Você tem que começar configurando o espaço 3D dando perspectiva a ele, então você tem que configurar como os elementos 2D irão se comportar no espaço.

### Configurando uma perspectiva

O primeiro elemento a ser configurado é a perspectiva. É ela a responsável pela sensação de 3D. Quanto mais longe o objeto estiver do usuário, menor ele é.

Quanto será a sensação de encolhimento é definida pela propriedade `perspective` (en-US). Quanto menor o valor, mais profundidade terá o objeto.

##### HTML

O HTML abaixo cria quatro cópias da mesma caixa, com a perspectiva definida em valores diferentes.

```html
<table>
  <tbody>
    <tr>
      <th><code>perspective: 250px;</code></th>
      <th><code>perspective: 350px;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers250">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers350">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>perspective: 500px;</code></th>
      <th><code>perspective: 650px;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers500">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers650">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
```

##### CSS

O CSS estabelece classes que podem ser usadas para definir a perspectiva a diferentes distâncias. Ele também inclui classes para a caixa do recipiente e o próprio cubo, bem como cada uma de suas faces.

```css
/\* Shorthand classes for different perspective values \*/
.pers250 {
  perspective: 250px;
}
.pers350 {
  perspective: 350px;
}
.pers500 {
  perspective: 500px;
}
.pers650 {
  perspective: 650px;
}
/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: none;
}
.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}
.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}
/\* Define each face based on direction \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}
.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}
/\* Make the table a little nicer \*/
th,
p,
td {
  background-color: #eeeeee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}
```

##### Resultado

O segundo elemento a ser configurado é a posição do espectador, com a propriedade `perspective-origin` (en-US). Por padrão, a perspectiva está centrada no telespectador, o que nem sempre é adequado.

#### Mudando a origem da perspectiva

Este exemplo mostra cubos com valores populares do `perspective-origin`.

##### HTML

```html
<section>
  <figure>
    <figcaption><code>perspective-origin: top left;</code></figcaption>
    <div class="container">
      <div class="cube potl">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: top;</code></figcaption>
    <div class="container">
      <div class="cube potm">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: top right;</code></figcaption>
    <div class="container">
      <div class="cube potr">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: left;</code></figcaption>
    <div class="container">
      <div class="cube poml">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: 50% 50%;</code></figcaption>
    <div class="container">
      <div class="cube pomm">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: right;</code></figcaption>
    <div class="container">
      <div class="cube pomr">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: bottom left;</code></figcaption>
    <div class="container">
      <div class="cube pobl">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: bottom;</code></figcaption>
    <div class="container">
      <div class="cube pobm">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: bottom right;</code></figcaption>
    <div class="container">
      <div class="cube pobr">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: -200% -200%;</code></figcaption>
    <div class="container">
      <div class="cube po200200neg">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: 200% 200%;</code></figcaption>
    <div class="container">
      <div class="cube po200200pos">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: 200% -200%;</code></figcaption>
    <div class="container">
      <div class="cube po200200">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>
</section>
```

##### CSS

```css
/\* perspective-origin values (unique per example) \*/
.potl {
  perspective-origin: top left;
}
.potm {
  perspective-origin: top;
}
.potr {
  perspective-origin: top right;
}
.poml {
  perspective-origin: left;
}
.pomm {
  perspective-origin: 50% 50%;
}
.pomr {
  perspective-origin: right;
}
.pobl {
  perspective-origin: bottom left;
}
.pobm {
  perspective-origin: bottom;
}
.pobr {
  perspective-origin: bottom right;
}
.po200200neg {
  perspective-origin: -200% -200%;
}
.po200200pos {
  perspective-origin: 200% 200%;
}
.po200200 {
  perspective-origin: 200% -200%;
}
/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 100px;
  height: 100px;
  margin: 24px;
  border: none;
}
.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective: 300px;
  transform-style: preserve-3d;
}
.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}
/\* Define each face based on direction \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}
.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}
/\* Make the layout a little nicer \*/
section {
  background-color: #eee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```

##### Resultado

Feito isso, você pode trabalhar com elementos 3D.

### Elementos 2D em espaço 3D

Veja também
-----------

* Usando deviceorientation com 3D Transforms


Seletor de cores - CSS

Seletor de cores
================

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.

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:

* Aplicando cores para elementos HTML com CSS (en-US)
* Fundamentação de textos e estilo de fonte (en-US)
* Estilização de bordas com CSS (en-US)
* Mudando estilos de cores de fundo com CSS (en-US)
* Cores e contrastes de cores (en-US)


Aplicando cores a elementos HTML usando CSS - CSS

Aplicando cores a elementos HTML usando CSS
===========================================

Este artigo é uma cartilha que apresenta cada uma das maneiras pelas quais as cores CSS podem ser usadas em HTML.

O uso da cor é uma forma fundamental de expressão humana. As crianças experimentam a cor antes mesmo de terem a destreza manual para desenhar. Talvez seja por isso que a cor é uma das primeiras coisas que as pessoas muitas vezes querem experimentar quando aprendem a desenvolver sites. Com CSS, há várias maneiras de adicionar cor aos seus elementos HTML para criar exatamente a aparência desejada.

Vamos abordar a maior parte do que você precisa saber ao usar cores, incluindo uma lista do que você pode colorir e quais propriedades CSS estão envolvidas, como você descreve as cores, e como realmente usar cores em folhas de estilo e em scripts. Também veremos como deixar o usuário escolher uma cor.

Em seguida, encerraremos as coisas com uma breve discussão sobre como usar cores com sabedoria: como selecionar cores apropriadas, tendo em mente as necessidades de pessoas com diferentes capacidades visuais.

Coisas que podem ter cor
------------------------

No nível dos elementos, tudo em HTML pode ter cores aplicadas. Em vez disso, vamos ver as coisas em termos dos tipos de coisas que são desenhadas nos elementos, como texto e bordas e assim por diante. Para cada um, veremos uma lista das propriedades CSS que aplicam cores a eles.

Em um nível fundamental, a propriedade `color` define a cor de primeiro plano do conteúdo de um elemento HTML e a propriedade `background-color` define a cor de fundo do elemento. Estes podem ser usados em praticamente qualquer elemento.

### Texto

Sempre que um elemento é renderizado, essas propriedades são usadas para determinar a cor do texto, seu plano de fundo e quaisquer decorações no texto.

`color`

A cor a ser usada ao desenhar o texto e quaisquer decorações de texto (en-US) (como a adição de sublinhados ou sublinhados, linhas tachadas, e assim por diante.

`background-color`

A cor de fundo do texto.

`text-shadow`

Configura um efeito de sombra aplicado ao texto. Entre as opções para os aspectos da sombra, está a cor base da sombra (que será então desfocada e mesclada com o plano de fundo, com base nos outros parâmetros). Veja Sombras projetadas em texto (en-US) para descobrir mais.

`text-decoration-color` (en-US)

Por padrão, as decorações de texto (como sublinhados, tachados, etc.) usam a propriedade `color` como suas cores. No entanto, você pode substituir esse comportamento e usar uma cor diferente para eles com a propriedade `text-decoration-color`.

`text-emphasis-color` (en-US)

A cor a ser usada ao desenhar símbolos de ênfase adjacentes a cada caractere no texto. Isso é usado principalmente ao desenhar texto para idiomas do Leste Asiático.

`caret-color` (en-US)

A cor a ser usada ao desenhar o caret (às vezes chamado de cursor de entrada de texto) dentro do elemento. Isso só é útil em elementos que são editáveis, como `<input>` e `<textarea>` ou elementos cujo atributo HTML `contenteditable` está definido.

### Caixas

Cada elemento é uma caixa com algum tipo de conteúdo e tem um fundo e uma borda além de qualquer conteúdo que a caixa possa ter.

Borders

Consulte a seção Borders para obter uma lista das propriedades CSS que você pode usar para definir as cores das bordas de uma caixa.

`background-color`

A cor de fundo a ser usada em áreas do elemento que não possuem conteúdo de primeiro plano.

`column-rule-color` (en-US)

A cor a ser usada ao desenhar a linha que separa as colunas do texto.

`outline-color` (en-US)

A cor a ser usada ao desenhar um contorno ao redor da parte externa do elemento. Esse contorno é diferente da borda, pois não recebe espaço reservado para ele no documento (portanto, pode se sobrepor a outro conteúdo). Geralmente é usado como indicador de foco, para mostrar qual elemento receberá eventos de entrada.

### Bordas

Qualquer elemento pode ter uma borda (en-US) desenhada em torno dele. Uma borda de elemento básico é uma linha desenhada ao redor das bordas do conteúdo do elemento. Consulte Propriedades do Box (en-US) para saber mais sobre a relação entre elementos e suas bordas, e o artigo Estilizando bordas usando CSS (en-US) para saber mais sobre como aplicar estilos a bordas.

Você pode usar a propriedade abreviada `border` (en-US), que permite configurar tudo sobre o borda de uma só vez (incluindo recursos não coloridos de bordas, como sua largura (en-US), estilo (en-US) (sólido, tracejado, etc.), e assim por diante.

`border-color` (en-US)

Especifica uma única cor a ser usada para cada lado da borda do elemento.

`border-left-color` (en-US), `border-right-color` (en-US), `border-top-color` (en-US) e `cor da borda inferior`

Permite definir a cor do lado correspondente da borda do elemento.

`border-block-start-color` (en-US) e `border-block-end-color` (en-US)

Com estes, você pode definir a cor usada para desenhar as bordas que estão mais próximas do início e do fim do bloco que a borda circunda. Em um modo de escrita da esquerda para a direita (como a forma como o inglês é escrito), a borda inicial do bloco é a borda superior e o final do bloco é a parte inferior. Isso difere do início e do fim embutidos, que são as bordas esquerda e direita (correspondendo a onde cada linha de texto na caixa começa e termina).

`border-inline-start-color` (en-US) e `border-inline-end-color` (en-US)

Permitem colorir as bordas da borda mais próximas ao início e ao final do início das linhas de texto dentro da caixa. De que lado isso está irá variar dependendo das propriedades `writing-mode`, `direction` (en-US) e `text-orientation` (en-US), que são normalmente (mas nem sempre) usado para ajustar a direcionalidade do texto com base no idioma exibido. Por exemplo, se o texto da caixa estiver sendo renderizado da direita para a esquerda, a cor da borda em linha será aplicada ao lado direito da borda.

### Outras formas de usar cores

CSS não é a única tecnologia da web que suporta cores. Existem tecnologias gráficas disponíveis na web que também suportam cores.

A API do Canvas

Permite desenhar gráficos de bitmap 2D em um elemento `<canvas>`. Veja nosso tutorial do Canvas para saber mais.

SVG (Gráficos vetoriais escaláveis)

permite desenhar imagens usando comandos que desenham formas, padrões e linhas específicos para produzir uma imagem. Os comandos SVG são formatados como XML e podem ser incorporados diretamente em uma página da Web ou podem ser colocados na página usando o elemento `<img>`, como qualquer outro tipo de imagem.

WebGL

A Biblioteca de gráficos da Web é uma API baseada em OpenGL ES para desenhar gráficos 2D e 3D de alto desempenho na Web. Veja nosso tutorial WebGL (en-US) para saber mais.

Como descrever uma cor
----------------------

Para representar uma cor em CSS, você precisa encontrar uma maneira de traduzir o conceito analógico de "cor" em uma forma digital que um computador possa usar. Isso geralmente é feito dividindo a cor em componentes, como quanto de cada um de um conjunto de cores primárias deve ser misturado ou quão brilhante é a cor. Como tal, existem várias maneiras de descrever cores em CSS.

Para uma discussão mais detalhada de cada um dos tipos de valor de cor, veja a referência para a unidade CSS `<color>`.

### Palavras-chave

Um conjunto de nomes de cores padrão foi definido, permitindo que você use essas palavras-chave em vez de representações numéricas de cores se você optar por fazer isso e houver uma palavra-chave representando a cor exata que você deseja usar. As palavras-chave de cores incluem as cores primárias e secundárias padrão (como `red`, `blue` ou `orange`), tons de cinza (de `black` a `white`, incluindo cores como `darkgray` e `lightgrey`), e uma variedade de outras cores misturadas, incluindo `lightseagreen`, `cornflowerblue` e `rebeccapurple`.

Veja Palavras-chave de cores para uma lista de todas as palavras-chave de cores disponíveis.

### valores RGB

Existem três maneiras de representar uma cor RGB em CSS.

#### Notação de string hexadecimal

A notação de string hexadecimal representa uma cor usando dígitos hexadecimais para representar cada um dos componentes de cor (vermelho, verde e azul). Também pode incluir um quarto componente: o canal alfa (ou opacidade). Cada componente de cor pode ser representado como um número entre 0 e 255 (0x00 e 0xFF) ou, opcionalmente, como um número entre 0 e 15 (0x0 e 0xF). Todos os componentes *devem* ser especificados usando o mesmo número de dígitos. Se você usar a notação de um dígito, a cor final será calculada usando o dígito de cada componente duas vezes; ou seja, `"#D"` torna-se `"#DD"` ao desenhar.

Uma cor em notação de string hexadecimal sempre começa com o caractere `"#"`. Depois disso vêm os dígitos hexadecimais do código de cores. A string não diferencia maiúsculas de minúsculas.

`"#rrggbb"`

Especifica uma cor totalmente opaca cujo componente vermelho é o número hexadecimal `0xrr`, o componente verde é `0xgg` e o componente azul é `0xbb`.

`"#rrggbbaa"`

Especifica uma cor cujo componente vermelho é o número hexadecimal `0xrr`, componente verde é `0xgg` e composição azulente é `0xbb`. O canal alfa é especificado por `0xaa`; quanto menor for esse valor, mais translúcida será a cor.

`"#rgb"`

Especifica uma cor cujo componente vermelho é o número hexadecimal `0xrr`, o componente verde é `0xgg` e o componente azul é `0xbb`.

`"#rgba"`

Especifica uma cor cujo componente vermelho é o número hexadecimal `0xrr`, o componente verde é `0xgg` e o componente azul é `0xbb`. O canal alfa é especificado por `0xaa`; quanto menor for esse valor, mais translúcida será a cor.

Como exemplo, você pode representar a cor opaca azul brilhante como `"#0000ff"` ou `"#00f"`. Para torná-lo 25% opaco, você pode usar `"#0000ff44"` ou `"#00f4"`.

#### Notação funcional RGB

A notação funcional RGB (Vermelho/Verde/Azul), como a notação de string hexadecimal, representa cores usando seus componentes vermelho, verde e azul (assim como, opcionalmente, um componente de canal alfa para opacidade). No entanto, em vez de usar uma string, a cor é definida usando a função CSS `rgb()`. Esta função aceita como parâmetros de entrada os valores dos componentes vermelho, verde e azul e um quarto parâmetro opcional, o valor do canal alfa.

Os valores legais para cada um desses parâmetros são:

`vermelho`, `verde` e `azul`

Cada um deve ter um valor `<integer>` (en-US) entre 0 e 255 (inclusive), ou um `<percentage>` (en-US) de 0% a 100%.

`alfa`

O canal alfa é um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Você também pode especificar uma porcentagem em que 0% é igual a 0,0 e 100% é igual a 1,0.

Por exemplo, um vermelho brilhante que é 50% opaco pode ser representado como `rgb(255, 0, 0, 0.5)` ou `rgb(100%, 0, 0, 50%)`.

### Notação funcional HSL

Designers e artistas geralmente preferem trabalhar usando o método de cores HSL (Hue/Saturation/Luminosity). Na web, as cores HSL são representadas usando a notação funcional HSL. A função CSS `hsl()` é muito semelhante à função `rgb()` em uso de outra forma.

O diagrama abaixo mostra um cilindro de cor HSL. Hue define a cor real com base na posição ao longo de uma color wheel (en-US) circular que representa as cores do espectro visível. A saturação é uma porcentagem de quanto do caminho entre ser um tom de cinza e ter a quantidade máxima possível do tom fornecido. À medida que o valor da luminância (ou luminosidade) aumenta, a cor passa do mais escuro possível para o mais claro possível (do preto para o branco). Imagem cortesia do usuário SharkD na Wikipedia, distribuído sob a licença CC BY-SA 3.0.

![cilindro de cores HSL](/pt-BR/docs/Web/CSS/CSS_colors/Applying_color/640px-hsl_color_solid_cylinder.png)

O valor do componente de matiz (H) de uma cor HSL é um ângulo do vermelho ao redor do amarelo, verde, ciano, azul e magenta (terminando de volta ao vermelho novamente em 360°) que identifica qual é a cor base. O valor pode ser especificado em qualquer unidade `<angle>` (en-US) suportada por CSS, incluindo graus (`deg`), radianos (`rad`), gradianos (`grad`), ou voltas (`virar`). Mas isso não controla o quão viva ou opaca, ou quão brilhante ou escura é a cor.

O componente de saturação (S) da cor especifica qual porcentagem da cor final é composta pelo matiz especificado. O restante é definido pelo nível de cinza fornecido pelo componente de luminância (L).

Pense nisso como criar a cor de tinta perfeita:

1. Você começa com a tinta base que é a intensidade máxima possível para uma determinada cor, como o azul mais intenso que pode ser representado pela tela do usuário. Este é o componente **matiz** (H): um valor que representa o ângulo ao redor do color wheel (en-US) para o matiz vívido que queremos usar como base.
2. Em seguida, selecione uma tinta em tons de cinza que corresponda ao brilho que você deseja que a cor seja; esta é a luminância. Você quer que seja muito brilhante e quase branco, ou muito escuro e mais próximo do preto, ou algo no meio? Isso é especificado usando uma porcentagem, onde 0% é perfeitamente preto e 100% é perfeitamente branco (independentemente da saturação ou matiz). Entre os valores há uma área cinza literal.
3. Agora que você tem uma tinta cinza e uma cor perfeitamente viva, precisa misturá-las. O componente de saturação (S) da cor indica qual porcentagem da cor final deve ser composta por aquela cor perfeitamente vívida. O restante da cor final é composto pela tinta cinza que representa a saturação.

Você também pode incluir opcionalmente um canal alfa, para tornar a cor menos de 100% opaca.

Aqui estão algumas cores de amostra em notação HSL:
```

table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
  text-align: left;
}

th {
  background-color: hsl(0, 0%, 75%);
}
```

```html
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notation</th>
      <th scope="col">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)</code></td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)</code></td>
      <td style="background-color: hsl(90, 100%, 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)</code></td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> </td>
    </tr>
  </tbody>
</table>
```

**Nota:** Quando você omite a unidade do matiz, assume-se que está em graus (`deg`).

### Notação funcional HWB

Assim como a notação funcional HSL acima, a função hwb() (en-US) usa o mesmo valor de matiz. Mas, em vez de claridade e saturação, você especifica valores de brancura e negritude em porcentagens. Os valores **não** são separados por vírgula e um valor alfa opcional pode ser incluído (deve ser precedido por uma barra `/`).

Aqui estão alguns exemplos de uso da notação HWB:

```css
/\* Todos esses exemplos especificam vários tons de verde-limão. \*/
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/\* Mesmo verde-limão, mas com valor alfa \*/
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
```

Usando cores
------------

Agora que você sabe quais propriedades CSS existem que permitem aplicar cores a elementos e os formatos que você pode usar para descrever cores, você pode juntar tudo isso para começar a usar cores. Como você deve ter visto na lista em Coisas que podem ter cor, há muitas coisas que você pode colorir com CSS. Vejamos isso de dois lados: usando a cor dentro de um stylesheet (en-US) e adicionando e alterando a cor usando o código JavaScript para alterar os estilos dos elementos.

### Especificando cores em folhas de estilo

A maneira mais fácil de aplicar cores aos elementos — e a maneira como você normalmente faz isso — é especificar as cores no CSS que é usado ao renderizar os elementos. Embora não usemos todas as propriedades mencionadas anteriormente, veremos alguns exemplos. O conceito é o mesmo em qualquer lugar que você use cores.

Vamos dar uma olhada em um exemplo, começando pelos resultados que estamos tentando alcançar:

#### HTML

O HTML responsável pela criação do exemplo acima é mostrado aqui:

```html
<div class="wrapper">
  <div class="box boxLeft">
    <p>Esta é a primeira caixa.</p>
  </div>
  <div class="box boxRight">
    <p>Esta é a segunda caixa.</p>
  </div>
</div>
```

Isso é bem simples, usando um `<div>` como um wrapper em torno do conteúdo, que consiste em mais dois `<div>`s, cada um com um estilo diferente com um único parágrafo (`<p>`) em cada caixa.

A mágica acontece, como sempre, no CSS, onde aplicaremos as cores para definir o layout do HTML acima.

#### CSS

Veremos o CSS para criar os resultados acima um por vez, para que possamos revisar as partes interessantes uma a uma.

```css
.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}
```

A classe `.wrapper` é usada para atribuir estilos ao `<div>` que inclui todos os nossos outros conteúdos. Isso estabelece o tamanho do contêiner usando `width` e `height` bem como seu `margin` e `padding` .

De mais interesse para nossa discussão aqui é o uso da propriedade `border` (en-US) para estabelecer uma borda ao redor da borda externa do elemento. Essa borda é uma linha sólida, com 6 pixels de largura, na cor `mediumturquoise`.

Nossas duas caixas coloridas compartilham várias propriedades em comum, então, a seguir, estabelecemos uma classe, `.box`, que define essas propriedades compartilhadas:

```css
.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

Resumidamente, `.box` estabelece o tamanho de cada caixa, bem como a configuração da fonte utilizada dentro dela. Também aproveitamos o CSS Flexbox para centralizar facilmente o conteúdo de cada caixa. Ativamos o modo `flex` usando `display: flex` e definimos `justify-content` (en-US) e `align-items` para `center`. Então podemos criar uma classe para cada umas duas caixas que definem as propriedades que diferem entre as duas.

```css
.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}
```

A classe `.boxLeft` — que, inteligentemente, é usada para estilizar a caixa à esquerda — flutua a caixa para a esquerda e, em seguida, configura as cores:

* A cor de fundo da caixa é definida alterando o valor da propriedade CSS `background-color` para `rgb(245, 130, 130)`.
* Um contorno é definido para a caixa. Ao contrário do `border` mais comumente usado, `outline` não afeta o layout; ele desenha por cima de qualquer coisa que esteja fora da caixa do elemento em vez de abrir espaço como `border`. Este contorno é uma linha vermelha escura sólida com dois pixels de espessura. Observe o uso da palavra-chave `darkred` ao especificar a cor.
* Observe que não estamos definindo explicitamente a cor do texto. Isso significa que o valor de `color` será herdado do elemento mais próximo que o define. Por padrão, isso é preto.

```css
.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}
```

**Nota:** ao tentar mostrá-lo no Safari, ele não será exibido corretamente. Porque o Safari não suporta `text-decoration: underline wavy #88ff88`.

Finalmente, a classe `.boxRight` descreve as propriedades únicas da caixa que é desenhada à direita. Ele está configurado para flutuar a caixa para a direita para que ela apareça ao lado da caixa anterior. Em seguida, as seguintes cores são estabelecidas:

* O `background-color` é definido usando o valor HSL especificado usando `hsl(270deg, 50%, 75%)`. Esta é uma cor roxa média.
* O `outline` da caixa é usado para especificar que a caixa deve ser colocada em uma linha tracejada de quatro pixels de espessura cuja cor é um roxo um pouco mais profundo (`rgb(110, 20, 120)`).
* A cor do primeiro plano (texto) é especificada definindo a propriedade `color` para `hsl(0deg, 100%, 100%)`. Esta é uma das muitas maneiras de especificar a cor branca.
* Adicionamos uma linha ondulada verde sob o texto com `text-decoration`.
* Finalmente, um pouco de sombra é adicionada ao texto usando `text-shadow`. Seu parâmetro `color` é definido como `black`.
Deixando o usuário escolher uma cor
-----------------------------------

Há muitas situações em que seu site pode precisar permitir que o usuário selecione uma cor. Talvez você tenha uma interface de usuário personalizável ou esteja implementando um aplicativo de desenho. Talvez você tenha texto editável e precise deixar o usuário escolher a cor do texto. Ou talvez seu aplicativo permita que o usuário atribua cores a pastas ou itens. Embora historicamente tenha sido necessário implementar seu próprio seletor de cores, o HTML agora oferece suporte para navegadores fornecerem um para seu uso por meio do `<input>`, usando `"color"` como o valor de seu atributo `type`.

O elemento `<input>` representa uma cor apenas na notação de string hexadecimal abordada acima.

### Exemplo: Escolhendo uma cor

Vejamos um exemplo simples, no qual o usuário pode escolher uma cor. Conforme o usuário ajusta a cor, a borda ao redor do exemplo muda para refletir a nova cor. Após finalizar e escolher a cor final, o valor do seletor de cores é exibido.

**Nota:** no macOS, você indica que finalizou a seleção da cor fechando a janela do seletor de cores.

#### HTML

O HTML aqui cria uma caixa que contém um controle seletor de cores (com um rótulo criado usando o elemento `<label>`) e um elemento de parágrafo vazio (`<p>`) no qual vamos produzir algum texto do nosso código JavaScript.

```html
<div id="box">
  <label for="colorPicker">Cor da borda:</label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output"></p>
</div>
```

#### CSS

O CSS estabelece um tamanho para a caixa e alguns estilos básicos para as aparências. A borda também é estabelecida com uma largura de 2 pixels e uma cor de borda.

```css
#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    "sans-serif";
}
```

#### JavaScript

O script aqui lida com a tarefa de atualizar a cor inicial da borda para corresponder ao valor do seletor de cores. Em seguida, dois manipuladores de eventos são adicionados para lidar com a entrada do elemento `<input type="color">` (en-US).

```js
const colorPicker = document.getElementById("colorPicker");
const box = document.getElementById("box");
const output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener(
  "input",
  (event) => {
    box.style.borderColor = event.target.value;
  },
  false,
);

colorPicker.addEventListener(
  "change",
  (event) => {
    output.innerText = `Cor definida como ${colorPicker.value}.`;
  },
  false,
);
```

O evento `input` é enviado toda vez que o valor do elemento muda; ou seja, toda vez que o usuário ajusta a cor no seletor de cores. Cada vez que esse evento chega, definimos a cor da borda da caixa para corresponder ao valor atual do seletor de cores.

O evento `change` é recebido quando o valor do seletor de cores é finalizado. Nós respondemos definindo o conteúdo do elemento `<p>` com o ID `"output"` para uma string que descreve a cor finalmente selecionada.

Usando cores com sabedoria
--------------------------

Fazer as escolhas certas ao selecionar as cores ao projetar um site pode ser um processo complicado, especialmente se você não estiver bem fundamentado em arte, design ou pelo menos teoria básica de cores. A escolha errada de cores pode tornar seu site pouco atraente ou, pior ainda, deixar o conteúdo ilegível devido a problemas de contraste ou cores conflitantes. Pior ainda, se usar as cores erradas pode resultar na inutilização do seu conteúdo por pessoas com certos problemas de visão, principalmente daltonismo.

### Encontrando as cores certas

Criar as cores certas pode ser complicado, especialmente sem treinamento em arte ou design. Felizmente, existem ferramentas disponíveis que podem ajudá-lo. Embora eles não possam substituir ter um bom designer ajudando você a tomar essas decisões, eles definitivamente podem ajudá-lo a começar.

#### Cor básica

O primeiro passo é escolher sua **cor base**. Esta é a cor que de alguma forma define o seu site ou o assunto do site. Assim como associamos o verde à bebida Mountain Dew e pode-se pensar na cor azul em relação ao céu ou ao oceano, escolhendo uma cor base apropriada para representar seu site é um bom lugar para começar. Há muitas maneiras de selecionar uma cor base; algumas ideias incluem:

* Uma cor que esteja naturalmente associada ao tema do seu conteúdo, como a cor existente identificada com um produto ou ideia ou uma cor representativa da emoção que você deseja transmitir.
* Uma cor que vem de imagens associadas ao assunto do seu conteúdo. Se você estiver criando um site sobre um determinado item ou produto, escolha uma cor que esteja fisicamente presente nesse item.
* Navegue por sites que permitem que você veja muitas paletas de cores e imagens existentes para encontrar inspiração.

Ao tentar decidir sobre uma cor base, você pode descobrir que as extensões do navegador que permitem selecionar cores do conteúdo da Web podem ser particularmente úteis. Alguns deles são projetados especificamente para ajudar nesse tipo de trabalho. Por exemplo, o site ColorZilla oferece uma extensão (Chrome / [Firefox](https:// www.colorzilla.com/firefox/)) que oferece uma ferramenta conta-gotas para escolher cores da web. Também pode obter médias das cores dos pixels em áreas de vários tamanhos ou até mesmo em uma área selecionada da página.

**Nota:** A vantagem da média de cores pode ser que, muitas vezes, o que parece uma cor sólida é, na verdade, um número surpreendentemente variado de cores relacionadas, todas usadas em conjunto, misturando-se para criar o efeito desejado. Escolher apenas um desses pixels pode resultar na obtenção de uma cor que, por si só, parece muito fora do lugar.

#### Confeccionando a paleta

Depois de decidir a cor base, existem muitas ferramentas on-line que podem ajudá-lo a criar uma paleta de cores apropriadas para usar junto com a cor base, aplicando a teoria das cores à cor base para determinar as cores adicionadas apropriadas. Muitas dessas ferramentas também suportam a visualização das cores filtradas para que você possa ver como elas seriam para pessoas com várias formas de daltonismo. Consulte Cor e acessibilidade para uma breve explicação de por que isso é importante.

Alguns exemplos (todos gratuitos para uso a partir do momento em que esta lista foi revisada pela última vez):

* Ferramenta seletora de cores do MDN
* Paletton
* Roda de cores on-line do Adobe Color CC

Ao projetar sua paleta, lembre-se de que, além das cores que essas ferramentas normalmente geram, você provavelmente também precisará adicionar algumas cores neutras centrais, como branco (ou quase branco), preto (ou quase preto), e algum número de tons de cinza.

**Nota:** Normalmente, é muito melhor usar o menor número de cores possível. Ao usar cores para acentuar em vez de adicionar cores a tudo na página, você mantém seu conteúdo fácil de ler e as cores que você usa têm muito mais impacto.

### Recursos da teoria das cores

Uma revisão completa da teoria das cores está além do escopo deste artigo, mas há muitos artigos sobre a teoria das cores disponíveis, bem como cursos que você pode encontrar em escolas e universidades próximas. Alguns recursos úteis sobre a teoria das cores:

Ciência das cores (Khan Academy em associação com a Pixar)

Um curso online que apresenta conceitos como o que é a cor, como ela é percebida e como usar as cores para expressar ideias. Apresentado por artistas e designers da Pixar.

Teoria das cores na Wikipedia

Entrada da Wikipedia sobre teoria das cores, que tem muitas informações excelentes do ponto de vista técnico. Não é realmente um recurso para ajudá-lo com o processo de seleção de cores, mas ainda está cheio de informações úteis.

### Cor e acessibilidade

Existem várias maneiras pelas quais a cor pode ser um problema accessibility. O uso impróprio ou descuidado de cores pode resultar em um site ou aplicativo que uma porcentagem de seu público-alvo pode não ser capaz de usar adequadamente, resultando em perda de tráfego, perda de negócios e possivelmente até mesmo um problema de relações públicas. Portanto, é importante considerar cuidadosamente o uso da cor.

Você deve fazer pelo menos uma pesquisa básica sobre daltonismo. Existem vários tipos; o mais comum é o daltonismo vermelho-verde, que faz com que as pessoas não consigam diferenciar entre as cores vermelho e verde. Existem outras, também, que vão desde a incapacidade de distinguir certas cores até a total incapacidade de ver as cores.

**Nota:** A regra mais importante: nunca use a cor como a única maneira de saber algo. Se, por exemplo, você indicar sucesso ou falha de uma operação alterando a cor de uma forma de branco para verde para sucesso e vermelho para falha, os usuários com daltonismo vermelho-verde não poderão usar seu site corretamente. Em vez disso, talvez use texto e cor juntos, para que todos possam entender o que está acontecendo.

Para obter mais informações sobre daltonismo, consulte os seguintes artigos:

* Medline Plus: Daltonismo (Instituto Nacional de Saúde dos Estados Unidos)
* Academia Americana de Oftalmologia: O que é daltonismo?
* Daltonismo e Web Design (Usability.gov: Departamento de Saúde e Serviços Humanos dos Estados Unidos)
### Exemplo de design de paleta

Vamos considerar um exemplo rápido de seleção de uma paleta de cores apropriada para um site. Imagine que você está construindo um site para um novo jogo que acontece no planeta Marte. Então, vamos fazer uma pesquisa no Google por fotos de Marte. Muitos bons exemplos de coloração marciana lá. Evitamos cuidadosamente as maquetes e as fotos dos filmes. E decidimos usar uma foto tirada por um dos landers de Marte que a humanidade estacionou na superfície nas últimas décadas, já que o jogo se passa na superfície do planeta. Usamos uma ferramenta de seleção de cores para selecionar uma amostra da cor que escolhemos.

Usando uma ferramenta conta-gotas, identificamos uma cor que gostamos e determinamos que a cor em questão é `#D79C7A`, que é uma cor vermelho-alaranjada apropriada que é tão estereotipada da superfície marciana.

Tendo selecionado nossa cor base, precisamos construir nossa paleta. Decidimos usar Paletton para criar as outras cores que precisamos. Ao abrir Paletton, vemos:

![Logo após carregar Paletton.](/pt-BR/docs/Web/CSS/CSS_colors/Applying_color/paletton1.png)

Em seguida, inserimos o código hexadecimal da nossa cor (`D79C7A`) na caixa "Base RGB" no canto inferior esquerdo da ferramenta:

![Após inserir a cor base](/pt-BR/docs/Web/CSS/CSS_colors/Applying_color/paletton2.png)

Agora vemos uma paleta monocromática baseada na cor que escolhemos na foto de Marte. Se você precisar de muitas cores relacionadas por algum motivo, é provável que sejam boas. Mas o que realmente queremos é uma cor de destaque. Algo que irá aparecer ao lado da cor base. Para encontrar isso, clicamos no botão "adicionar complementar" abaixo do menu que permite selecionar o tipo de paleta (atualmente "Monocromática"). Paletton calcula uma cor de destaque apropriada; clicar na cor de destaque no canto inferior direito nos diz que essa cor é `#508D7C`.

![Agora com cores complementares incluídas.](/pt-BR/docs/Web/CSS/CSS_colors/Applying_color/paletton3.png)

Se não estiver satisfeito com a cor que lhe é proposta, pode alterar o esquema de cores, para ver se encontra algo de que goste mais. Por exemplo, se não gostarmos da cor azul-esverdeada proposta, podemos clicar no ícone do esquema de cores Triad, que nos apresenta o seguinte:

![Esquema de cores da tríade selecionado](/pt-BR/docs/Web/CSS/CSS_colors/Applying_color/paletton4.png)

Esse azul acinzentado no canto superior direito parece muito bom. Clicando nele, descobrimos que é `#556E8D`. Isso seria usado como a cor de destaque, para ser usado com moderação para destacar as coisas, como em títulos ou no destaque de guias ou outros indicadores no site:

![Esquema de cores da tríade selecionado](/pt-BR/docs/Web/CSS/CSS_colors/Applying_color/paletton-color-detail.png)

Agora temos nossa cor base e nosso sotaque. Além disso, temos alguns tons complementares de cada um, caso precisemos deles para gradientes e afins. As cores podem então ser exportadas em um nvários formatos para que você possa utilizá-los.

Depois de ter essas cores, você provavelmente ainda precisará selecionar cores neutras apropriadas. A prática comum de design é tentar encontrar o ponto ideal onde haja contraste suficiente para que o texto seja nítido e legível, mas não contraste suficiente para se tornar áspero para os olhos. É fácil ir longe demais de uma forma ou de outra, portanto, certifique-se de obter feedback sobre suas cores depois de selecioná-las e ter exemplos delas em uso disponíveis. Se o contraste for muito baixo, seu texto tenderá a ficar desbotado pelo fundo, deixando-o ilegível, mas se o contraste for muito alto, o usuário poderá achar seu site berrante e desagradável de se ver.

### Cor, fundos, contraste e impressão

 O que parece bom na tela pode parecer muito diferente no papel.
 Além disso, a tinta pode ser cara e, se um usuário estiver imprimindo sua página, ele não precisará necessariamente de todos os fundos e usar sua preciosa tinta quando tudo o que importa é o próprio texto.
 A maioria dos navegadores, por padrão, remove imagens de fundo ao imprimir documentos.

Se as cores e imagens de fundo foram selecionadas com cuidado e/ou são cruciais para a utilidade do conteúdo, você pode usar a propriedade CSS `print-color-adjust` (en-US) para informar ao navegador que não deve fazer ajustes na aparência do conteúdo.

O valor padrão de `print-color-adjust`, `economy`, indica que o navegador tem permissão para fazer alterações de aparência conforme necessário para tentar otimizar a legibilidade e/ou economia de impressão do conteúdo, dado o tipo do dispositivo de saída para o qual o documento está sendo desenhado.

 Você pode definir `print-color-adjust` como `exact` para informar ao navegador que o elemento ou elementos nos quais você o usa foram projetados especificamente para funcionar melhor com as cores e imagens deixadas como estão.
 Com este conjunto, o navegador não alterará a aparência do elemento e o desenhará conforme indicado pelo seu CSS.

**Nota:** Não há garantia, porém, de que `print-color-adjust: exact` resultará em seu CSS sendo usado exatamente como fornecido.
 Se o navegador fornecer as preferências do usuário para alterar a saída (como uma caixa de seleção "não imprimir fundos" em uma caixa de diálogo de impressão), isso substituirá o valor de `print-color-adjust`.

Veja também
-----------

* Desenhando gráficos (en-US)
* Gráficos na web
* ferramenta seletora de cores do MDN