Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 XII

Otras propiedades

CSS3 tiene nuevas propiedades para los elementos de bloque o "cajas", las cuales modifican el aspecto de la caja o contenedor.

Propiedad resize

Esta propiedad permite al usuario modificar el tamaño de la caja, para ello tiene que arrastrarla desde la esquina inferior derecha. Sintaxis:

resize: none | both | horizontal | vertical;

El valor por defecto es none y no permite ninguna modificación. el valor horizontal permite cambiar el tamaño sólo en horizontal, el valor vertical permite cambiar el tamaño sólo en vertical, y el valor both permite la modificación en ambas dimensiones.

Para que funcione esta propiedad debemos poner también la propiedad:

overflow: auto;

Por tanto para que una caja (div id="capa1"></div>) pueda ser redimensionada por el usuario en horizontal y en vertical el código CSS es el siguiente:

#capa1 { resize: both; overflow; auto; }

Esta propiedad está disponible en Firefox, Safari, Chrome. No es compatible con Internet Explorer y Opera.

En el siguiente enlace vemos una página con ejemplos de la propiedad resize (Usa Firefox, Safari o Chrome para poder ver el efecto):

Propiedad resize

Propiedad box-sizing.

En CSS2 el espacio que ocupa una caja no es sólo la medida del contenedor en si, sino que a éste hay que añadirle el "margin" el "padding" y el "border" por lo que a menudo se complica el diseño al tener que calcular el sitio que ocupan estos elementos.

Con la propiedad box-sizing el "padding" y "border" quedan dentro del contenedor, de forma que el contenedor no amplia su tamaño inicial. sino que estos elementos le restan su tamaño al contenedor en sí, quedando este más pequeño.

La ventaja de usar esta propiedad es evidente: Además de la facilidad en el cálculo del sitio que ocupa cada contenedor, podemos redimiensionar estos espacios exteriores en uno de ellos sin tener que cambiar los del resto. La sintaxis de esta propiedad es:

box-sizing: content-box|border-box|inherit;

El valor content-box es el valor por defecto y deja el elemento tal y como estaba con CSS2. El valor border-box es el que realiza la transformación de la caja explicada anteriormente. El valor inherit hereda el valor de esta propiedad de su elemento padre.

Esta propiedad está disponible en Safari, Chrome, Opera e Internet Explorer. Firefox la tiene disponible en estado experimental: debemos usar el prefijo -moz-.

Por tanto para que una caja (div id="capa1"></div>) incluya dentro de su tamaño el "padding" y el "border" el código CSS es el siguiente:

#capa1 {box-sizing: border-box; -moz-box-sizing: border-box; }

En el siguiente enlace vemos una página con ejemplos de la propiedad box-sizing.

Propiedad box-sizing

Propiedad outline-offset

En CSS2 existe la propiedad outline que crea una línea de perfil alrededor de un elemento. Esta línea ocupa el mismo lugar que el borde o lo sustituye, sin embargo su grosor no es tenido en cuenta para la medida total de la caja. Los detalles sobre esta propiedad los podemos ver en Aprende Web: Curso CSS: 9.1 Cursor y perfil.

La propiedad outline-offset permite que esta línea de perfil se separe del borde del contenedor; de este modo se puede crear un doble borde en el elemento, ya sea por la parte externa o interna. Su sintaxis es:

outline-offset: <medida>|inherit:

Los valores de medida positivos alejan la línea del borde por la parte externa del elemento, los valores negativos la alejan por la parte interna. El valor inherit hereda el valor de esta propiedad de su elemento padre.

En el siguiente ejemplo, en una caja (div id="capa1"></div>) se incluye un perfil que se aleja del borde 15 px:

#capa1 { outline: 4px double blue; outline-offset: 15px; }

Esta propiedad es compatible con los navegadores Firefox, Safari, Chrome y Opera, no siendo compatible con Internet Explorer.

En el siguiente enlace vemos una página con ejemplos de la propiedad outline-offset (Usa Firefox, Safari, Chrome o Opera para poder ver el efecto):

Propiedad outline-offset

La propiedad appearance

La propiedad appearance permite dar a un elemento distintos tipos de apariencia. Aunque puede aplicarse a todos los elementos, está pensado más para los elementos en línea. su sintaxis es:

appearance: normal | icon | window | button | menu | field;

La propiedad sólo funciona parcial y experimentalmente en Firefox Safari y Chrome.

En Firefox debemos usar el prefijo -moz- y en Safari y Chrome el prefijo -webkit-; además el único valor que admite es button que da al texto una apariencia de botón de formulario: Ejemplo:

<span style="appearance: button; -moz-appearance: button; -webkit-appearance: button; " > apariencia button </span>

Este código lo veremos en el navegador de la siguiente manera (Debes usar MOzilla, Safari o Chrome para verlo bien):

apariencia button

Los demás valores no hacen ningún cambio en la apariencia del elemento aunque se supone que deberían mostrar: normal: apariencia normal; icon: apariencia de icono o pequeña imagen; window: apariencia de ventana; menu: apariencia de elemento de un menú; field: apariencia de campo de formulario tipo "input";




En la siguiente página veremos que CSS3 también incorpora nuevos tipos de selector.

Nuevos selectores



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo