text-shadow - CSS

text-shadow
===========

Sumário
-------

A propriedade `text-shadow` acrescenta sombras ao texto. Ela aceita uma lista de sombras separadas por vírgula que serão aplicados ao texto e ao `text-decorations` do elemento.

Cada sombra é especificada como um deslocamento do texto, juntamente com valores opcionais de cor e raio de desfoque.

Multiplas sombras são aplicadas de frente-para-trás, com a primeira sombra especificada no topo.

Esta propriedade se aplica a ambos `::first-line` e `::first-letter` pseudo-elements.

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | a color plus three absolute lengths |
| Animation type | a shadow list |

Sintaxe
-------

```css
/\* deslocamento-x | deslocamento-y | raio-de-desfoque | cor \*/
text-shadow: 1px 1px 2px black;

/\* cor | deslocamento-x | deslocamento-y | raio-de-desfoque \*/
text-shadow: #ccc 1px 0 10px;

/\* deslocamento-x | deslogamento-y | cor \*/
text-shadow: 5px 5px #558abb;

/\* cor | deslocamento-x | deslocamento-y \*/
text-shadow: white 2px 5px;

/\* deslocamento-x | deslocamento-y
/\* Usa o padrão para cor e raio-de-desfoque \*/
text-shadow: 5px 10px;

/\* Valores globais \*/
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
```

### Valores

<cor>

Opcional. Pode ser especificado tanto antes quanto depois dos valores de deslocamento. Se a cor não é especificada, uma cor UA-chosen será usada.

**Nota:** Se voce quer garantir a consistência entre os navegadores, especifique explicitamente uma cor.

<offset-x> <offset-y>

 Obrigatório. These `<length>` values specify the shadow's offset from the text. `<offset-x>` specifies the horizontal distance; a negative value places the shadow to the left of the text. `<offset-y>` specifies the vertical distance; a negative value places the shadow above the text. If both values are `0`, then the shadow is placed behind the text (and may generate a blur effect when `<blur-radius>` is set).
 To find out what units you can use, see `<length>` (en-US).

<blur-radius>

Opcional. This is a `<length>` (en-US) value. If not specified, it defaults to `0`. The higher this value, the bigger the blur; the shadow becomes wider and lighter.

### Formal syntax
```

text-shadow =
  none                            | (en-US)
  [ (en-US) <color>? (en-US) && (en-US) <length> (en-US){2,3} (en-US) ] (en-US)# (en-US)

```

Exemplos
--------

```css
.red-text-shadow {
  text-shadow: red 0 -2px;
}
```

```html
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```

```css
.white-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    "Bitstream Charter",
    "URW Bookman L",
    "Century Schoolbook L",
    serif;
}
```

```html
<p class="white-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```

```css
.gold-on-gold {
  text-shadow:
    rgba(0, 0, 0, 0.1) -1px 0,
    rgba(0, 0, 0, 0.1) 0 -1px,
    rgba(255, 255, 255, 0.1) 1px 0,
    rgba(255, 255, 255, 0.1) 0 1px,
    rgba(0, 0, 0, 0.1) -1px -1px,
    rgba(255, 255, 255, 0.1) 1px 1px;
  color: gold;
  background: gold;
}
```

```html
<p class="gold-on-gold">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-shadow-property |

Compatibilidade do navegador
----------------------------

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

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

* `box-shadow`


:last-of-type - CSS

:last-of-type
=============

Sumário
-------

A CSS pseudo-class `:last-of-type` representa o último irmão com o nome de elemento dado na lista de filhos de seu elemento pai.

Syntax
------
```

element:last-of-type { style properties }
```

Exemplo
-------

Para selecionar o último elemento *em* dentro de um elemento `<p>`, você pode usar o seguinte:

```css
p em:last-of-type {
  color: lime;
}
```

```html
<p>
  <em>I'm not lime :(</em>
  <strong>I'm not lime :(</strong>
  <em>I'm lime :D</em>
  <strong>I'm also not lime :(</strong>
</p>

<p>
  <em>I'm not lime :(</em>
  <span><em>I am lime!</em></span>
  <strong>I'm not lime :(</strong>
  <em>I'm lime :D</em>
  <span><em>I am also lime!</em> <strike> I'm not lime </strike></span>
  <strong>I'm also not lime :(</strong>
</p>
```

...irá resultar em:

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

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

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

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

See also
--------

* `:nth-last-of-type` (en-US)
* `:first-of-type`
* `:nth-of-type`


CSS Box Model - CSS

CSS Box Model
=============

**CSS Box Model (Modelo de Caixa CSS)** é um módulo de CSS que define caixas retangulares, incluindo preenchimento (padding) e margem (margin), que são gerados por elementos e dispostos de acordo com o modelo de formato visual (en-US).

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

### Propriedades

#### Propriedades que controlam o fluxo de conteúdo em uma caixa

* `box-decoration-break` (en-US)
* `box-sizing`
* `overflow`
* `overflow-x` (en-US)
* `overflow-y` (en-US)

#### Propriedades que controlam o tamanho de uma caixa

* `height`
* `width`
* `max-height` (en-US)
* `max-width`
* `min-height`
* `min-width` (en-US)

#### Propriedades que controlam as margens de uma caixa

* `margin`
* `margin-bottom`
* `margin-left` (en-US)
* `margin-right` (en-US)
* `margin-top`

#### Propriedades que controlam o preenchimento (padding) de uma caixa

* `padding`
* `padding-bottom` (en-US)
* `padding-left`
* `padding-right` (en-US)
* `padding-top` (en-US)

#### Outras propriedades

* `box-shadow`
* `visibility`
Guias e ferramentas
-------------------

Introdução ao modelo de caixa CSS

Explicações de uma concepção fundamental no CSS, o modelo de caixa: descreve o sentido de margem, preenchimento, tambem como as diferentes áreas da caixa.

Dominando o colapso da margem

Na maioria dos casos, duas margens adjacentes são colapsadas em uma. Este artigo descreve quando isso acontecwe e como controlar isso.

Gerador de sombra de caixa (en-US)

Uma ferramenta interativa que permite criar sombras visualmente e gerar a sintaxe necessária para a propriedade `box-shadow`.

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

| Specification |
| --- |
| CSS Box Model Module Level 3  |


<display-internal> - CSS

<display-internal>
==================

Alguns modelos de layout, como `table` e `ruby` Alguns modelos de layout, como possuem uma estrutura interna complexa, com várias funções diferentes que seus filhos e descendentes podem preencher. Esta página define os valores de exibição "internos", que só têm significado nesse modo de layout específico.

Sintaxe
-------

Salvo indicação em contrário, o tipo de exibição interno e o tipo de exibição externo de elementos que usam esses valores de exibição são definidos para a palavra-chave fornecida.

`table-row-group`

Esses elementos se comportam como`<tbody>` (en-US) HTML elementos.

`table-header-group`

Esses elementos se comportam como`<thead>` (en-US) HTML elementos.

`table-footer-group`

Esses elementos se comportam como `<tfoot>` HTML elementos.

`table-row`

Esses elementos se comportam como `<tr>` (en-US) HTML elementos.

`table-cell`

Esses elementos se comportam como `<td>` (en-US) HTML elementos.

`table-column-group`

Esses elementos se comportam como`<colgroup>` (en-US) HTML elementos.

`table-column`

Esses elementos se comportam como `<col>` (en-US) HTML elementos.

`table-caption`

Esses elementos se comportam como`<caption>` HTML elementos.

`ruby-base`
Experimental

Esses elementos se comportam como`<rb>` (en-US) HTML elementos.

`ruby-text`
Experimental

Esses elementos se comportam como `<rt>` (en-US) HTML elementos.

`ruby-base-container`
Experimental

Esses elementos se comportam como`<rbc>` HTML elementos gerado como caixas anônimas.

`ruby-text-container`
Experimental

Esses elementos se comportam como `<rtc>` (en-US) HTML elementos.

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

### Suporte de valores de tabela

`table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, and `table-row-group`

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

### Suporte de valores de rubi

`ruby`, `ruby-base`, `ruby-base-container`, `ruby-text`, and `ruby-text-container`

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

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

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-box>`
    + `<display-legacy>`


transform-origin - CSS

transform-origin
================

A propriedade **`transform-origin`** define a origem das transformações de um elemento no CSS.

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

A origem da transformação é o ponto em torno do qual uma transformação é aplicada. Por exemplo, a origem da transformação da função `rotate()` é o centro de rotação.

Na prática, essa propriedade envolve um par de translações em torno das outras transformações do elemento. A primeira translação move a origem da transformação para a origem real em

(
0
,
0
)

. Em seguida, as outras transformações são aplicadas e, porque a origem da transformação está em

(
0
,
0
)

, essas transformações atuam em relação à origem da transformação. Por fim, a translação oposta é aplicada, movendo a origem da transformação de volta à sua localização original. Consequentemente, essa definição

```css
transform-origin: -100% 50%;
transform: rotate(45deg);
```

resulta na mesma transformação que

```css
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
```

Lendo da direita para a esquerda, `translate(100%, -50%)` é a tradução para trazer a origem da transformação para a origem real, `rotate(45deg)` é a transformação original e `translate(-100%, 50%)` é a tradução para restaurar a origem da transformação à sua localização original.

Por padrão, a origem de uma transformação é `center` (centro).

Sintaxe
-------

```css
/\* One-value syntax \*/
transform-origin: 2px;
transform-origin: bottom;

/\* x-offset | y-offset \*/
transform-origin: 3cm 2px;

/\* x-offset-keyword | y-offset \*/
transform-origin: left 2px;

/\* x-offset-keyword | y-offset-keyword \*/
transform-origin: right top;

/\* y-offset-keyword | x-offset-keyword \*/
transform-origin: top right;

/\* x-offset | y-offset | z-offset \*/
transform-origin: 2px 30% 10px;

/\* x-offset-keyword | y-offset | z-offset \*/
transform-origin: left 5px -3px;

/\* x-offset-keyword | y-offset-keyword | z-offset \*/
transform-origin: right bottom 2cm;

/\* y-offset-keyword | x-offset-keyword | z-offset \*/
transform-origin: bottom right 2cm;

/\* Global values \*/
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: revert-layer;
transform-origin: unset;
```

A propriedade `transform-origin` pode ser especificada usando um, dois ou três valores, onde cada valor representa um deslocamento. Deslocamentos que não são definidos explicitamente são redefinidos para seus respectivos valores iniciais.

Se um único valor `<length>` (en-US) ou `<percentage>` (en-US) for definido, ele representa o deslocamento horizontal.

Se dois ou mais valores forem definidos e nenhum deles for uma palavra-chave, ou a única palavra-chave utilizada for `center`, então o primeiro valor representa o deslocamento horizontal e o segundo representa o deslocamento vertical.

* Sintaxe de um valor:
    + O valor deve ser um `<length>` (en-US), um `<percentage>` (en-US), ou uma das palavras-chave `left`, `center`, `right`, `top` e `bottom`.
* Sintaxe de dois valores:
    + Um valor deve ser um `<length>` (en-US), um `<percentage>` (en-US), ou uma das palavras-chave `left`, `center` e `right`.
    + O outro valor deve ser um `<length>` (en-US), um `<percentage>` (en-US), ou uma das palavras-chave `top`, `center` e `bottom`.
* Sintaxe de três valores:
    + Os dois primeiros valores são os mesmos da sintaxe de dois valores.
    + O terceiro valor deve ser um `<length>` (en-US). Ele representa sempre o deslocamento Z.
### Valores

*x-offset*

É um `<length>` (en-US) ou um `<percentage>` (en-US) que descreve a distância a partir da borda esquerda da caixa onde a origem da transformação é definida.

*offset-keyword*

É uma das palavras-chave `left`, `right`, `top`, `bottom` ou `center` que descreve o deslocamento correspondente.

*y-offset*

É um `<length>` (en-US) ou um `<percentage>` (en-US) que descreve a distância a partir da borda superior da caixa onde a origem da transformação é definida.

*x-offset-keyword*

É uma das palavras-chave `left`, `right` ou `center` que descreve a distância a partir da borda esquerda da caixa onde a origem da transformação é definida.

*y-offset-keyword*

É uma das palavras-chave `top`, `bottom` ou `center` que descreve a distância a partir da borda superior da caixa onde a origem da transformação é definida.

*z-offset*

É um `<length>` (en-US) (e nunca um `<percentage>` (en-US) que tornaria a afirmação inválida) que descreve a distância do olho do usuário onde a origem z=0 é definida.

As palavras-chave são atalhos convenientes e correspondem aos seguintes valores de `<percentage>` (en-US):

| Keyword | Value |
| --- | --- |
| `left` | `0%` |
| `center` | `50%` |
| `right` | `100%` |
| `top` | `0%` |
| `bottom` | `100%` |

Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | `50% 50% 0` |
| Aplica-se a | qualquer elemento transformavel |
| Inherited | não |
| Percentages | refer to the size of bounding box |
| Computed value | for `length` (en-US) the absolute value, otherwise a percentage |
| Animation type | simple list of length, percentage, or calc |

**Nota:** O valor inicial de `transform-origin` é `0 0` para todos os elementos SVG, exceto para elementos `<svg>` raiz e elementos `<svg>` que são filhos diretos de um elemento foreignObject (en-US), cujo `transform-origin` é `50% 50%`, assim como outros elementos CSS. Consulte o atributo transform-origin (en-US) do SVG para obter mais informações.

Sintaxe formal
--------------
```

transform-origin =
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) <length> (en-US)? (en-US)  | (en-US)
  [ (en-US) [ (en-US) center | (en-US) left | (en-US) right ] (en-US) && (en-US) [ (en-US) center | (en-US) top | (en-US) bottom ] (en-US) ] (en-US) <length> (en-US)? (en-US)

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

```

Exemplos
--------

### Uma demonstração de vários valores de transformação

Este exemplo mostra o efeito de escolher diferentes valores de `transform-origin` para uma variedade de funções de transformação.
```

<div class="container">
  <div class="example">
    <div class="box box1"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: none;
  </pre>

  <div class="example">
    <div class="box box2"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
  </pre>

  <div class="example">
    <div class="box box3"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box4"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 100% 100%;
  </pre>

  <div class="example">
    <div class="box box5"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: -1em -3em;
  </pre>

  <div class="example">
    <div class="box box6"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
  </pre>

  <div class="example">
    <div class="box box7"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box8"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box9"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: skewX(50deg);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box10"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: skewY(50deg);
transform-origin: 100% -30%;
  </pre>
</div>
```

```
.container {
  display: grid;
  grid-template-columns: 200px 100px;
  gap: 20px;
}

.example {
  position: relative;
  margin: 0 2em 4em 5em;
}

.box {
  display: inline-block;
  width: 3em;
  height: 3em;
  border: solid 1px;
  background-color: palegreen;
}

.original {
  position: absolute;
  left: 0;
  opacity: 20%;
}

.box1 {
  transform: none;
}

.box2 {
  transform: rotate(30deg);
}

.box3 {
  transform: rotate(30deg);
  transform-origin: 0 0;
}

.box4 {
  transform: rotate(30deg);
  transform-origin: 100% 100%;
}

.box5 {
  transform: rotate(30deg);
  transform-origin: -1em -3em;
}

.box6 {
  transform: scale(1.7);
}

.box7 {
  transform: scale(1.7);
  transform-origin: 0 0;
}

.box8 {
  transform: scale(1.7);
  transform-origin: 100% -30%;
}

.box9 {
  transform: skewX(50deg);
  transform-origin: 100% -30%;
}

.box10 {
  transform: skewY(50deg);
  transform-origin: 100% -30%;
}
```

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

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-origin-property |

Compatibilidade com navegadorres
--------------------------------

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

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

* Usando transformações CSS
* https://css-tricks.com/almanac/properties/t/transform-origin/


background-color - CSS

background-color
================

A propriedade CSS **`background-color`** define a cor de fundo de um elemento.

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

Sintaxe
-------

```css
/\* Valores em chaves \*/
background-color: red;
background-color: indigo;

/\* Valores em Hexadecimais \*/
background-color: #bbff00; /\* Totalmente opaco \*/
background-color: #bf0; /\* Forma abreviada totalmente opaco \*/
background-color: #11ffee00; /\* Totalmente transparente \*/
background-color: #1fe0; /\* Forma abreviada totalmente transparente \*/
background-color: #11ffeeff; /\* Totalmente opaco \*/
background-color: #1fef; /\* Forma abreviada totalmente opaco \*/

/\* Valores em RGB \*/
background-color: rgb(255, 255, 128); /\* Totalmente opaco \*/
background-color: rgba(117, 190, 218, 0.5); /\* 50% transparente \*/

/\* Valores em HSL \*/
background-color: hsl(50, 33%, 25%); /\* Totalmente opaco \*/
background-color: hsla(50, 33%, 25%, 0.75); /\* 75% transparente \*/

/\* Valores em chaves especiais \*/
background-color: currentcolor;
background-color: transparent;

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

A propriedade `background-color` recebe um único valor `<color>`.

### Valores

`<color>`

A cor uniforme de fundo. É renderizado atrás de qualquer `background-image` (en-US) especificado, embora a cora ainda continue visible através de qualquer transparência da imagem.

Acessibilidade
--------------

É importante assegurar que o contraste entre a cor de fundo e a cor do texto colocado sobre ele é alta o suficiente para pessoas com condições de baixa visão possam ler o conteúdo da página.

A cor do contrast é determinada comparando a luminância da cor do texto e da cor de fundo. Para atender às atuais Diretrizes de Acessibilidade de Conteúdo da Web (WCAG), uma proporção de 4.5:1 é necessária para conteúdo de texto e 3:1 para textos maiores como títulos. Texto grande é definido como 18.66px e negrito ou maior, ou 24px ou maior.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | `transparent` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Computed value | computed color |
| Animation type | a color |

Sintaxe formal
--------------
```

background-color =
  <color>

```

Exemplos
--------

### HTML

```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exemplothree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS

```css
.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-color |

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

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

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

* Multiple backgrounds
* The `<color>` data type
* Other color-related properties: `color`, `border-color` (en-US), `outline-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US), and `column-rule-color` (en-US)
* Applying color to HTML elements using CSS


:last-child - CSS

:last-child
===========

Resumo
------

A CSS pseudo-classe (en-US) `:last-child` representa qualquer elemento que é o último filho de seu elemento pai.

Sintaxe
-------
```

elemento:last-child { propriedades de estilo }
```

Exemplo
-------

### Conteúdo HTML

```html
<ul>
  <li>Esse item não é afetado pelo estilo.</li>
  <li>Esse também não.</li>
  <li>Esse item é! :)</li>
</ul>
```

### Conteúdo CSS

```css
li:last-child {
  background-color: lime;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

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

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


:invalid - CSS

:invalid
========

A pseudo-classe CSS **`:invalid`** representa qualquer elemento `<input>` ou `<form>` (en-US) cujo conteúdo não esteja válido (en-US).

```css
/\* Seleciona todos os inputs inválidos \*/
input:invalid {
  background-color: pink;
}
```

Essa pseudo-classe é útil para usuário identificar quais campos foram preenchidos incorretamente.

Sintaxe
-------

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

Esse exemplo apresenta um simples formulário onde a cor verde realça um input válido e a cor vermelha realça um input inválido.

### HTML

```html
<form>
  <label for="url\_input">Adicione uma URL:</label>
  <input type="url" id="url\_input" />
  <br />
  <br />
  <label for="email\_input">Adicione um endereço de email:</label>
  <input type="email" id="email\_input" required />
</form>
```

### CSS

```css
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

### Resultado

Notas
-----

### Radio buttons

Se algum radio button de um grupo possuir o atributo `required`, a pseudo-classe `:invalid` é aplicada a todos se nenhum deles for selecionado. (Radio buttons agrupados compartilham o mesmo valor pelo atributo `name`.)

### Gecko defaults

Por padrão, Gecko não aplica o estilo para a pseudo-classe `:invalid`. Entretanto, pode-se aplicar um estilo (um "brilho" vermelho usando a propriedade `box-shadow`) à pseudo-classe `:-moz-ui-invalid` (en-US), que são um conjunto que se aplicam como o `:invalid`.

Você pode desabilitar o "brilho" usando o CSS a seguir, ou substituir completamente para alterar a aparência dos campos inválidos:

```css
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

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

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

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

* Outras pseudo-classes relacionadas com validações: `:required`, `:optional`, `:valid`
* Mozilla pseudo-classes relacionadas: `:-moz-ui-invalid` (en-US), `:-moz-submit-invalid` (en-US)
* Form data validation (en-US)


Regra At - CSS

Regra At
========

Uma **regra at (at-rule)** é uma CSS statement iniciando com um caractere arroba, '`@`' (`U+0040 ARROBA COMERCIAL`), seguido por um indetificador e terminando no primeiro ponto e vírgula', `;`' (`U+003B SEMICOLON`), fora de um bloco, ou no fim do primeiro Bloco CSS.

Existem muitas regras at, criadas por seu identificador, cada um com uma sintaxe diferente:

* `@charset`, definindo o conjunto de caracteres (codificação) usado pela folha de estilos.
* `@import`, informando o motor CSS para incluir uma folha de estilos externa.
* `@namespace` (en-US), informando ao motor CSS que todo o conteúdo deve ser considerado prefixado com um namespace XML.
* Regras at aninhadas, um subconjunto de regras aninhadas que pode ser usado não somente como uma regra de uma folha de estilos, mas também dentro de um grupo de regras condicional:
    + `@media` (en-US), um grupo de regras condicional que é aplicado ao conteúdo caso o dispositivo de exibição cumpra com a condição de mídia definida.
    + `@font-face`, descrevendo o aspecto de uma fonte externa que deve ser baixada.
    Experimental
    + `@document` (en-US), um grupo de regras condicional que é aplicado ao conteúdo caso o documento cumpra com os critério definidos.
    Experimental
    + `@supports` (en-US), um grupo de regras condicional que é aplicado caso o navegador cumpra com os critérios definidos.
    Experimental
Grupos condicionais de regras
-----------------------------

Assim como valores de propriedades, cada regra at possui uma sintaxe diferente; várias delas, entretanto, podem ser agrupadas em uma categoria especial, os **grupos condicionais de regras**. Essas regras compartilham uma sintaxe em comum. Cada uma delas inclui *regras aninhadas*, que são *conjuntos de regras* ou *regras at aninhadas*. Todas elas transmitem um significado semântico em comum: todas indicam uma condição (de um tipo diferente) para que as regras sejam aplicadas.

Grupos condicionais de regras são definidos pelo CSS3 e são:

* `@media` (en-US),
* `@document` (en-US),
* `@supports` (en-US).

Cada uma delas sendo também uma regra aninhada, pode haver uma quantidade indeterminada de aninhamentos.


Sintaxe - CSS

Sintaxe
=======

O Objetivo básico da linguagem de folhas de estilo em cascata (CSS) é permitir que um motor do navegador pinte elementos na página com características específicas como cores, posições, ou decorações. A sintaxe *CSS* reflete estes objetivos e seus blocos de contrução básicos são:

* A **propriedade** é um identificador que possui um nome legível, que define o que será considerado ou editado;
* O **valor** descreve como o recurso será tratado pelo motor. Cada propriedade possui um conjunto de valores válidos, definida por uma gramática formal, bem como um significado semântico, implementado para o motor do navegador.
Declarações do CSS
------------------

A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de **declaração**, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-lo com o estilo correto.

Tanto as propriedades como os valores são case-sensitive no CSS. Os pares se separam por dois pontos, '`:`' (`U+003A COLON`), e espaços em branco antes, entre e depois de propriedades e valores, porém os espaços dentro da declaração são ignorados.

![css syntax - declaration.png](/pt-BR/docs/Web/CSS/Syntax/css_syntax_-_declaration.png)

Existem mais de 100 propriedades diferentes no CSS e um número quase infinito de diferentes valores. Nem todos os pares de propriedades e valores são permitidos em cada propriedade define o que são valores válidos. Quando um valor não é válido para uma determinada propriedade, a declaração é considerada inválida e é totalmente ignorada pelo motor do CSS.

Blocos de declaração CSS
------------------------

Declarações são agrupadas em **blocos**, que estão delimitados na estrutura com uma chave de abertura, '`{`' (`U+007B LEFT CURLY BRACKET`), e fechadas com outra, '`}`' (`U+007D RIGHT CURLY BRACKET`). Os blocos as vezes podem estar aninhados, a abertura e fechamento de chaves no bloco CSS deve ser realizada.

![css syntax - block.png](/pt-BR/docs/Web/CSS/Syntax/css_syntax_-_block.png)

Esses blocos são chamados de **blocos de declaração** e as declarações dentro deles são separadas por, '`;`' (`U+003B SEMICOLON`). Um bloco de declaração pode não conter nenhuma declaração. Espaços em branco em volta das declarações não são consideradas. Não é necessário que a última declaração possua ponto e vírgula, apesar de ser considerada uma boa prática pois previne o esquecimento de acrescê-la quando for necessário aumentar o bloco.

![css syntax - declarations block.png](/pt-BR/docs/Web/CSS/Syntax/css_syntax_-_declarations_block.png)

**Nota:** O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML `style`.

Regras CSS
----------

Se as folhas de estilo pudessem apenas aplicar uma declaração para cada elemento de uma página da web, eles seriam bem limitados. O principal objetivo é aplicar diferentes declarações a diferentes partes do documento.

O CSS associa as condições com os blocos de declaração. Cada bloco (válido) é precedido por um ou mais seletores, separados por vírgula, que são condições selecionando alguns elementos da página. O grupo de seletores é chamado de regra.
 ![css syntax - ruleset.png](/pt-BR/docs/Web/CSS/Syntax/css_syntax_-_ruleset.png)

Um elemento pode ser modificado por diversos seletores, e por isso por diversas regras que potencialmente podem conter diversas propriedades, com diferentes valores, o CSS padrão define aquele que possui a precedência e que será aplicado: esse é o tal algoritmo em cascata.

**Nota:** É importante perceber que quando uma regra é caracterizada por um grupo de seletores que são algum tipo de atalho com cada um sendo um simples seletor isso não se aplica a validade da regra por si só.

Isso leva a uma importante consequência: se apenas um dos seletores for inválido, como usar uma pseudo-classe ou pseudo-elemento desconhecido, todo o *seletor* é inválido e por isso toda a regra é ignorada (invalidada também).

CSS statements
--------------

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

A **statement** is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

![css syntax - statements Venn diag.png](/pt-BR/docs/Web/CSS/Syntax/css_syntax_-_statements_venn_diag.png)

There are different kinds of statements:

* **Rulesets** (or *rules*) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
* **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like `@charset` or `@import`), conditional information (like `@media` (en-US) or `@document` (en-US)), or descriptive information (like `@font-face`).

Any statement which isn't a rule or an at-rule is invalid and ignored.

There is another group of statements, the **nested statements**, these are statements that can be used in a specific subset of at-rules, the *conditional group rules*. These statements only apply if a specific condition is matched: the `@media` at-rule content is applied only if the device on which runs the browser matches the expressed condition; the `@document` at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only *rulesets* could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in *CSS Conditionals Level 3*. Now, though it still is experimental and not support by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.


overflow - CSS

overflow
========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Resumo
------

A propriedade `overflow` especifica quando o conteúdo de um elemento de nível de bloco deve ser cortado, exibido com barras de rolagem ou se transborda do elemento.

O uso da propriedade `overflow` com valor diferente de `visible` (seu valor padrão), criará um novo contexto de formatação de bloco (en-US). Isto é tecnicamente necessário para evitar que um conteúdo flutuante que entre em contato com o objeto dentro da área de rolamento e quebre as linhas do conteúdo para ajustar a disposição do texto. A quebra das linhas ocorre sempre que a barra de rolagem é utilizada, tornando a experiência de rolagem lenta.

**Nota:** Ao definir a propredade `scrollTop` para o `elemento` HTML relevante, mesmo que o valor de `overflow` seja `hidden`, o conteúdo ainda pode precisar rolar.

|  |  |
| --- | --- |
| Initial value | `visible` |
| Aplica-se a | Block-containers, flex containers, and grid containers |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `overflow-x` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
* `overflow-y` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
 |
| Animation type | discrete |

Sintaxe
-------
```

overflow:  visible | hidden | scroll | `auto` (en-US) | `inherit` (en-US)
```

### Valores

`visible`

Valor padrão. O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo.

`hidden`

O conteúdo é cortado e nenhuma barra de rolagem é exibida.

`scroll`

O conteúdo é acessível através de barras de rolagem que são exibidas mesmo que o conteúdo não precise. Isso evita o problema de barras de rolagem aparecendo e desaparecendo quando o conteúdo é dinâmico. Impressoras podem imprimir o conteúdo vazado.

`auto`

Depende do navegador utilizado. Navegadores desktop como o Firefox geralmente exibem barras de rolagem apenas quando necessário.

#### Extensões da Mozilla

`-moz-scrollbars-none`

Use `overflow:hidden` no lugar.

`-moz-scrollbars-horizontal`
Deprecated

O uso de `overflow-x` (en-US) e `overflow-y` (en-US) é preferido.

`-moz-scrollbars-vertical`
Deprecated

O uso de `overflow-x` (en-US) e `overflow-y` (en-US) é preferido.

-moz-hidden-unscrollable
Non-standard

É mantido principalmente para uso interno e por temas. Desabilita o rolamento de elementos raiz de XML e `<html>`, `<body>` mediante o uso das setas do teclado ou scroll do mouse.

Exemplos
--------

```css
p {
  width: 12em;
  border: dotted;
  overflow: visible; /\* Exibe o conteúdo de forma vazada, fora da caixa de conteúdo \*/
}
```

`visible` (default)
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
```

p { overflow: hidden; /* Esconde o conteúdo excedente */ }
```

`overflow: hidden`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
```

p { overflow: scroll; /* Sempre exibe barras de rolagem */ }
```

`overflow: scroll`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
```

p { overflow: auto; /* Exibe barras de rolagem apenas se necessário */ }
```

`overflow: auto`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

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

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

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

* Propriedades CSS relacionadas: `text-overflow`, `white-space`, `overflow-x` (en-US), `overflow-y` (en-US), `clip` (en-US), `display`


Valor Especifícado - CSS

Valor Especifícado
==================

O **valor especificado** de uma propriedade CSS está definido em uma de três maneiras.

1. If the document's stylesheet has specified a value for the property then it will be used. For example; if the `color` property is set to `green` then the text color of the corresponding element will be green.
2. If the document's stylesheet has not specified a value then it will be inherited form the parent element (if possible). For example; if we have a paragraph (`<p>`) inside a `<div>` and the `<div>` has a CSS `font` property value of "Arial" and the `<p>` doesn't have a `font` property defined then it will inherit the Arial font.
3. If none of the above are available, the initial value for the element as specified by the CSS specification is applied.
Especificações
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value |

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

* CSS Reference


box-shadow - CSS

box-shadow
==========

O **`box-shadow`** é uma propriedade do CSS, é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, os separando com virgulas.

Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco e propagação do raio e cor.

```css
/\* offset-x | offset-y | color \*/
box-shadow: 60px -16px teal;

/\* offset-x | offset-y | blur-radius | color \*/
box-shadow: 10px 5px 5px black;

/\* offset-x | offset-y | blur-radius | spread-radius | color \*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/\* inset | offset-x | offset-y | color \*/
box-shadow: inset 5em 1em gold;

/\* Any number of shadows, separated by commas \*/
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

/\* Global keywords \*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
```

```css
box-shadow: 60px -16px teal;
```

```css
box-shadow: 10px 5px 5px black;
```

```css
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;
```

```css
box-shadow: inset 5em 1em gold;
```

```css
box-shadow: 0 0 1em gold;
```

```css
box-shadow: inset 0 0 1em gold;
```

```css
box-shadow:
  inset 0 0 1em gold,
  0 0 1em red;
```

A propriedade box-shadow permite que você adicione uma sombra em quase qualquer elemento. Se um `border-radius` (en-US) for especificado no elemento com uma box-shadow, a sombra assume os mesmos cantos arredondados. O comando z-ordering de múltiplas box-shadows é o mesmo que múltiplas text shadows (a primeira sombra especificada está na parte superior).

Box-shadow generator (en-US) é uma ferrament interativa qu permite a criação de `box-shadow`.

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements. It also applies to `::first-letter`. |
| Inherited | não |
| Computed value | any length made absolute; any specified color computed; otherwise as specified |
| Animation type | a shadow list |

Sintaxe
-------

Especificando uma única box-shadow usando:

* Dois, três ou quatro valores para `<length>` (en-US).
    + Se apenas dois valores forem definidos, eles serão interpretados como valores de `<offset-x><offset-y>`.
    + Se o terceiro valor for dados, é interpretado como `<blur-radius>`.
    + Se o quarto valor for dados, é interpretado como `<spread-radius>`.
* Opcionalmente, o atributo `inset`.
* Opcionalmente, o valor `<color>`.

Para especificar mais de uma sombra, separe-as com virgula.

### Valores

`inset`

 Se não for especificado, a sombra ganha o efeito de como se a caixa fosse aumentada acima do conteúdo).
 A presença da palavra-chave `inset` muda a sombra para dentro da moldura (como se o conteúdo estivesse pressionado dentro da caixa). As sombras de inserção são desenhadas dentro da borda (mesmo as transparentes), acima do plano de fundo, mas abaixo do conteúdo.

`<offset-x>` `<offset-y>`

Existem dois valores `<length>` (en-US) para configurar o desvio (offset) da sombra:

* `<offset-x>` especifica a distância horizontal. Valores negativos colocarão a sombra à esquerda do elemento.
* `<offset-y>` especifca a distância vertical. Valores negativos colocam a sombra acima do elemento.

Consulte `<length>` (en-US) para as unidades disponíveis.

Se ambos os valores forem `0`, a sombra será posicionada atrás do elemento (e poderá gerar um efeito de desfocagem caso `<blur-radius>` e/ou `<spread-radius>` estiverem configurados).

`<blur-radius>`

Este é um terceiro valor para `<length>` (en-US). Quanto maior for este valor, maior o efeito de desfocagem, desta forma a sombra se tornará maior e mais clara. Valores negativos não são permitidos. Se não for especificado, o valor padrão é `0` (os limites da sombra serão retos). A especificação não inclui um algoritmo exato de como o raio de esmaecimento deve ser calculado, no entanto, descreve o seguinte:

>
> ...para uma sombra com bordas longas e retas, deverá ser criada uma transição de cor do comprimento da distância de desfocagem que é perpendicular e centralizada com as bordas da sombra, e isto deve variar da cor total da sombra do seu ponto central até totalmente transparente no ponto final fora dela.
>
>
>

`<spread-radius>`

Este é um quarto valor de `<length>` (en-US). Valores positivos farão com que a sombra expanda e cresça maior, valores negativos farão com que a sombra encolha. Se não for especificado, o valor padrão é `0` (a sombra terá o mesmo tamanho do elemento)

`<color>`

Consulte `<color>` para possiveis palavras-chave e notações. Se não for especificada, a cor que será utilizada vai depender do navegador - geralmente é o valor da propriedade `color`, mas tenha em mente que o Safari atualmente imprime uma sombra transparente neste caso.

### Interpolação

Each shadow in the list (treating `none` as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not `inset`, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one `inset` and the other not `inset`, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is `transparent`, all lengths are `0`, and whose `inset` (or not) matches the longer list.

### Formal syntax
```

box-shadow =
  <spread-shadow># (en-US)

<spread-shadow> =
  <'box-shadow-color'>? (en-US)                               && (en-US)
  [ (en-US) <'box-shadow-offset'> [ (en-US) <'box-shadow-blur'> <'box-shadow-spread'>? (en-US) ] (en-US)? (en-US) ] (en-US)  && (en-US)
  <'box-shadow-position'>? (en-US)

```

Live examples
-------------

* box-shadow test
* box-shadow tutorial and examples
* Box Shadow CSS Generator
Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # box-shadow |

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

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

See also
--------

* The `<color>` data type
* Other color-related properties: `color`, `background-color`, `border-color` (en-US), `outline-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `caret-color` (en-US), and `column-rule-color` (en-US)
* Applying color to HTML elements using CSS


position - CSS

position
========

A propriedade **`position`**, encontrada no CSS, define como um elemento pode ser posicionado (renderizado) no documento (página). Essa propriedade (**`position`**) pode ser acompanhada de outras, tais como, `top` (en-US), `right` (en-US), `bottom` (en-US), and `left` (en-US), que determinam como ficará a localização final do objeto, permitindo seu deslocamento, como será apresentado adiante.Experimente
-----------

### Tipos de posicionamentos

* Um **elemento posicionado** é um elemento cujo valor de sua posição pode ser computado (calculado) (en-US) como `relative`, `absolute`, `fixed`, or `sticky`. ( Em outras palavras, são todos esses, com exceção do `static`, sendo estático o valor como padrão do elemento.)
* Um elemento denominado com **posicionamento relativo**, ou **relatively positioned element**, é um elemento cuja função é calculada (en-US) ao ser definida a `position` como valor `relative`. Com isso, a propriedade `top` (en-US) e `bottom` (en-US) determinam o deslocamento ou projeção vertical a posição padrão do elemento que estava definida por `static`; Não sendo outro, o `left` (en-US) e o `right` (en-US), por sua vez, determinam o deslocamento horizontal.
* Um elemento denominado com **posicionamento absoluto**, ou **absolutely positioned element**, é um elemento determinado e calculado ao atribuir ao `position` o valor `absolute` ou `fixed`. Com `top` (en-US), `right` (en-US), `bottom` (en-US), and `left` (en-US) é possível especificar o deslocamento das laterais (bordas) dos blocos que contêm (containing block (en-US)) os elementos. (O containing block, ou blocos que envolvem um elemento é definido como um antecessor relativo ao qual o elemento está posicionado, acomplado ou englobado. Se por ventura o elemento tiver definido margens (margin), ele são adicionados ao deslocamento (offset). O elemento estabelecerá um novo contexto de formatação do bloco (en-US) (BFC) para seus conteúdos.
* Um elemento denominado com **posicionamento adesivo** ( ! ), ou **stickily positioned element**, é um elemento determinado e calculado ao atribuir ao `position` como valor `sticky`. Sendo tratado como um posicionamento relativo até que ultrapasse (atinja) os limites do bloco no qual está contido. (Se assemelha a configurar a propriedade `top` (en-US) com um valor diferente de automático (auto)) Dentro do seu fluxo principal (fluxo raiz, ou o contêiner no qual ele desloca-se), No momento que há o deslocamento da página o elemento é tratado como "preso" ou "stuck" até encontrar-se com as paredes opostas do bloco no qual esteja contido.

Maior parte do tempo, um **elemento de posicionamento absoluto** que tem `height` e `width` configurados como `auto` são dimensionados de acordo com seu conteúdo interno. However, non-replaced (en-US), absolutely positioned elements can be made to fill the available vertical space by specifying both `top` (en-US) and `bottom` (en-US) and leaving `height` unspecified (that is, `auto`). They can likewise be made to fill the available horizontal space by specifying both `left` (en-US) and `right` (en-US) and leaving `width` as `auto`.

Exceto para esses casos descritos abaixo (para elementos de posicionamento absoluto que preenchem o espaço disponível):

* Se ambos `top` e `bottom` são definidos (tecnicamento não sendo `auto`), `top` prevalece.
* Se ambos `left` e `right` são definidos, `left` prevalece quando `direction` (en-US) é `ltr` (Direção da escrita Portuguesa, Japonês na horizontal, etc.) e `right` prevalece quando `direction` (en-US) for configurado `rtl` ( Padrão de escrita em idiomas como Persa, Arabe, Hebraico, etc.).
Sintaxe
-------

A propriedade `position` é definida com apenas uma palavra-chave da lista abaixo.

### Valores

`static`

O elemento é posicionado de acordo com o fluxo normal do documento. O `top` (en-US), `right` (en-US), `bottom` (en-US), `left` (en-US), e `z-index` (en-US) propriedades *não têm efeito.*. Este é o valor padrão.

`relative`

O elemento é posicionado de acordo com o fluxo normal do documento e, em seguida, deslocado *em relação a si mesmo* com base nos valores de `top`, `right`, `bottom`, e `left`. O deslocamento não afeta a posição de nenhum outro elemento; assim, o espaço dado para o elemento no layout da página é o mesmo que se a posição fosse `static`.

Este valor cria um novo stacking context (contexto de empilhamento) (en-US) quando o valor de `z-index` não for `auto`. Seu efeito em `table-*-group`, `table-row`, `table-column`, `table-cell` e os elementos `table-caption` são indefinidos.

`absolute`

O elemento é removido do fluxo normal de documentos e nenhum espaço é criado para o elemento no layout da página. Ele é posicionado em relação ao seu ancestral posicionado mais próximo, se houver; caso contrário, ele é colocado em relação ao inicial containing block (en-US). Sua posição final é determinada pelos valores de `top`, `right`, `bottom`, e `left`.

Este valor cria um novo stacking context (en-US) quando o valor de `z-index` não é `auto`. As margens das caixas posicionadas absolutamente não collapse com outras margens.

`fixed`

O elemento é removido do fluxo normal de documentos e nenhum espaço é criado para o elemento no layout da página. Ele está posicionado em relação ao inicial containing block (en-US) estabelecido pelo viewport, exceto quando um de seus ancestrais tiver uma propriedade `transform`, `perspective` ou `filter` definida como algo diferente de `none` (see the CSS Transforms Spec), nesse caso, esse ancestral se comporta como o bloco que o contém. (Observe que há inconsistências no navegador com `perspective` e `filter` contribuindo para conter a formação do bloco.) Sua posição final é determinada pelos valores de `top`, `right`, `bottom` e `left`.

Este valor sempre cria um novo stacking context (en-US). Em documentos impressos, o elemento é colocado na mesma posição em *todas as páginas*.

`sticky`

O elemento é posicionado de acordo com o fluxo normal do documento e, em seguida, deslocado em relação ao *ancestral de rolagem mais próximo* e containing block (en-US) (ancestral de nível de bloco mais próximo), incluindo elementos relacionados à tabela, com base nos valores de `top`, `right`, `bottom` e `left`. O deslocamento não afeta a posição de nenhum outro elemento.

Este valor sempre cria um novo stacking context (en-US). Observe que um elemento sticky "gruda" em seu ancestral mais próximo que possui um "mecanismo de rolagem" (criado quando `overflow` é `hidden`, `scroll`, `auto` ou `overlay`), mesmo que esse ancestral não seja o ancestral de rolagem mais próximo. Isso inibe efetivamente qualquer comportamento "pegajoso" (see the Github issue on W3C CSSWG).

### Sintáxe formal
```

position =
  static       | (en-US)
  relative     | (en-US)
  absolute     | (en-US)
  sticky       | (en-US)
  fixed        | (en-US)
  <running()>

<running()> =
  running( <custom-ident> (en-US) )

```

Exemplos
--------

### Posicionamento relativo

Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.

#### HTML

```html
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
```

#### CSS

```css
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
```

### Posicionamento absoluto

Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its *nearest positioned ancestor* (i.e., the nearest ancestor that is not `static`). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the W3C definition), which is the containing block of the document's root element.

A simple example follows:

```html
<h1>Absolute positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

```css
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

### Posicionamento fixo

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block (en-US) is the initial containing block established by the *viewport*, unless any ancestor has `transform`, `perspective`, or `filter` property set to something other than `none` (see CSS Transforms Spec), which then causes that ancestor to take the place of the elements containing block (en-US). This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.

#### HTML

```html
<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>
```

#### CSS

```css
.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}
```

### Posicionamento Adesivo

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For instance...

```css
#one {
  position: sticky;
  top: 10px;
}
```

...would position the element with id *one* relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.

A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.

You must specify a threshold with at least one of `top`, `right`, `bottom`, or `left` for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.

#### HTML

```html
<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>
```

#### CSS

```css
\* {
  box-sizing: border-box;
}

dl > div {
  background: #fff;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font:
    bold 18px/21px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font:
    bold 20px/45px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #ccc;
}
```

Accessibility concerns
----------------------

Ensure that elements positioned with an `absolute` or `fixed` value do not obscure other content when the page is zoomed to increase text size.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0
### Performance & Accessibility

Scrolling elements containing `fixed` or `sticky` content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add `will-change: transform` to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # position-property |

|  |  |
| --- | --- |
| Initial value | `static` |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |
| Creates stacking context | yes |

Compatibilidade do navegador
----------------------------

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


page-break-before - CSS

page-break-before
=================

>
> **Warning:** Esta propriedade foi substituída pela propriedade `break-before` (en-US).
>
>
>

A propriedade CSS **`page-break-before`** ajusta as "quebras de páginas" *antes* do elemento atual.

Esta propriedade aplica-se para elementos em bloco (block) que geram uma caixa. Não será aplicada em uma `<div>` vazia que não irá gerar uma caixa (box).

```css
/\* Keyword values \*/
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/\* Global values \*/
page-break-before: inherit;
page-break-before: initial;
page-break-before: unset;
```

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Page break aliases
------------------

A propriedade `page-break-before` agora é uma propriedade legada, substituída por `break-before` (en-US).

Por motivos de compatibilidade, `page-break-before` é tratada pelos navegadores como um alias de `break-before`. Isso garante que sites usando `page-break-before` continuem a funcionar. Um subconjunto de valores deve manter aliases como a seguir:

| page-break-before | break-before |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

Syntax
------

### Values

`auto`

Initial value. Automatic page breaks (neither forced nor forbidden).

`always`

Always force page breaks before the element.

`avoid`

Avoid page breaks before the element.

`left`

Force page breaks before the element so that the next page is formatted as a left page.

`right`

Force page breaks before the element so that the next page is formatted as a right page.

`recto`
Experimental

If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.

`verso`
Experimental

If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.

### Formal syntax
```

page-break-before =
  auto     | (en-US)
  always   | (en-US)
  avoid    | (en-US)
  left     | (en-US)
  right    | (en-US)
  inherit

```

Examples
--------

```css
/\* avoid page break before the div \*/
div.note {
  page-break-before: avoid;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-before |

Browser compatibility
---------------------

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

See also
--------

* `break-before` (en-US), `break-after` (en-US), `break-inside` (en-US)
* `page-break-after` (en-US), `page-break-inside` (en-US)
* `orphans` (en-US), `widows` (en-US)


Herança - CSS

Herança
=======

Resumo
------

O resumo de cada definição de propriedade do CSS diz se tal propriedade é herdada por padrão ("Inherited": sim) ou é não herdada por padrão ("Inherited": não). Isso controla o que ocorre quando nenhum valor é especificado para uma propriedade em um elemento.

Propriedades herdadas
---------------------

Quando nenhum valor de uma **propriedade herdada** foi especificado em um elemento, o elemento obtém o valor computado desta propriedade em seu elemento pai. Apenas o elemento raiz do documento obtém o valor inicial dado no resumo da propriedade.

Um exemplo típico de uma propriedade herdada é a propriedade `color`. Dadas as seguintes regras de estilo:

```css
p {
  color: green;
}
```

e o markup:

```html
<p>Este paragrafo tem <em>texto enfatizado</em> dentro dele.</p>
```

As palavras "texto enfatizado" vão aparecer em verde, já que o elemento `em` herdou o valor da propriedade `color` do elemento `p`. Ele *não* obtém o valor inicial da propriedade (o qual é a cor usada pelo elemento raiz quando a página não especifica nenhuma cor).

Propriedades não herdadas
-------------------------

Quando nenhum valor para uma **propriedade não herdada** (algumas vezes chamada de **reset property** em código Mozilla) é especificado em um elemento, o elemento obtém o valor inicial (en-US) desta propriedade (como especificado no resumo da propriedade).

Um exemplo típico de uma propriedade não herdada é a propriedade `border` (en-US). Dadas as seguintes regras de estilo:

```css
p {
  border: medium solid;
}
```

e o markup

```html
<p>Este paragrafo tem <em>texto enfatizado</em> dentro dele.</p>
```

As palavras "texto enfatizado" não vão ter uma borda (já que o valor inicial de `border-style` (en-US) é `none`).

Notas
-----

A palavra-chave `inherit` (en-US) permite aos autores especificar explicitamente a herança. Ela funciona tanto em propriedades herdadas como não herdadas.

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

* Referência CSS
* `inherit` (en-US)


offset - CSS

offset
======

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**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 **`offset`** é uma propriedade abreviada para animar um elemento ao longo de um caminho definido.

**Nota:** As primeiras versões da especificação chamam essa propriedade de `motion`.

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `offset-position` (en-US): `normal`
* `offset-path` (en-US): `none`
* `offset-distance` (en-US): `0`
* `offset-anchor` (en-US): `auto`
* `offset-rotate` (en-US): `auto`
 |
| Aplica-se a | qualquer elemento transformavel |
| Inherited | não |
| Percentages | as each of the properties of the shorthand:* `offset-position` (en-US): refer to the size of containing block
* `offset-distance` (en-US): refer to the total path length
* `offset-anchor` (en-US): relative to the width and the height of the element's reference box
 |
| Computed value | as each of the properties of the shorthand:* `offset-position` (en-US): for `length` (en-US) the absolute value, otherwise a percentage
* `offset-path` (en-US): as specified
* `offset-distance` (en-US): for `length` (en-US) the absolute value, otherwise a percentage
* `offset-anchor` (en-US): for `length` (en-US) the absolute value, otherwise a percentage
* `offset-rotate` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `offset-position` (en-US): a position
* `offset-path` (en-US): by computed value type
* `offset-distance` (en-US): a length, percentage or calc();
* `offset-anchor` (en-US): a position
* `offset-rotate` (en-US): as <angle>, <basic-shape> or <path()>
 |
| Creates stacking context | yes |

Sintaxe
-------

```css
/\* Posição do offset \*/
offset: auto
offset: 10px 30px;
offset: none;

/\* Caminho do offset \*/
offset: ray(45deg closest-side);
offset: path(M 100 100 L 300 100 L 200 300 z);
offset: url(arc.svg);

/\* Caminho do offset com distância e/ou rotação \*/
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/\* Incluindo âncora no offset \*/
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;
```

### Sintaxe formal
```

offset =
  [ (en-US) <'offset-position'>? (en-US) [ (en-US) <'offset-path'> [ (en-US) <'offset-distance'> || (en-US) <'offset-rotate'> ] (en-US)? (en-US) ] (en-US)? (en-US) ]! [ (en-US) / <'offset-anchor'> ] (en-US)? (en-US)

```

Exemplo
-------

### HTML

```html
<div id="offsetElement"></div>
```

### CSS

```css
@keyframes move {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}
```

### Resultado

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

| Specification |
| --- |
| Motion Path Module Level 1 # offset-shorthand |

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

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


CSS Positioning - CSS

CSS Positioning
===============

**CSS Positioning** é um módulo do CSS que define como ficam a posição dos elementos relativos e absolutos da página.

Referências
-----------

### CSS Properties

* `bottom` (en-US)
* `clear`
* `display`
* `float`
* `left` (en-US)
* `position`
* `right` (en-US)
* `top` (en-US)
* `visibility`
* `z-index` (en-US)
Roteiro
-------

Entendendo o CSS z-index

Apresenta o conceito de contexto de empilhamento e explica como funciona o atributo z-index, com diversos exemplos.

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |


<blend-mode> - CSS

<blend-mode>
============

O tipo básico de dados CSS **`<blend-mode>`** (modo de mesclagem) descreve como as cores devem aparecer, quando objetos se sobrepõem. Usa-se nas propriedades `background-blend-mode` e `mix-blend-mode`.

Para cada pixel sobreposto, o **`blend-mode`** obtém o valor da cor do pixel da frente e do pixel do fundo, faz um cálculo com esses valores e devolve um novo valor de cor.

Syntaxe
-------

O tipo básico de dados **`<blend-mode>`** é definido usando uma palavra chave escolhida da lista abaixo.

### Valores

`normal`

 A cor firnal é a do pixel de cima, não importando a cor dor o pixel de baixo.
 O efeito é como duas folhas de papel opacas se sobrepondo.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}
```

`multiply`

 A cor final é o resultado da multiplicação das cores de cima e de baixo.
 Quando uma das camadas for preta, a cor final será preta, enquanto uma camada branca não altera a cor final.
 O efeito é como duas imagens impressas sobrepostas em um filme transparente.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: multiply;
}
```

`screen`

 A cor final é o resultado do inverso de cada cor, multiplicados um pelo outro e depois, o inverso desse resultado.
 Uma camada preta não altera o resultado final, enquanto uma camada branca resulta na cor final branca.
 O efeito é como o de duas imagens sobrepostas por um projetor, sobre uma tela de projeção.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

`overlay`

 A cor final será o resultado de `multiply`, se a cor de baixo for mais escura ou `screen`, se a cor de baixo for mais clara.
 Este `blend-mode` é equivalente a `hard-light` mas com as camadas invertidas.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: overlay;
}
```

`darken`

A cor final é composta pelos valores mais escuros dos canais de cores de cada uma das camadas.
```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: darken;
}
```

`lighten`

A cor final é composta pelos valores mais claros de cada um dos canais de cores das camadas.
```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: lighten;
}
```

`color-dodge`

 A cor final é o resultado da divisão da cor de baixo pelo inverso da cor de cima.
 Um fundo preto não altera as cores. Uma cor de cima inversa a cor de baixo, resulta em uma cor bastante luminosa.
 Este `blend-mode` é similar a `screen`, mas a cor de cima precisa ser apenas tão clara quanto o inverso da cor de fundo para deixar o resultado muito luminoso.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-dodge;
}
```

`color-burn`

 A cor final é o inverso da cor do fundo, dividido pelo valor da cor da frente e então inverte-se o resultado final.
 Se a cor de cima for branca, não haverá alteração. Se a cor de cima for o inverso da cor de baixo, resultará em uma cor preta.
 Este `blend-mode` é similar ao `multiply`, mas a cor de cima precisa apenas ser tão escura quanto o inverso da cor de baixo para fazer o resultado final ser preto.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-burn;
}
```

`hard-light`

 A cor final é o resultado do `multiply` se a cor de cima for a mais escura, ou o resultado de `screen` se a cor de cima for mais clara.
 Este `blend-mode` é equivalente ao `overlay` mas com as camadas invertidas.
 O efeito é o de iluminar o fundo com um holofote muito forte e intenso.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hard-light;
}
```

`soft-light`

 O resultado final é similar ao de `hard-light`, porém menos intenso.
 O efeito é o de iluminar o fundo com um holofote difuso.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: soft-light;
}
```

`difference`

 The final color is the result of subtracting the darker of the two colors from the lighter one.
 A black layer has no effect, while a white layer inverts the other layer's color.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: difference;
}
```

`exclusion`

 The final color is similar to `difference`, but with less contrast.
 As with `difference`, a black layer has no effect, while a white layer inverts the other layer's color.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: exclusion;
}
```

`hue`

The final color has the *hue* of the top color, while using the *saturation* and *luminosity* of the bottom color.
```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hue;
}
```

`saturation`

 The final color has the *saturation* of the top color, while using the *hue* and *luminosity* of the bottom color.
 A pure gray backdrop, having no saturation, will have no effect.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: saturation;
}
```

`color`

 The final color has the *hue* and *saturation* of the top color, while using the *luminosity* of the bottom color.
 The effect preserves gray levels and can be used to colorize the foreground.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color;
}
```

`luminosity`

 The final color has the *luminosity* of the top color, while using the *hue* and *saturation* of the bottom color.
 This blend mode is equivalent to `color`, but with the layers swapped.

```

<div id="div"></div>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: luminosity;
}
```

Interpolation of blend modes
----------------------------

Changes between blends mode are not interpolated. Any change occurs immediately.

Specifications
--------------

| Specification |
| --- |
| Compositing and Blending Level 2 # ltblendmodegt |

Browser Compatibility
---------------------

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

See also
--------

* Properties that use this data type: `background-blend-mode`, `mix-blend-mode`
* Blend modes


padding - CSS

padding
=======

A propriedade **`padding`** define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (`padding-top`, `padding-right`, `padding-bottom`, `padding-left`).

```css
/\* Aplica-se à todas as bordas \*/
padding: 1em;

/\* vertical | horizontal \*/
padding: 5% 10%;

/\* superior | horizontal | inferior \*/
padding: 1em 2em 2em;

/\* superior | direita | inferior | esquerda \*/
padding: 2px 1em 0 1em;

/\* Valores globais \*/
padding: inherit;
padding: initial;
padding: unset;
```

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `padding-bottom` (en-US): `0`
* `padding-left`: `0`
* `padding-right` (en-US): `0`
* `padding-top` (en-US): `0`
 |
| Aplica-se a | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | as each of the properties of the shorthand:* `padding-bottom` (en-US): the percentage as specified or the absolute length
* `padding-left`: the percentage as specified or the absolute length
* `padding-right` (en-US): the percentage as specified or the absolute length
* `padding-top` (en-US): the percentage as specified or the absolute length
 |
| Animation type | a length |

Sintaxe
-------

A propriedade `padding` pode ser utilizada usando um, dois, três ou todos os quatro valores. Cada valor é um `<comprimento>` ou uma `<porcentagem>`.

* Quando **um** único é valor utilizado, ele se aplica a todos os **quatro lados**.
* Se **Dois** valores forem utilizados o primeiro se aplica às bordas verticais (**superior e inferior**) e o segundo se aplica às bordas horizontais (**esquerda e direita**).
* Quando **Três** valores são utilizados o primeiro se aplica à borda **superior**, o segundo será utilizado tanto para a borda **esquerda quanto para a borda direita**. O terceiro será aplicado à borda **inferior**.
* Com **Quatro** valores a ordem de aplicação é: **superior, direita, inferior e esquerda** (de acordo com o movimento dos ponteiros do relógio).
### Valores

`<comprimento>`

Media do comprimento. Não pode ser negativo. Veja `<length>` (en-US) para maiores detalhes.

`<porcentagem>`

Valor percentual que é aplicado em relação à **largura** do bloco contido.

### Sintaxe formal
```

padding =
  <'padding-top'>{1,4} (en-US)

```

Exemplos
--------

```css
padding: 5%;
/\* padding 5% em todos os lados \*/
```

```css
padding: 10px;
/\* padding 10px em todos os lados \*/
```

```css
padding: 10px 20px;
/\* 10px acima e abaixo \*/
/\* 20px esquerda e direita \*/
```

```css
padding: 10px 3% 20px;
/\* 10px acima \*/
/\* 3% esquerda e direita \*/
/\* 20px abaixo \*/
```

```css
padding: 1em 3px 30px 5px;
/\* acima 1em padding \*/
/\* direita 3px padding \*/
/\* abaixo 30px padding \*/
/\* esquerda 5px padding \*/
```

border:outset; padding:5% 1em;

Amostra
-------

### HTML

```html
<h4>Hello world!</h4>
<h3>O padding é diferente nesta linha.</h3>
```

### CSS

```css
h4 {
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3 {
  background-color: blue;
  padding: 400px 50px 50px 400px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-shorthand |

Compatibilidade
---------------

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

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

* CSS Box Model


Type selectors - CSS

Type selectors
==============

O **seletor de tipo** CSS corresponde aos elementos pelo nome do nó. Em outras palavras, ele seleciona todos os elementos do tipo fornecido em um documento.

```css
/\* Todos os elementos <a> \*/
a {
  color: red;
}
```

Sintaxe
-------
```

element { style properties }
```

Exemplos
--------

### CSS

```css
span {
  background-color: skyblue;
}
```

### HTML

```html
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

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


CSS Display - CSS

CSS Display
===========

**CSS Display** É um módulo de CSS que define como a árvore da caixa de formatação CSS é gerada a partir da árvore de elementos do documento e define as propriedades que a controlam.

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

### CSS Propriedades

* `display`
### CSS tipos de dados

* `<display-outside>`
* `<display-inside>`
* `<display-listitem>`
* `<display-box>`
* `<display-internal>`
* `<display-legacy>`
Guias
-----

### CSS Fluxo Layout (`display: block`, `display: inline`)

* Layout de bloco e embutido no fluxo normal (en-US)
* Layout de fluxo e Overflow (en-US)
* Layout de fluxo e modos de gravação (en-US)
* Contextos de formatação explicados (en-US)
* No fluxo e fora do fluxo (en-US)
### `display: flex`

* Conceitos básicos de flexbox
* Alinhando itens em um container Flex
* Relações de controle de itens flexíveis ao longo do eixo principal (en-US)
* Combinações Flexbox entre navegadores (en-US)
* Dominando o agrupamento de itens flexíveis (en-US)
* Pedido de itens flexíveis (en-US)
* Relação do flexbox com outros métodos de layout (en-US)
* Compatibilidade com versões anteriores do Flexbox (en-US)
* Casos de uso típicos do Flexbox (en-US)
### `display: grid`

* Conceitos básicos de layout de grade
* Relação com outros métodos de layout
* Posicionamento baseado em linha (en-US)
* Áreas de modelo de grade (en-US)
* Layout usando linhas de grade nomeadas (en-US)
* Posicionamento automático no layout da grade (en-US)
* Alinhamento de caixa no layout da grade (en-US)
* Grades, valores lógicos e modos de escrita (en-US)
* Layout e acessibilidade da grade CSS (en-US)
* Layout de grade CSS e aprimoramento progressivo (en-US)
* Realizando layouts comuns usando grades (en-US)
Especificações
--------------

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

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


float - CSS

float
=====

Resumo
------

A propriedade **float** do CSS determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu containêr, onde textos e elementos em linha irão se posicionar ao seu redor.

Um elemento flutuante é um tipo de elemento cujo valor de `float` é diferente de `none.`

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements, but has no effect if the value of `display` is `none`. |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Como `float` implica o uso the *block layout,* ele modifica o valor computado de `display` em alguns casos:

| Valor Especificado | Valor Computado |
| --- | --- |
| `inline` | `block` |
| `inline-block` | `block` |
| `inline-table` | `table` |
| `table-row` | `block` |
| `table-row-group` | `block` |
| `table-column` | `block` |
| `table-column-group` | `block` |
| `table-cell` | `block` |
| `table-caption` | `block` |
| `table-header-group` | `block` |
| `table-footer-group` | `block` |
| `flex` | `flex`, porém `float` não produz efeito em tais elementos |
| `inline-flex` | `inline-flex`, porém `float` não produz efeito em tais elementos |
| *other* | *unchanged* |

**Nota:** Se você está se referindo a essa propriedade do Javascript como um membro do objeto `element.style`, você deve referir-se a `cssFloat`. Observe também que as versões 8 e posteriores referem-se a `styleFloat`. Esta é uma exceção à regra de que o nome do membro DOM é o nome em estilo *camel-case* do nome CSS separado por traço (e se deve ao fato de que "float" é uma palavra reservada em Javascript, tal qual a necessidade de especificar "class" como "className" e "for" como "htmlFor").

Sintaxe
-------

```css
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

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

### Valores

`left`

É uma palavra-chave que indica que o elemento deve flutuar à esquerda do bloco.

`right`

É uma palavra-chave que indica que o elemento deve flutuar à direita do bloco.

`none`

É uma palavra-chave que indica que o elemtno não deve flutuar.

`inline-start`
Experimental

É uma palavra-chave que indica que o elemento deve flutuar no lado inicial do seu bloco, ou seja, o lado esquerdo em scripts `ltr` e no direito em scripts `rtl`.

`inline-end`
Experimental

É uma palavra-chave que indica que o elemento deve flutuar no lado final do seu bloco, ou seja, o lado direito em scripts `ltr` e no esquerdo em scripts `rtl`.

### Sintaxe Formal
```

float =
  block-start      | (en-US)
  block-end        | (en-US)
  inline-start     | (en-US)
  inline-end       | (en-US)
  snap-block       | (en-US)
  <snap-block()>   | (en-US)
  snap-inline      | (en-US)
  <snap-inline()>  | (en-US)
  left             | (en-US)
  right            | (en-US)
  top              | (en-US)
  bottom           | (en-US)
  none             | (en-US)
  footnote

<snap-block()> =
  snap-block( <length> (en-US) , [ (en-US) start | (en-US) end | (en-US) near ] (en-US)? (en-US) )

<snap-inline()> =
  snap-inline( <length> (en-US) , [ (en-US) left | (en-US) right | (en-US) near ] (en-US)? (en-US) )

```

Exemplos
--------

### CSS

```css
div {
  border: solid red;
  max-width: 70ex;
}
h4 {
  float: left;
  margin: 0;
}
```

### HTML

```html
<div>
  <h4>HELLO!</h4>
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
</div>
```

### Como `floats` são posicionados

Como mencionado acima, quando um elemento é flutuado ele é retirado do seu fluxo normal no documento. Ele é reposicionado à esquerda ou à direita até tocar a borda do seu próprio *box* ou outro elemento flutuante.

Na imagem abaixo, existem 3 quadrados vermelho. Dois flutuando à esquerda e um flutuando à direita. Observe que o segundo quadrado vermelho à esquerda é posicionado à direita do primeiro. Quadrados adicionais poderiam continuar sendo empilhados à direita até que eles completassem o box, após isso eles iriam para próxima linha.

![](/pt-BR/docs/Web/CSS/float/floats.png)

### Limpando *floats*

No exemplo abaixo, os elementos flutuantes são menores verticalmente que o bloco de texto com os quais estão flutuando. Apesar disso, se o texto não fosse comprido o bastante para passar abaixo do limite inferior de todos os *floats,* nos veríamos efeitos não previstos. Se o parágrafo abaixo, por enquanto, somente lê "Lorem ipsum dolor sit amet,", e fosse seguido por outro cabeçalho do mesmo estilo de cabeçaljo "Floats Example", o segundo cabeçalho iria aparecer entre os dois *boxes* vermelhos. Muito provavelmente, queremos que o próximo título seja alinhado à esquerda. Para conseguir isso, precisamos limpar os *floats*.

O jeito mais simples de limpar os floats neste exemplo é adicionar a propriedade `clear` para o próximo cabeçalho que queremos assegurar que esteja alinhado à esquerda.

```css
h2.secondHeading {
  clear: both;
}
```

Porém, este método apenas funciona se não existirem outros elementos com o mesmo block formatting context (en-US) aos quais nós queiramos que o cabeçalho continue aparecendo ao lado horizontalmente. Se o nosso `H2` possui irmãos os quais são barras laterais flutuadas à esquerda e à direita, usar `clear` irá forçá-lo a aparecer abaixo das duas barras laterais, o que provavelmente não é o que queríamos.

Se limpar `floats` em um elemento não é uma opção, uma outra abordagem é limitar o contexto de formatação do bloco do containêr flutuante. Referindo-se ao exemplo acima novamente, aparentemente todos os três quadrados vermelhos possuem um elemento paragrafo `P` . Nós podemos atribuir a propiedade `overflow` neste paragrafo para `hidden` ou `auto` para obrigá-lo a expandir para contê-los, porém não permitirá que os mesmos parágrafos pulem fora do limite inferior.

```css
p.withRedBoxes {
  overflow: hidden;
  height: auto;
}
```

**Nota:** Atribuir `overflow` para `scroll` irá conter também qualquer elemento filho flutuante, mas mostrará as barras de rolagem não importando o comprimento vertical do elemento. Aqui nós estamos atribuindo `height` como `auto` mesmo sendo este o padrão para indicar que o containêr deve crescer para acomodar seu conteúdo.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float |
| CSS Logical Properties and Values Level 1 # float-clear |

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

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

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

* Block formatting context (en-US)


text-decoration-style - CSS

text-decoration-style
=====================

Resumo
------

A propriedade CSS **`text-decoration-style`** CSS define o estilo das linhas especificadas por `text-decoration-line` (en-US). O modelo aplica-se a todas as linhas, não há nenhuma forma de definir estilos diferentes para cada uma das linhas utilizando `text-decoration-line`.

Se a decoração especificada tem um significado semântico específico, como uma linha de line-through o que significa que um texto tenha sido excluído, autores são encorajados a denotar este significado usando uma tag HTML, como `<del>` ou `<s>`. Como os navegadores podem ser deficientes em alguns casos, o significado semântico não vai desaparecer em tal situação.

|  |  |
| --- | --- |
| Initial value | `solid` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Syntax
------

```css
/\* Keyword values \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/\* Global values \*/
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
```

### Valores

`solid double dotted dashed wavy`

É uma das seguintes palavras-chave:

| Keyword | Description | Comment |
| --- | --- | --- |
| `solid` | Draws a single line |  |
| `double` | Draws a double line |  |
| `dotted` | Draws a dotted line |  |
| `dashed` | Draws a dashed line |  |
| `wavy` | Draws a wavy line |  |
| `-moz-none`
Non-standard
 | Do not draw a line | **Do not use** **:** use `text-decoration-line` (en-US)`: none` instead |

`inherit`

É uma palavra-chave indicando a reutilizar o valor calculado sobre o elemento pai.

### Syntax Formal
```

text-decoration-style =
  solid   | (en-US)
  double  | (en-US)
  dotted  | (en-US)
  dashed  | (en-US)
  wavy

```

Exemplo
-------

```css
.example {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
}
```

```css
.example {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
```

```html
<p class="example">This is how it looks.</p>
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-style-property |

Browser compatíveis
-------------------

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