Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 38

Visitas el mes pasado: 54

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




CSS3 (XII)

Otras propiedades

imagen css3

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



Manual de CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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