From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/referencia_css/index.html | 246 +++++++++ .../css/referencia_css/mix-blend-mode/index.html | 611 +++++++++++++++++++++ 2 files changed, 857 insertions(+) create mode 100644 files/es/web/css/referencia_css/index.html create mode 100644 files/es/web/css/referencia_css/mix-blend-mode/index.html (limited to 'files/es/web/css/referencia_css') diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/referencia_css/index.html new file mode 100644 index 0000000000..63c52a6cdb --- /dev/null +++ b/files/es/web/css/referencia_css/index.html @@ -0,0 +1,246 @@ +--- +title: Referencia CSS +slug: Web/CSS/Referencia_CSS +tags: + - CSS + - Referencia CSS + - para_revisar +translation_of: Web/CSS/Reference +--- +
+

Estamos trabajando sobre este documento. Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.

+ +

Si vas a agregar o modificar una página, por favor, ajústate a la plantilla Referencia CSS:Plantilla de propiedades y modifica según sea necesario.

+ +

La plantilla básica para las páginas de ejemplo se puede encontrar aquí: samples/cssref/TEMPLATE.html.

+Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página Talk:CSS Reference.
+ +

Esta Referencia CSS muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares CSS, pseudo-classes y pseudo-elementos, reglas-at, unidades, y selectores, todos juntos en orden alfabético, así como los selectores por tipo; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de CSS3 estandarizado, o ya establecido. También incluye una breve referencia DOM-CSS / CSSOM.

+ +

Tenga en cuenta que las definiciones de reglas CSS son completamente basadas en texto (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está basado en objetos.

+ +

Vea también las Extensiones CSS de Mozilla para propiedades específicas de Gecko, que usan el prefijo -moz; y las Extensiones CSS de WebKit para propiedades específicas de WebKit. Vea Vendor-prefixed CSS Property Overview de Peter Beverloo como referencia a todas las propiedades con prefijo.

+ +

Sintaxis de regla básica

+ +

Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.

+ +

Sintaxis de regla de estilo

+ +
selectorlist {
+   property: value; 
+   [more property:value; pairs] 
+}
+
+...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+Ver selector, pseudo-elemento, pseudo-clase más abajo.
+
+
+ +

Ejemplos de reglas de estilo

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte este tutorial. Tenga en cuenta que cualquier error de sintaxis CSS en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) basadas en texto, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está basado en objetos.

+ +

Sintaxis de las reglas-at (@rules)

+ +

Debido a que éstas tienen formatos de estructura variados, revise la sección reglas-At para ver la sintaxis de la regla deseada.

+ +

Índice de palabras clave

+ +
+

Nota: Los nombres de propiedad en este índice no incluyen los nombres de JavaScript donde difieren de los nombres estándar de CSS.

+
+ +
{{CSS_Ref}}
+ +

Selectores

+ +

Selectores básicos

+ + + +

Combinadores

+ + + +

Pseudo-clases

+ +
+ +
+ +

Pseudo-elementos

+ +
+ +
+ +
+

Ver también: Una lista completa de selectores en la especificación de Nivel 3 de Selectores.

+
+ +

Conceptos

+ +

Sintaxis y semántica

+ + + +

Valores

+ + + +

Diseño

+ + + +

DOM-CSS / CSSOM

+ +

Tipos de objetos principales

+ + + +

Métodos importantes

+ + + +

Tutoriales CSS3

+ +

Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:

+ + + +

Ver también

+ + diff --git a/files/es/web/css/referencia_css/mix-blend-mode/index.html b/files/es/web/css/referencia_css/mix-blend-mode/index.html new file mode 100644 index 0000000000..fc213a4ceb --- /dev/null +++ b/files/es/web/css/referencia_css/mix-blend-mode/index.html @@ -0,0 +1,611 @@ +--- +title: mix-blend-mode +slug: Web/CSS/Referencia_CSS/mix-blend-mode +tags: + - CSS +translation_of: Web/CSS/mix-blend-mode +--- +
{{CSSRef}}
+ +

La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

Syntax

+ +
/* Valores clave */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Valores globales */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

Valores

+ +
+
{{cssxref("<blend-mode>")}}
+
El modo de mezcla que debería ser aplicado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + +
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+ +

Ejemplo vivo

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
+
+ +

{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

Véase también

+ + -- cgit v1.2.3-54-g00ecf