Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.



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 todos los navegadores exceprto en Internet Explorer.

En el siguiente enlace vemos una página con ejemplos de la propiedad resize :

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 uno sólo de estos espacios sin tener que cambiar los demás para que la caja ocupe lo mismo. 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 para todos los navegadores, aunque Firefox hasta hace poco tiempo sólo la tenía en su forma experimental.

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; }

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 el manual de CSS, página 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 Firefox, 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

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com