recursal/MDN huggingface dataset:
::selection
===========

El pseudoelemento de CSS **`::selection`** aplica estilos a la parte de un documento que ha sido resaltada por el usuario (como hacer clic y arrastrar el ratón sobre el texto).

Pruébalo
--------

Propiedades permitidas
----------------------

Solo se pueden usar determinadas propiedades CSS con `::selection`:

* `color`
* `background-color`
* `text-decoration` y sus propiedades asociadas
* `text-shadow`
* `-webkit-text-stroke-color`, `-webkit-text-fill-color` y `-webkit-text-stroke-width`

En particular, `background-image` se ignora.

Sintaxis
--------


```css
::selection {
  /\* ... \*/
}
```

Ejemplos
--------

### HTML


```html
Este texto tiene estilos especiales cuando lo resaltas.
<p>Prueba también a seleccionar este párrafo.</p>
```

### CSS
```

::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}
```



```css
/\* Hacer que el texto seleccionado sea dorado sobre un fondo rojo \*/
::selection {
  color: gold;
  background-color: red;
}

/\* Hacer que el texto seleccionado en un párrafo sea blanco sobre un fondo azul \*/
p::selection {
  color: white;
  background-color: blue;
}
```

### Resultado

Preocupaciones de accesibilidad
-------------------------------

**No sobreescribas los estilos del texto seleccionado por razones puramente estéticas** — los usuarios pueden personalizarlos para satisfacer sus necesidades. Para las personas que experimentan problemas cognitivos o que tienen menos conocimientos tecnológicos, los cambios inesperados en los estilos de selección pueden perjudicar su comprensión de la funcionalidad.

Si se sobreescribe, es importante asegurarse de que la **relación de contraste** entre el texto y los colores de fondo de la selección sea lo suficientemente alta como para que las personas con problemas de visión puedan leerla.

La relación de contraste de color se encuentra comparando la luminosidad del texto seleccionado y los colores de fondo del texto seleccionado. Para cumplir con las pautas de accesibilidad del contenido web (WCAG) actuales, el contenido del texto debe tener una relación de contraste de **4.5:1**, o 3:1 para texto más largo como encabezados. (WCAG define texto grande entre `18.66px` y `24px` con negrita, o `24px` o superior).

* WebAIM: Comprobar contraste de color
* MDN Comprensión de las WCAG, pauta 1.4 explicaciones
* Comprender el Criterio de Conformidad 1.4.3 | W3C: comprensión de las WCAG 2.0
Especificaciones
----------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

Compatibilidad con navegadores
------------------------------

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

Véase también
-------------

* `pointer-events` (en-US) - controlar qué eventos están activos en el elemento
CSS Writing Modes
=================

**CSS Writing Modes** es un modulo CSS que define varios modos internacionales de escritura, como izquierda-derecha (e.g. usado por Latin y textos Indic), de derecha-zquierda (e.g. usado por textos Hebreos o Árabes), bidireccional (usado cuando se mezcla izquierda-derecha y derecha-izquierda) y vertical (e.g. usado por algunos textos Asiaticos).

Referencia
----------

### Propiedades

* `direction`
* `glyph-orientation-horizontal`
* `text-combine-upright` (en-US)
* `text-orientation`
* `unicode-bidi` (en-US)
* `writing-mode`
Especificaciones
----------------

| Specification |
| --- |
| CSS Writing Modes Level 4  |
-webkit-text-stroke-width
=========================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La propiedad CSS **`-webkit-text-stroke-width`** especifica la anchura del trazo de texto.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | all elements |
| Heredable | yes |
| Valor calculado | absolute `length` |
| Animation type | discrete |

Síntaxis
--------


```css
/\* TODO \*/
```

### Valores

`<line-width>`

La anchura del trazo.

### Síntaxis Formal
```

-webkit-text-stroke-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Especificaciones
----------------

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-width |

Compatibilidad con navegadores
------------------------------

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

Ver además
----------

* Post en el blog Surfin' Safari anunciando esa característica
* Artículo en CSS-Tricks explicando esa característica
* `-webkit-text-stroke-color`
* `-webkit-text-stroke`
* `-webkit-text-fill-color`
border-inline-style
===================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`border-inline-style`** define el estilo de los bordes lógicos en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-style` (en-US) y `border-bottom-style`, o `border-left-style` (en-US), y `border-right-style` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.


```css
/\* <'border-style'> values \*/
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: groove;
```


El estilo del borde en otra dimensión puede establecerse con `border-block-style`, que establece `border-block-start-style`, y `border-block-end-style`.

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Sintaxis
--------

### Valores

`<'border-style'>`

La línea de estilo del borde. Mira `border-style`.

### Sintaxis formal
```

border-inline-style =   
  <'border-top-style'>{1,2}    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-style: dashed;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-style |

Compatibilidad con navegadores
------------------------------

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

Mira también
------------

* Esta propiedad se asigna a una de las propiedades del borde físico: `border-top-style` (en-US), `border-right-style` (en-US), `border-bottom-style`, o `border-left-style` (en-US).
* `writing-mode`, `direction`, `text-orientation`
border-inline-end-width
=======================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`border-inline-end-width`** CSS property defines the width of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-width` (en-US) y `border-bottom-width`, o `border-left-width` (en-US), y `border-right-width` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <'border-width'> values \*/
border-inline-end-width: 2px;
border-inline-end-width: thick;
```


Propiedades relacionadas son `border-block-start-width`, `border-block-end-width`, and `border-inline-start-width`, que definen los otros anchos del borde del elemento.

|  |  |
| --- | --- |
| Valor inicial | `medium` |
| Applies to | all elements |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

### Valores

`<'border-width'>`

El ancho del borde. Mira `border-width`.

### Sintaxis formal
```

border-inline-end-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-end-width: 5px;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

Compatibilidad con navegadores
------------------------------

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

Mira también
------------

* Esta propiedad se asigna a una de las propiedades del borde físico:`border-top-width` (en-US), `border-right-width` (en-US), `border-bottom-width`, y `border-left-width` (en-US)
* `writing-mode`, `direction`, `text-orientation`
margin-block
============

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`margin-block`** define el bloque lógico de inicio y fin de las márgenes de un elemento, que se asigna a las márgenes físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto.


```css
/\* <length> values \*/
margin-block: 10px 20px; /\* An absolute length \*/
margin-block: 1em 2em; /\* relative to the text size \*/
margin-block: 5% 2%; /\* relative to the nearest block container's width \*/
margin-block: 10px; /\* sets both start and end values \*/

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

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


Estos valores corresponden a `margin-top` (en-US) y `margin-bottom`, o `margin-right`, y `margin-left` (en-US) depende de los valores definidos para `writing-mode`, `direction`, y `text-orientation`.

Propiedades que lo constituyen
------------------------------

Los valores se pueden establecer individualmente como `margin-block-start` y `margin-block-end` (en-US). La propiedad de dirección en línea es `margin-inline` que establece `margin-inline-start`, y `margin-inline-end`.

Sintaxis
--------

### Valores

La propiedad `margin-block` toma los mismos valores de la propiedad `margin-left` (en-US).

### Definición formal

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `margin-block-start`: `0`
* `margin-block-end` (en-US): `0`
 |
| Applies to | same as `margin` |
| Heredable | no |
| Percentages | depends on layout model |
| Valor calculado | as each of the properties of the shorthand:* `margin-block-start`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `margin-block-end` (en-US): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length |

### Sintaxis formal
```

margin-block =   
  <'margin-top'>{1,2}    
  
```

Ejemplo
-------

### Definiendo el comienzo del bloque y el fin de los margenes

#### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  margin-block: 20px 40px;
  background-color: #c8c800;
}
```


#### Resultado

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-margin-block |

Compatibilidad con navegadores
------------------------------

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

Mira también
------------

* Las propiedades físicas mapeadas: `margin-top` (en-US), `margin-right`, `margin-bottom`, y `margin-left` (en-US)
* `writing-mode`, `direction`, `text-orientation`
line-height
===========

### Resumen

La propiedad CSS `line-height` establece la altura de una casilla remarcada por líneas. Comúnmente se usa para establecer la distancia entre líneas de texto. A nivel de elementos de bloque, define la altura mínima de las casillas encuadradas por líneas dentro del elemento. En elementos en linea no reemplazables, especifica la altura que se usa para calcular la altura de la casila encuadrada por líneas.

* `Valor inicial`: `normal` (en-US)
* Aplicable a: todos los elementos.
* `Valor heredado`: sí
* Porcentajes: se refieren a tamaño de la fuente del elemento mismo.
* Medio: `visual` (en-US)
* `Valor calculado`: para los valores <length> y <percentage>, el valor absoluto, en otro caso, como se especifica.
Syntax
------
```

/* Keyword value */
line-height: normal;

/* Unitless values: usa esta cifra multiplicada por el tamaño de fuente
del elemento */
line-height: 3.5;

/* <longitud> valores */
line-height: 3em;

/* <porcentaje> valores */
line-height: 34%;

/* Valores absolutos */
line-height: inherit;
line-height: initial;
line-height: unset;
```

### Valores

`normal`

Depende del agente del usuario. Los navegadores de escritorio (incluido Firefox) usan un valor por defecto de apenas **1.2,** dependiendo del `font-family` del elemento.

`<número>`

El valor utilizado es este `<número>` sin unidades multiplicado por el propio tamaño de fuente del elemento. El valor calculado es el mismo que el `<número>` especificado. En la mayoría de los casos, esta es la forma preferida de establecer `line-height` y evitar resultados inesperados debido a la herencia.

`<longitud>`

La `<longitud>` especificada se utiliza en el cálculo de la altura de la casilla encuadrada por líneas. Los valores dados en unidades `em` pueden producir resultados inesperados (ver ejemplo más abajo).

`<porcentaje>`

En relación con el tamaño de fuente del elemento en sí. El valor calculado es este <porcentaje> multiplicado por el tamaño de letra del elemento calculado. Los valores porcentuales pueden producir resultados inesperados (ver el segundo ejemplo a continuación).

### Ejemplos
```

/* Todas las reglas debajo ofrecen la misma line-height resultante */

div { line-height: 1.2;   font-size: 10pt; }   /* número/unitless */
div { line-height: 1.2em; font-size: 10pt; }   /* longitud */
div { line-height: 120%;  font-size: 10pt; }   /* porcentaje */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */
```


A menudo es más conveniente establecer el `line-height` usando `font` abreviadamente, como se muestra arriba, pero esto también requiere especificar la propiedad `font-family`.

### Especificaciones

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # line-height-property |

### Compatibilidad de navegadores

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

### Ver también

`font-size`
animation-direction
===================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen
-------

La propiedad CSS `animation-direction` indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

Es conveniente usar la propiedad abreviada `animation` para ajustar todas las propiedades de animación una sola vez.

|  |  |
| --- | --- |
| Valor inicial | `normal` |
| Applies to | todos los elementos y los pseudoelementos `::before` y `::after` |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |

Sintaxis
--------
```

Gramática formal: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal
```

### Valores

`normal`

Cada vez que termina un ciclo, la animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.

`alternate`

La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación `ease-in` se convierte en una animación con `ease-out` cuando se reproduce al revés. El contador que determina si la iteración es par o impar comienza en uno.

`reverse`

Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.

`alternate-reverse`

Es similar a `alternate` pero la animación se reproduce al revés. Es decir la animación se posiciona en el estado final, comienza a reproducirse al reves y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia. Y vuelve otra vez a repetirse. El contador que determina si la iteración es par o impar comienza en uno.

Ejemplos
--------

Visitar animaciones CSS para ver algunos ejemplos.

Especificaciones
----------------

| Specification |
| --- |
| CSS Animations Level 1 # animation-direction |

Compatibilidad con navegadores
------------------------------

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

Consulte también
----------------

* Usando animaciones CSS (en-US)
* `AnimationEvent`
::backdrop
==========

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Cada uno de los elementos en la pila de la capa superior posee un *`::backdrop`* `pseudo-element`. Este pseudo-elemento es una caja que se muestra inmediatamente debajo del elemento (y sobre el elemento inmediatamente inferior de la pila, si es que hay), dentro de dicha capa superior.

**Nota:** El pseudo-elemento `::backdrop` se puede usar para crear un fondo que oculte el documento subyacente detrás de la pila de la capa superior, p.ej., para el elemento que es mostrado a pantalla complete tal y como se describe en esta especificación.

No se hereda ni es heredado de ningún elemento. Tampoco se hacen restricciones sobre qué propiedades se aplican a este pseudo-elemento.

Especificaciones
----------------

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

Compatibilidad con navegadores
------------------------------

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

Ver además
----------

* `:fullscreen`
* `<dialog>`
Usando múltiples fondos con CSS
===============================

Con CSS3, puedes aplicar **múltiple fondos** a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.

Especificar fondos múltiples es fácil:


```css
.myclass {
  background:
    background1,
    background 2,
    ...,
    backgroundN;
}
```


Puedes hacerlo con la propiedad atajo `background` y con las propiedades individuales, excepto `background-color`. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: `background`, `background-attachment`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`.

Ejemplo
-------

En este ejemplo, tres fondos son apilados: el logo de Firefox, un gradiente lineal (en-US), y una imagen de burbujas:

### HTML


```html
<div class="multi\_bg\_example"></div>
```

### CSS


```css
.multi\_bg\_example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
  background:
    -moz-linear-gradient(
      to right,
      rgba(30, 75, 115, 1),
      rgba(255, 255, 255, 0)
    ),
    -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
    -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}
```

### Resultado

(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)

Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente (`background-repeat` y `background-position`) aplican a los fondos correspondientes. Así, el primer valor en la lista para `background-repeat` aplica al primer fondo (el de hasta arriba), etc.

Véase también
-------------

* Usando gradientes con CSS
Generador Border-image
======================

Esta herramienta permite generar valores para CSS3 `border-image`
Generador de border-radius
==========================

Esta herramienta puede ser usada para generar efectos de `border-radius` (en-US) de CSS3.

#### Herramienta
brightness()
============

La función **`brightness()`** CSS aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un `<filter-function>`.

Pruébalo
--------

El código de este ejemplo interactivo se encuentra en GitHub repository. Si desea contribuir en el proyecto de ejemplos interactivos, por favor clone el repositorio https://github.com/mdn/interactive-examples y envie un pull request.

Sintaxis
--------
```

brightness(valor)
```

### Parametros

`valor`

El brillo resultante, es definido como un `<number>` o un `<percentage>`. Un valor debajo del `100%` oscurecerá la imagen, como así un valor superior al `100%` le dará más brillo. Un valor de `0%` dará como resultado una imagen completamente negra, siendo el valor de `100%` una imagen sin cambios. El valor de la Interpolación es `1`.

Ejemplos
--------


```css
brightness(0%)   /\* Completamente negro \*/
brightness(0.4)  /\* 40% de brillo \*/
brightness(1)    /\* Sin Efecto \*/
brightness(200%) /\* Doble de Brillo \*/
```

Ver también
-----------

* `<filter-function>`
* `blur()`
* `contrast()` (en-US)
* `drop-shadow()` (en-US)
* `grayscale()` (en-US)
* `hue-rotate()` (en-US)
* `invert()` (en-US)
* `opacity()` (en-US)
* `saturate()` (en-US)
* `sepia()` (en-US)
blur()
======

La función CSS **`blur()`** aplica un desenfoque Gaussiano a la imagen de entrada. El resultado es un `<filter-function>`.

Pruébalo
--------

Sintaxis
--------
```

blur(radio)
```

### Parámetros

`radio`

El radio del desenfoque, especificado como `<length>`. Define el valor de la desviación estándar a la función gaussiana, es decir, cuántos píxeles en la pantalla se combinan entre sí; por lo tanto, un valor mayor creará más desenfoque. Un valor de `0` deja la entrada sin cambios. El valor de laguna para la interpolación es `0`.

Ejemplos
--------


```css
blur(0)        /\* Sin efecto \*/
blur(8px)      /\* Desenfoque con 8px de radio \*/
blur(1.17rem)  /\* Desenfoque con 1.17rem de radio \*/
```

Ver también
-----------

* `<filter-function>`