diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
| commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
| tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/css/referencia_css | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip | |
unslug es: move
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, 0 insertions, 857 deletions
diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/referencia_css/index.html deleted file mode 100644 index 63c52a6cdb..0000000000 --- a/files/es/web/css/referencia_css/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -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 deleted file mode 100644 index fc213a4ceb..0000000000 --- a/files/es/web/css/referencia_css/mix-blend-mode/index.html +++ /dev/null @@ -1,611 +0,0 @@ ---- -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> |