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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 21
Visitas el mes pasado: 50
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
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 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 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):
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.
imprimir esta página
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