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/gradiente | |
| 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/gradiente')
| -rw-r--r-- | files/es/web/css/gradiente/index.html | 100 |
1 files changed, 0 insertions, 100 deletions
diff --git a/files/es/web/css/gradiente/index.html b/files/es/web/css/gradiente/index.html deleted file mode 100644 index ae187f2521..0000000000 --- a/files/es/web/css/gradiente/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: <gradient> -slug: Web/CSS/Gradiente -tags: - - CSS - - CSS tipo de datos - - Degradado - - Diseño - - Gradiente - - Referencia - - graficos -translation_of: Web/CSS/gradient ---- -<div>{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El tipo de datos <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code><gradient></code> indica un tipo de {{cssxref("<image>")}} que consiste de una transición progresiva entre dos o más colores (Degradado).</p> - -<p>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</p> - -<p>Un gradiente de CSS no es un {{cssxref("<color>")}} pero tampoco es una imagen con <a href="/es/docs/Web/CSS/image#no_intrinsic" title="CSS/image#no_intrinsic">dimensiones intrínsecas</a>; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.</p> - -<p><strong>Funciones de las Gradientes</strong></p> - -<p>Hay tres tipos de gradientes de color:</p> - -<ul> - <li id="linear-gradient"><em><strong>Linear gradients</strong>(gradiente lineal)</em>, generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria. - - <pre class="brush: html" style="display: none;">A rainbow made from a gradient -</pre> - - <pre class="brush: css">body { -background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); -background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); -background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); -background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); -background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); -}</pre> - - <p>{{ EmbedLiveSample('linear-gradient', 600, 20) }}</p> - </li> - <li id="radial-gradient"><em><strong>Radial gradient </strong>(gradientes radiales)</em>, generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será. - <pre class="brush: html" style="display: none;">Radial gradient - </pre> - - <pre class="brush: css">body { -background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent; -background: radial-gradient(red, yellow, rgb(30, 144, 255)); -} -</pre> - - <p>{{ EmbedLiveSample('radial-gradient', 600, 20) }}</p> - </li> - <li id="repeating-gradient"><em><strong>Repeating gradient </strong>(gradientes de repetición), </em>donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja. - <pre class="brush: html" style="display: none;">Repeating gradient -</pre> - - <pre class="brush: css">body { -background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); -background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px); -} </pre> - - <p>{{ EmbedLiveSample('repeating-gradient', 600, 20) }}</p> - </li> -</ul> - -<h2 id="Interpolación">Interpolación</h2> - -<p>Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando. (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent_keyword">transparent </a>" del inglés transparente ( para más información hacer clic en el link))</p> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Especificación</th> - <th>Estado</th> - <th>Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> - -<p>Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="Using gradients">Usando Gradientes CSS</a>, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> -</ul> |
