diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
| commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
| tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/css/referencia_css | |
| parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
| download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip | |
initial commit
Diffstat (limited to 'files/es/web/css/referencia_css')
| -rw-r--r-- | files/es/web/css/referencia_css/index.html | 246 | ||||
| -rw-r--r-- | files/es/web/css/referencia_css/mix-blend-mode/index.html | 611 |
2 files changed, 857 insertions, 0 deletions
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 +--- +<div class="note"> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Estamos trabajando sobre este documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si vas a agregar o modificar una página, por favor, ajústate a la plantilla <a href="/en/CSS/CSS_Reference/Property_Template" title="en/CSS Reference/Property Template">Referencia CSS:Plantilla de propiedades </a> y modifica según sea necesario.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">La plantilla básica para las páginas de ejemplo se puede encontrar aquí: </span></span> <a class="internal" href="/samples/cssref/TEMPLATE.html" title="https://developer.mozilla.org/samples/cssref/TEMPLATE.html ">samples/cssref/TEMPLATE.html</a>.</p> +<span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página <a href="/Talk:en/CSS_Reference" title="Talk:en/CSS Reference">Talk:CSS Reference</a>.</span></span></div> + +<p><span class="seoSummary">Esta <em>Referencia CSS</em> muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares <a href="/es/docs/Web/CSS">CSS</a>, <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> y <a href="/es/docs/Web/CSS/Pseudoelementos">pseudo-elementos</a>, <a href="/es/docs/Web/CSS/At-rule">reglas-at</a>, <a href="/es/docs/Web/CSS/length">unidades</a>, y <a href="/es/docs/Web/CSS/Introducci%C3%B3n/Selectors">selectores</a>, todos juntos en <a href="#Keyword_index">orden alfabético</a>, así como los <a href="#Selectors">selectores por tipo</a>; 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 <a href="/es/docs/Web/CSS/CSS3">CSS3</a> estandarizado, o ya establecido. También incluye una breve <a href="#DOM_CSS">referencia DOM-CSS / CSSOM</a>.</span></p> + +<p>Tenga en cuenta que las definiciones de reglas CSS son completamente <a href="https://www.w3.org/TR/css-syntax-3/#intro">basadas en texto</a> (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está <a href="https://www.w3.org/TR/cssom/#introduction">basado en objetos</a>.</p> + +<p>Vea también las <a href="/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla">Extensiones CSS de Mozilla</a> para propiedades específicas de Gecko, que usan el prefijo <code>-moz</code>; y las <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Reference/Webkit_Extensions">Extensiones CSS de WebKit</a> para propiedades específicas de WebKit. Vea <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> de Peter Beverloo como referencia a todas las propiedades con prefijo.</p> + +<h2 id="Sintaxis_de_regla_básica">Sintaxis de regla básica</h2> + +<p>Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.</p> + +<h3 id="Sintaxis_de_regla_de_estilo">Sintaxis de regla de estilo</h3> + +<pre class="syntaxbox"><strong><var>selectorlist</var> { + <var>property</var>: <var>value</var>; </strong> + <var>[more property:value; pairs] </var> +<strong>}</strong> + +...where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var> + +Ver <a href="#Selectors"><em>selector</em></a>, <em><a href="#pelm">pseudo-elemento</a></em>, <a href="#pcls"><em>pseudo-clase</em></a> más abajo. + +</pre> + +<h4 id="Ejemplos_de_reglas_de_estilo">Ejemplos de reglas de estilo</h4> + +<pre class="brush: css">strong { + color: red; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte <a href="/es/docs/Learn/CSS/Introduction_to_CSS/Selectors">este tutorial</a>. Tenga en cuenta que cualquier error de <a href="/es/docs/Web/CSS/syntax">sintaxis CSS</a> 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) <a href="https://www.w3.org/TR/css-syntax-3/#intro">basadas en texto</a>, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está <a href="https://www.w3.org/TR/cssom/#introduction">basado en objetos</a>.</p> + +<h3 id="Sintaxis_de_las_reglas-at_(rules)">Sintaxis de las reglas-at (@rules)</h3> + +<p>Debido a que éstas tienen formatos de estructura variados, revise la sección <a href="/es/docs/Web/CSS/At-rule">reglas-At</a> para ver la sintaxis de la regla deseada.</p> + +<h2 id="Índice_de_palabras_clave">Índice de palabras clave</h2> + +<div class="note"> +<p><strong>Nota:</strong> Los nombres de propiedad en este índice <strong>no</strong> incluyen los <a href="/es/docs/Web/CSS/CSS_Properties_Reference">nombres de JavaScript</a> donde difieren de los nombres estándar de CSS.</p> +</div> + +<div>{{CSS_Ref}}</div> + +<h2 id="Selectores">Selectores</h2> + +<h3 id="Selectores_básicos"><a href="/es/docs/Web/CSS/CSS_Selectors#Basic_selectors">Selectores básicos</a></h3> + +<ul> + <li><a href="/es/docs/Web/CSS/Type_selectors">Selectores de tipo</a> <code>elementname</code></li> + <li><a href="/es/docs/Web/CSS/Class_selectors">Selectores de clase</a> <code>.classname</code></li> + <li><a href="/es/docs/Web/CSS/ID_selectors">Selectores de ID</a> <code>#idname</code></li> + <li><a href="/es/docs/Web/CSS/Universal_selectors">Selectores universales</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li> + <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a> <code>[attr=value]</code></li> +</ul> + +<h3 id="Combinadores"><a href="/es/docs/Web/CSS/CSS_Selectors#Combinators">Combinadores</a></h3> + +<ul> + <li><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Selectores de hermanos adyacentes</a> <code>A + B</code></li> + <li><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Selectores de hermanos generales</a> <code>A ~ B</code></li> + <li><a href="/es/docs/Web/CSS/Child_selectors">Selectores de hijo</a> <code>A > B</code></li> + <li><a href="/es/docs/Web/CSS/Descendant_selectors">Selectores de descendiente</a> <code>A B</code></li> +</ul> + +<h3 id="Pseudo-clases"><a href="/es/docs/Web/CSS/Pseudo-classes">Pseudo-clases</a></h3> + +<div class="index"> +<ul> + <li id="pcls">{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(':any')}}</li> + <li>{{ Cssxref(':any-link')}}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":default") }}</li> + <li>{{ Cssxref(":defined") }}</li> + <li>{{ Cssxref(":dir", ":dir()")}}</li> + <li>{{ Cssxref(":disabled") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":first") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":fullscreen") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":focus-visible") }}</li> + <li>{{ Cssxref(":host") }}</li> + <li>{{ Cssxref(":host()") }}</li> + <li>{{ Cssxref(":host-context()") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":indeterminate") }}</li> + <li>{{ Cssxref(":in-range") }}</li> + <li>{{ Cssxref(":invalid") }}</li> + <li>{{ Cssxref(":lang", ":lang()") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":left") }}</li> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":not", ":not()") }}</li> + <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> + <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> + <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> + <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> + <li>{{ Cssxref(":only-child") }}</li> + <li>{{ Cssxref(":only-of-type") }}</li> + <li>{{ Cssxref(":optional") }}</li> + <li>{{ Cssxref(":out-of-range") }}</li> + <li>{{ Cssxref(":read-only") }}</li> + <li>{{ Cssxref(":read-write") }}</li> + <li>{{ Cssxref(":required") }}</li> + <li>{{ Cssxref(":right") }}</li> + <li>{{ Cssxref(":root") }}</li> + <li>{{ Cssxref(":scope") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":valid") }}</li> + <li>{{ Cssxref(":visited") }}</li> +</ul> +</div> + +<h3 id="Pseudo-elementos"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementos</a></h3> + +<div class="index"> +<ul> + <li id="pelm">{{ Cssxref("::after") }}</li> + <li>{{ Cssxref("::backdrop") }}</li> + <li>{{ Cssxref("::before") }}</li> + <li>{{ Cssxref("::cue") }}</li> + <li>{{ Cssxref("::first-letter") }}</li> + <li>{{ Cssxref("::first-line") }}</li> + <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::selection") }}</li> + <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li> +</ul> +</div> + +<div class="note"> +<p><strong>Ver también:</strong> Una <a href="https://www.w3.org/TR/selectors/#selectors">lista completa de selectores</a> en la especificación de Nivel 3 de Selectores.</p> +</div> + +<h2 id="Conceptos">Conceptos</h2> + +<h3 id="Sintaxis_y_semántica">Sintaxis y semántica</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/Syntax">Sintaxis CSS</a></li> + <li><a href="/es/docs/Web/CSS/At-rule">Reglas-at</a></li> + <li><a href="/es/docs/Web/CSS/Cascade">Cascada</a></li> + <li><a href="/es/docs/Web/CSS/Comments">Comentarios</a></li> + <li><a href="/es/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li> + <li><a href="/es/docs/Web/CSS/inheritance">Herencia</a></li> + <li><a href="/es/docs/Web/CSS/Shorthand_properties">Propiedades abreviadas</a></li> + <li><a href="/es/docs/Web/CSS/Specificity">Especificidad</a></li> + <li><a href="/es/docs/Web/CSS/Value_definition_syntax">Sintaxis de definición de valor</a></li> +</ul> + +<h3 id="Valores">Valores</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/actual_value">Valor actual</a></li> + <li><a href="/es/docs/Web/CSS/computed_value">Valor calculado</a></li> + <li><a href="/es/docs/Web/CSS/initial_value">Valor inicial</a></li> + <li><a href="/es/docs/Web/CSS/resolved_value">Valor resuelto</a></li> + <li><a href="/es/docs/Web/CSS/specified_value">Valor específico</a></li> + <li><a href="/es/docs/Web/CSS/used_value">Valor utilizado</a></li> +</ul> + +<h3 id="Diseño">Diseño</h3> + +<ul> + <li><a href="/es/docs/Web/Guide/CSS/Block_formatting_context">Contexto de formato de bloque</a></li> + <li><a href="/es/docs/Web/CSS/box_model">Modelo de caja</a></li> + <li><a href="/es/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li> + <li><a href="/es/docs/Web/CSS/Layout_mode">Modo de diseño</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margen colapsando</a></li> + <li><a href="/es/docs/Web/CSS/Replaced_element">Elementos reemplazados</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Contexto de apilamiento</a></li> + <li><a href="/es/docs/Web/Guide/CSS/Visual_formatting_model">Modelo de formato visual</a></li> +</ul> + +<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> + +<h3 id="Tipos_de_objetos_principales">Tipos de objetos principales</h3> + +<ul> + <li>document.<a href="/es/docs/Web/API/Document/styleSheets">styleSheets</a></li> + <li>styleSheets[i].<a href="/es/docs/Web/API/CSSRuleList">cssRules</a></li> + <li>cssRules[i].<a href="/es/docs/Web/API/CSSRule/cssText">cssText</a> (selector y estilo)</li> + <li>cssRules[i].<a href="/es/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li> + <li>elem.<a href="/es/docs/Web/API/HTMLElement/style">style</a></li> + <li>elem.style.<a href="/es/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (solo estilo)</li> + <li>elem.<a href="/es/docs/Web/API/Element/className">className</a></li> + <li>elem.<a href="/es/docs/Web/API/Element/classList">classList</a></li> +</ul> + +<h3 id="Métodos_importantes">Métodos importantes</h3> + +<ul> + <li>{{domxref("CSSStyleSheet.insertRule")}}</li> + <li>{{domxref("CSSStyleSheet.deleteRule")}}</li> +</ul> + +<h2 id="Tutoriales_CSS3">Tutoriales CSS3</h2> + +<p>Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:</p> + +<ul> + <li><a href="/es/docs/CSS/Media_queries">Uso de media queries con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Uso de contadores con CSS</a></li> + <li><a href="/es/docs/CSS/Using_CSS_gradients">Uso de gradientes con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Uso de transformaciones con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS">Uso de animaciones con CSS</a></li> + <li><a href="/es/docs/Web/CSS/Transiciones_de_CSS">Uso de transiciones con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Uso de múltiples fondos con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de las cajas flexibles con CSS</a></li> + <li><a href="/es/docs/Columnas_con_CSS-3">Uso de columnas con CSS</a></li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Extensiones CSS de Mozilla</a> (con el prefijo <code>-moz</code>)</li> + <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">Extensiones CSS de WebKit</a> (principalmente con el prefijo <code>-webkit</code>)</li> + <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Extensiones CSS de Microsoft</a> (con el prefijo <code>-ms</code>)</li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>mix-blend-mode</code></strong> 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.</p> + +<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* 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; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt>{{cssxref("<blend-mode>")}}</dt> + <dd>El modo de mezcla que debería ser aplicado.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<div class="hidden" id="mix-blend-mode"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="note">Mezclado aislado (sin mezclar con el fondo)</div> + <div class="row isolate"> + <div class="cell"> normal + <div class="container normal"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <defs> + <linearGradient id="red"> + <stop offset="0" stop-color="hsl(0,100%,50%)" /> + <stop offset="100%" stop-color="hsl(0,0%,100%)" /> + </linearGradient> + <linearGradient id="green"> + <stop offset="0" stop-color="hsl(120,100%,50%)" /> + <stop offset="100%" stop-color="hsl(120,0%,100%)" /> + </linearGradient> + <linearGradient id="blue"> + <stop offset="0" stop-color="hsl(240,100%,50%)" /> + <stop offset="100%" stop-color="hsl(240,0%,100%)" /> + </linearGradient> + </defs> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> multiply + <div class="container multiply"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> darken + <div class="container darken"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> screen + <div class="container screen"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> lighten + <div class="container lighten"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> overlay + <div class="container overlay"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-dodge + <div class="container color-dodge"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-burn + <div class="container color-burn"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hard-light + <div class="container hard-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> soft-light + <div class="container soft-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> difference + <div class="container difference"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> exclusion + <div class="container exclusion"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hue + <div class="container hue"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> saturation + <div class="container saturation"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color + <div class="container color"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> luminosity + <div class="container luminosity"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + </div> + + <div class="note">Mezclado global (mezclar con el fondo)</div> + <div class="row"> + <div class="cell"> normal + <div class="container normal"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> multiply + <div class="container multiply"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> darken + <div class="container darken"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> screen + <div class="container screen"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> lighten + <div class="container lighten"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> overlay + <div class="container overlay"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-dodge + <div class="container color-dodge"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-burn + <div class="container color-burn"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hard-light + <div class="container hard-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> soft-light + <div class="container soft-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> difference + <div class="container difference"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> exclusion + <div class="container exclusion"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hue + <div class="container hue"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> saturation + <div class="container saturation"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color + <div class="container color"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> luminosity + <div class="container luminosity"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; + background: #EEE; +} + +.grid { + width: 100%; + display: flex; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; + height: auto; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; + height: auto; +} + +.cell { + margin: .5em; + padding: .5em; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em .5em 0; + font: .8em sans-serif; + text-align: left; + white-space: nowrap; +} + +.note + .row .cell { + margin-top: 0; +} + +.container { + position: relative; + background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%), + linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%); + width: 150px; + height: 150px; + margin: 0 auto; +} + +.R { + transform-origin: center; + transform: rotate(-30deg); + fill: url(#red); +} + +.G { + transform-origin: center; + transform: rotate(90deg); + fill: url(#green); +} + +.B { + transform-origin: center; + transform: rotate(210deg); + fill: url(#blue); +} + +.isolate .group { isolation: isolate; } + +.normal .item { mix-blend-mode: normal; } +.multiply .item { mix-blend-mode: multiply; } +.screen .item { mix-blend-mode: screen; } +.overlay .item { mix-blend-mode: overlay; } +.darken .item { mix-blend-mode: darken; } +.lighten .item { mix-blend-mode: lighten; } +.color-dodge .item { mix-blend-mode: color-dodge; } +.color-burn .item { mix-blend-mode: color-burn; } +.hard-light .item { mix-blend-mode: hard-light; } +.soft-light .item { mix-blend-mode: soft-light; } +.difference .item { mix-blend-mode: difference; } +.exclusion .item { mix-blend-mode: exclusion; } +.hue .item { mix-blend-mode: hue; } +.saturation .item { mix-blend-mode: saturation; } +.color .item { mix-blend-mode: color; } +.luminosity .item { mix-blend-mode: luminosity; }</pre> +</div> + +<div>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</div> + +<h3 id="Ejemplo_vivo">Ejemplo vivo</h3> + +<pre class="brush: html"><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></pre> + +<pre class="brush:css">circle { mix-blend-mode: screen; } +.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */ +</pre> + +<p>{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.properties.mix-blend-mode")}}</p> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("background-blend-mode")}}</li> +</ul> |