diff options
Diffstat (limited to 'files/es/web/css/zoom/index.md')
| -rw-r--r-- | files/es/web/css/zoom/index.md | 152 |
1 files changed, 0 insertions, 152 deletions
diff --git a/files/es/web/css/zoom/index.md b/files/es/web/css/zoom/index.md deleted file mode 100644 index 9266e89af4..0000000000 --- a/files/es/web/css/zoom/index.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: zoom -slug: Web/CSS/zoom -tags: - - CSS - - Propiedad CSS - - No estandar - - Referencia - - recipe:css-property -translation_of: Web/CSS/zoom ---- - -{{CSSRef}}{{Non-standard_header}} - -La propiedad [CSS](/es/docs/Web/CSS) no estándarizada **`zoom`** -se puede usar para controlar el aumento de escala de un elemento. -En la medida de lo posible se deben usar [transform: scale()](/es/docs/Web/CSS/transform-function/scale()) en vez de esta propiedad. - -```css -/* Keyword values */ -zoom: normal; -zoom: reset; - -/* <percentage> values */ -zoom: 50%; -zoom: 200%; - -/* <number> values */ -zoom: 1.1; -zoom: 0.7; - -/* Global values */ -zoom: inherit; -zoom: initial; -zoom: unset; -``` - -## Sintaxis - -### Valores - -- `normal` - - : Dibuja el elemento con su tamaño normal. -- `reset` {{non-standard_inline}} - - - : No cambia la escala del elemento (por ejemplo al presionar `<kbd>Ctrl</kbd> \+ <kbd>-</kbd>` o `<kbd>Ctrl</kbd> \+ <kbd>+</kbd>` ) - - - si el usuario aplica `non-pinch-zooming`. - Sólo soportado por WebKit (y posiblemente Blink). - -- {{cssxref("<percentage>")}} - - : Factor de Zoom. `100%` es a tamaño `normal`. Valores superiores a ` 100%` aumentan y valores inferiores al `100%` encogen el elemento. -- {{cssxref("<number>")}} - - : Factor de Zoom. Equivalente al porcentaje correspondiente (`1.0` = `100%` = `normal`). Valores mayores de `1.0` aumentarán el tamaño. Valores menores de `1.0` encogerán. - -## Definición Formal - -{{cssinfo}} - -## Sintaxis Formal - -{{csssyntax}} - -## Ejemplos - -### Primer ejemplo - -#### HTML - -```html -<p class="small">Small</p> -<p class="normal">Normal</p> -<p class="big">Big</p> -``` - -#### CSS - -```css -p.small { - zoom: 75%; -} -p.normal { - zoom: normal; -} -p.big { - zoom: 2.5; -} -p { - display: inline-block; -} -p:hover { - zoom: reset; -} -``` - -#### Result - -{{EmbedLiveSample('First_example')}} - -### Segundo ejemplo - -#### HTML - -```html -<div id="a" class="circle"></div> -<div id="b" class="circle"></div> -<div id="c" class="circle"></div> -``` - -#### CSS - -```css -div.circle { - width: 25px; - height: 25px; - border-radius: 100%; - text-align: center; - vertical-align: middle; - display: inline-block; - zoom: 1.5; -} -div#a { - background-color: gold; - zoom: normal; -} -div#b { - background-color: green; - zoom: 200%; -} -div#c { - background-color: blue; - zoom: 2.9; -} -``` - -#### Resultado - -{{EmbedLiveSample('Second_example')}} - -## Especificaciones - -Esta propiedad no es estándar y tiene su origen en Internet Explorer. -Apple tiene [una descripción en la Referencia CSS de Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15). - -## Compatibilidad del navegador - -{{Compat}} - -## Ver además - -- [Artículo de `zoom` en la página de CSS-Tricks](https://css-tricks.com/almanac/properties/z/zoom/) -- [Bug 390936: Implementar la propiedad `zoom` de Internet Explorer para CSS](https://bugzilla.mozilla.org/show_bug.cgi?id=390936) en el rastreador de problemas de Firefox Bugzilla. |