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/cursor | |
| 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/cursor')
| -rw-r--r-- | files/es/web/css/cursor/index.html | 322 | ||||
| -rw-r--r-- | files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html | 39 |
2 files changed, 361 insertions, 0 deletions
diff --git a/files/es/web/css/cursor/index.html b/files/es/web/css/cursor/index.html new file mode 100644 index 0000000000..d8a0080831 --- /dev/null +++ b/files/es/web/css/cursor/index.html @@ -0,0 +1,322 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - Referencia_CSS +translation_of: Web/CSS/cursor +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <a href="es/CSS/cursor">CSS:cursor</a> especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.</p> + +<ul> + <li><a href="es/CSS/Valor_inicial">CSS:Valor_inicial</a>:<code> <a href="es/CSS/auto">CSS:auto</a></code></li> + <li>Se aplica a: todos los elementos</li> + <li><a href="es/CSS/inheritance">CSS:inheritance</a>: Si</li> + <li>Porcentaje: N/A</li> + <li>Media: <a href="es/CSS/Media/Visual">CSS:Media:Visual</a>, <a href="es/CSS/Media/Interactivo">CSS:Media:Interactivo</a></li> + <li><a href="es/CSS/Valor_calculado">CSS:Valor_calculado</a>:como sea especificado con URLs relativos convertidos a URLs absolutos.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | <a href="es/CSS/inherit">CSS:inherit</a> ; +</pre> + +<pre class="eval">cursor: [<url> [<x> <y>]?,]* <std-cursor-name> ; +</pre> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><url> {{ mediawiki.external(' ') }}? </dt> + <dd>URL del cursor seleccionado mas posición opcional. Mas de un URL puede provocar problemas, in caso de que algunos tipode de imágenes de cursor no puedan ser usados.vea <a href="es/Uso_de_URL_como_valor_de_la_propiedad_cursor">Uso_de_URL_como_valor_de_la_propiedad_cursor</a> para mas detalles.</dd> + <dt><std-cursor-name></dt> + <dd>Algunos nombres de cursores se encuentra en la siguiente tabla.</dd> +</dl> + +<h4 id="Supported_CSS_standard_values" name="Supported_CSS_standard_values">Supported CSS standard values</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Categoría</th> + <th>nombre de CSS</th> + <th>Descripción</th> + </tr> + <tr> + <td rowspan="3">General</td> + <td style="cursor: auto;"><code>auto</code></td> + <td>El browser (user agent) determina el cursor que mostrara basado en el contenido presente.<br> + E.g. equivalent to <code>text</code> when hovering text</td> + </tr> + <tr> + <td style="cursor: default;"><code>default</code></td> + <td>default cursor (typically an arrow)</td> + </tr> + <tr> + <td style="cursor: none;"><code>none</code></td> + <td>no cursor is rendered {{ Fx_minversion_inline(3) }}</td> + </tr> + <tr> + <td rowspan="5">Links & status</td> + <td style="cursor: context-menu;"><code>context-menu</code></td> + <td>cursor indicating that a context menu is available under the cursor</td> + </tr> + <tr> + <td style="cursor: help;"><code>help</code></td> + <td>cursor indicating help is available</td> + </tr> + <tr> + <td style="cursor: pointer;"><code>pointer</code></td> + <td>cursor used when over links (typically a hand)</td> + </tr> + <tr> + <td style="cursor: progress;"><code>progress</code></td> + <td>cursor indicating that the program is busy in the background but the user can still interact with the interface (unlike for <code>wait</code>)</td> + </tr> + <tr> + <td style="cursor: wait;"><code>wait</code></td> + <td>cursor indicating the program is busy (sometimes an hourglass or a watch)</td> + </tr> + <tr> + <td rowspan="4">Selection</td> + <td style="cursor: cell;"><code>cell</code></td> + <td>cursor indicating that cells can be selected</td> + </tr> + <tr> + <td style="cursor: crosshair;"><code>crosshair</code></td> + <td>cross cursor, often used to indicate selection in a bitmap</td> + </tr> + <tr> + <td style="cursor: text;"><code>text</code></td> + <td>cursor indicating text can be selected (typically an I-beam)</td> + </tr> + <tr> + <td style="cursor: vertical-text;"><code>vertical-text</code></td> + <td>cursor indicating that vertical text can be selected (typically a sideways I-beam)</td> + </tr> + <tr> + <td rowspan="5">Drag and drop</td> + <td style="cursor: alias;"><code>alias</code></td> + <td>cursor indicating an alias or shortcut is to be created</td> + </tr> + <tr> + <td style="cursor: copy;"><code>copy</code></td> + <td>cursor indicating that something can be copied</td> + </tr> + <tr> + <td style="cursor: move;"><code>move</code></td> + <td>the hovered object may be moved</td> + </tr> + <tr> + <td style="cursor: no-drop;"><code>no-drop</code></td> + <td>cursor showing that a drop is not allowed at the current location</td> + </tr> + <tr> + <td style="cursor: not-allowed;"><code>not-allowed</code></td> + <td>cursor showing that something cannot be done</td> + </tr> + <tr> + <td rowspan="15">Resize & scrolling</td> + <td style="cursor: all-scroll;"><code>all-scroll</code></td> + <td>cursor showing that something can be scrolled in any direction (panned)</td> + </tr> + <tr> + <td style="cursor: col-resize;"><code>col-resize</code></td> + <td>cursor for resizing columns horizontally</td> + </tr> + <tr> + <td style="cursor: e-resize;"><code>e-resize</code></td> + <td>cursor for resizing the right edge of a box</td> + </tr> + <tr> + <td style="cursor: ew-resize;"><code>ew-resize</code></td> + <td>cursor for resizing left or right</td> + </tr> + <tr> + <td style="cursor: n-resize;"><code>n-resize</code></td> + <td>cursor for resizing the top edge of a box</td> + </tr> + <tr> + <td style="cursor: ne-resize;"><code>ne-resize</code></td> + <td>cursor for resizing the top right corner of a box</td> + </tr> + <tr> + <td style="cursor: nesw-resize;"><code>nesw-resize</code></td> + <td>cursor for resizing in the top-right or bottom-left directions</td> + </tr> + <tr> + <td style="cursor: ns-resize;"><code>ns-resize</code></td> + <td>cursor for resizing up or down</td> + </tr> + <tr> + <td style="cursor: nw-resize;"><code>nw-resize</code></td> + <td>cursor for resizing the top left corner of a box</td> + </tr> + <tr> + <td style="cursor: nwse-resize;"><code>nwse-resize</code></td> + <td>cursor for resizing in the top-left or bottom-right directions</td> + </tr> + <tr> + <td style="cursor: row-resize;"><code>row-resize</code></td> + <td>cursor for resizing rows vertically</td> + </tr> + <tr> + <td style="cursor: s-resize;"><code>s-resize</code></td> + <td>cursor for resizing the bottom edge of a box</td> + </tr> + <tr> + <td style="cursor: se-resize;"><code>se-resize</code></td> + <td>cursor for resizing the bottom right corner of a box</td> + </tr> + <tr> + <td style="cursor: sw-resize;"><code>sw-resize</code></td> + <td>cursor for resizing the bottom left corner of a box</td> + </tr> + <tr> + <td style="cursor: w-resize;"><code>w-resize</code></td> + <td>cursor for resizing the left edge of a box</td> + </tr> + </tbody> +</table> + +<h4 id="Extended_Gecko_CSS_values" name="Extended_Gecko_CSS_values">Extended Gecko CSS values</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>CSS name</th> + <th>Description</th> + <th>Deprecation</th> + </tr> + <tr> + <td style="cursor: -moz-alias;"><code><a href="es/CSS/-moz-alias">-moz-alias</a></code></td> + <td>replaced by standard value <code>alias</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-cell;"><code><a href="es/CSS/-moz-cell">-moz-cell</a></code></td> + <td>replaced by standard value <code>cell</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-context-menu;"><code><a href="es/CSS/-moz-context-menu">-moz-context-menu</a></code></td> + <td>replaced by standard value <code>context-menu</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-copy;"><code><a href="es/CSS/-moz-copy">-moz-copy</a></code></td> + <td>replaced by standard value <code>copy</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-grab;"><code><a href="es/CSS/-moz-grab">-moz-grab</a></code></td> + <td>a cursor value that should indicate that an element or an object in a webpage can be grabbed</td> + <td> </td> + </tr> + <tr> + <td style="cursor: -moz-grabbing;"><code><a href="es/CSS/-moz-grabbing">-moz-grabbing</a></code></td> + <td>a cursor value that should indicate that an element or an object is currently being grabbed</td> + <td> </td> + </tr> + <tr> + <td style="cursor: -moz-spinning;"><code><a href="es/CSS/-moz-spinning">-moz-spinning</a></code></td> + <td>replaced by standard value <code>progress</code> as described in the previous table</td> + <td>Gecko 1.7.1</td> + </tr> + <tr> + <td style="cursor: -moz-zoom-in;"><code><a href="es/CSS/-moz-zoom-in">-moz-zoom-in</a></code></td> + <td>used to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified</td> + <td> </td> + </tr> + <tr> + <td style="cursor: -moz-zoom-out;"><code><a href="es/CSS/-moz-zoom-out">-moz-zoom-out</a></code></td> + <td>used to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Examples" name="Examples">Examples</h3> + +<p><a href="/samples/cssref/cursor.html">Ver El Ejemplo Vivo</a></p> + +<pre>Inline: + +<span style="cursor: crosshair">Some Text</span> + +External: + +.pointer { + cursor: pointer; +} +.move { + cursor: move; +} + +</pre> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p>While this property works on older browsers, not all values are fully supported.</p> + +<h3 id="Specifications" name="Specifications">Specifications</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">css3-ui</a></li> +</ul> + +<h3 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Lowest Version (<code><std-cursor-name></code>)</th> + <th>Lowest Version (<code><url></code>)</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + <td>6 (only <code>.cur</code> files)</td> + </tr> + <tr> + <td>Firefox</td> + <td>1.0</td> + <td>1.5</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + <td>8</td> + </tr> + <tr> + <td>Opera</td> + <td>7</td> + <td>-</td> + </tr> + <tr> + <td>Konqueror</td> + <td>3.1</td> + <td>3.1</td> + </tr> + <tr> + <td>Safari</td> + <td>1.2</td> + <td>1.2</td> + </tr> + <tr> + <td>Safari (Win)</td> + <td>3.0</td> + <td>3.0</td> + </tr> + </tbody> +</table> + +<h3 id="See_also" name="See_also">See also</h3> + +<p>{{ languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor", "en": "en/CSS/cursor" } ) }}</p> diff --git a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html new file mode 100644 index 0000000000..b59b5f677d --- /dev/null +++ b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html @@ -0,0 +1,39 @@ +--- +title: Uso de URL como valor de la propiedad cursor +slug: Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +<p><a href="/es/Gecko" title="es/Gecko">Gecko</a> 1.8 (<a href="/es/Firefox_1.5_para_Desarrolladores" title="es/Firefox_1.5_para_Desarrolladores">Firefox 1.5</a>, SeaMonkey 1.0) soporta el uso de URLs como valores para la <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#propdef-cursor">propiedad cursor</a> (CSS2). Esto nos permite definir la imagen que queremos como puntero del ratón, además podemos usar cualquiera de los formatos gráficos soportados por Gecko.</p> +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> +<p>La sintaxis de esta propiedad es:</p> +<pre class="eval">cursor: [<url>,]* cursor-genérico; +</pre> +<p>Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que <strong>deben</strong> ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. <code>help</code> o <code>pointer</code>.</p> +<p>Los siguientes valores están permitidos:</p> +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg</span>), help; +</pre> +<p>Primero se intentará cargar <em>foo.cur</em>. Si este archivo no existe o no es válido por alguna otra razón, se probará con <em>firefox.jpg</em>, y si este tampoco puede ser cargado, se usará <em>help</em>.</p> +<p>El soporte a la <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">sintaxis de CSS3</a> para los valores de cursor fue añadido en Gecko 1.8beta3; por lo tanto en Firefox 1.5 funciona. Esto permite especificar las coordenadas del punto en el que la imagen del cursor es fijada al área activa. Si no se especifican, las coordenadas del punto de contacto son tomadas del propio archivo (para archivos CUR y XBM) o se fijan en la esquina superior izquierda de la imagen.</p> +<p>Un ejemplo de la sintaxis CSS3:</p> +<pre class="eval">cursor: url(<span class="nowiki">http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg</span>), auto; + +cursor: url(<span class="nowiki">http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg</span>) 90 90, auto; +</pre> +<p><br> + El primer número es la coordenada X, y el segundo la coordenada Y. El ejemplo anterior pone el punto de contacto del área activa a (90,90) píxeles de la esquina superior izquierda (0,0).</p> +<h3 id="Limitaciones" name="Limitaciones">Limitaciones</h3> +<p>Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.</p> +<p>Gecko no limita el tamaño de los cursores. Sin embargo, quien busque la máxima compatibilidad multiplataforma debería limitarlos a un tamaño de 32x32, los cursores más grandes no funcionarán en Windows 9x (95, 98, MÍ).</p> +<p>Los cursores translúcidos no estan soportados en las versiones de Windows anteriores a XP. Esto es una limitación del sistema operativo. La transparencia funciona en todas las plataformas.</p> +<p>Solo las versiones de Mozilla para Windows, OS/2 y GNU/Linux (usando GTK+ 2.4 o superior) soportan valores URL para los cursores. El soporte en otras plataformas podría ser añadido en futuras versiones: (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p> +<h3 id="Compatibilidad_con_otros_navegadores" name="Compatibilidad_con_otros_navegadores">Compatibilidad con otros navegadores</h3> +<p>Microsoft Internet Explorer también soporta URI como valor para la propiedad <code>cursor</code>. Sin embargo, solo soporta los formatos gráficos CUR y ANI. Además, es menos estricto con la sintaxis de la propiedad <code>cursor</code>. Esto significa que declaraciones como:</p> +<pre class="eval">cursor: url(foo.cur); +</pre> +<p>O:</p> +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> +<p>funcionarán en MSIE, pero no lo harán en los navegadores basados en Gecko. Para ser compatible con Gecko y actuar conforme a la especificación de CSS2.1, ponga la lista de URIs primero, y ponga siempre <strong>un</strong> cursor genérico <strong>al final</strong>. <span class="comment">: ''To-do: document what MSIE does with CSS 3 hotspot locations''</span></p> |
