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: 28
Visitas el mes pasado: 64
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>
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
CSS3 (III)
Más propiedades de fondos
Tamaño de la imagen de fondo
En CSS2 al poner una imagen de fondo no podíamos cambiar su tamaño, el fondo muestra la imagen en su tamaño real, sin poder modificarla. La unica posibilidad era modificar la imagen en sí misma, cambiándole el tamaño mediante un programa de retoque de imágenes (gif animator, photoshop, etc), y utilizar la imagen resultante.
Sin embargo en CSS3 hay una nueva propiedad para las imágenes de fondo: background-size, con la cual podemos definir el tamaño que tendrá la imagen de fondo.
PROPIEDAD background-size
Esta propiedad permite modificar la imagen de fondo variando su tamaño. Por supuesto antes debemos haber definido una imagen de fondo mediante background-image. Los valores que admite son medidas, porcentajes y las palabras clave auto, contain y cover.
auto : Es el valor por defecto, y muestra la imagen en su tamaño real.
background-size: auto;
Medidas : Podemos poner una o dos medidas. Si ponemos una medida se corresponde a la anchura de la imagen, la altura se ajustará proporcionalmente. Si ponemos dos medidas la primera corresponderá a la anchura y la segunda a la altura, la imagen se distorsionará si no se sigue la misma proporción que en las medidas reales. Podemos sustituir cualquier medida por la palabra clave auto, en este caso la imagen se ajustará en proporción a la otra medida.
background-size: 40px;
background-size: 40px 70px;
background-size: auto 70px;
Porcentajes : Podemos sustituir las medidas por porcentajes, el porcentaje se mide respecto a las medidas originales de la imagen. Podemos mezclar porcentajes, medidas, y/o la palabra auto en una misma propiedad.
background-size: 70% 80px;
background-size: auto 75%;
contain : El uso de este valor excluye el uso de medidas o porcentajes. Con contain la imagen de fondo ocupará todo el ancho o alto disponible, según lo que se llene primero; por lo que la imagen se verá siempre en su totalidad y al mayor tamaño posible. Si la imagen no se ajusta a las proporciones del contenedor quedará un hueco libre (en anchura o en altura, en el cual si hemos elegido la opcion background-repeat: repeat, veremos repetida parte de la imagen.
background-size: countain;
cover : Como en el anterior, al usar este valor no podemos usar medidas o porcentajes. En cover la imagen se amplia hasta ocupar todo el elemento, ajustándose a la anchura o altura, hasta que no quede ningún hueco libre. Si el elemento contenedor no es de la misma proporción que la imagen, parte de ésta no será visible por desbordarlo.
background-size: cover;
Múltiples imágenes de fondo
Vimos en la página anterior cómo incluir en un mismo fondo varias imágenes. Si hemos incluido varias imágenes en un mismo fondo y queremos aplicar diferentes tamaños a cada imagen, la propiedad background-size indicará los valores de tamaño de cada imagen separados por comas:
background-image: url(fondo1.gif), url(fondo2.gif);
background-size: cover, 75px 50px;
Propiedad tipo "shorthand"
Podemos incluir el background-size en la propiedad background tipo "shorthand", para ello lo indicaremos mediante una barra inclinada ( /80px 20px ) y después del backgound-position y antes del background-repeat:
background: img(fondo1.jpg) top left /75px 50px repeat;
El uso de esta propiedad tipo "shorthand" funciona en todos los navegadores,excepto en Safari, por lo que para poder mostarlo también en éste, debemos usar la propiedad de manera individual.
Compatibilidad con navegadores
La propiedad bacckground-size es compatible con las últimas versiones de Firefox, Safari, Chrome y Opera, Internet Explorer la admite también a partir de su versión 9 (IE9).
Ejemplos de background-size
La página del siguiente enlace muestra varios ejemplos en los que se ha utilizado la propiedad background-size.
Propiedades border-origin y border-clip
propiedad border-origin
La propiedad border-origin indica el punto de origen desde el cual se posiciona la imagen de fondo. hay tres posibles valores:
- border-box : valor por defecto. El punto de origen está en la esquina superior izquierda del borde de la caja. es decir dentro del borde.
- padding-box : El punto de origen está en la esquina superior izquierda, pero sin incluir los bordes.
- content-box : El punto de origen está en la esquina superior, pero sin incluir ni los bordes, ni el relleno (padding) de la caja.
Propiedad border-clip
Esta propiedad indica el espacio en el que será visible la imagen de fondo. Sus posibles valores son los mismos que para border-origin; es decir:
- border-box : valor por defecto. El fondo puede estar visible en cualquier punto de la caja, incluyendo los bordes
- padding-box : El fondo se verá en toda la caja, pero no en el borde
- content-box : El fondo se verá sólo en el contenedor de la caja, no se verá ni en los bordes ni en el relleno (padding).
Uso de estas propiedades
Al igual que el resto de las propiedades tipo backgound podemos también usarlas para multiples imágenes de fondo. En este caso los valores de cada imagen irán separados por comas.
La compatibilidad de estas propiedades con los navegadores es igual que en el resto de propiedades, es decir, están ya disponibles en las últimas versiones de Firefox, Safari, Chrome y Opera, y en Internet Explorer a partir de la versión 9.
Para incluir estas propiedades en una tipo "shorthand" (background) debemos poner su valor al final: Firefox, Safari y Chrome juntan las dos propiedades, por lo que solo adimten un valor que aplican conjuntamente a las dos propiedades, Opera, sin embargo reconoce las dos propiedades, debiendo poner sus valores en el orden: "origin" "clip".
Para Firefox, Safari y Chrome:
background: url(fondo1.gif) top left repeat content-box;
En Opera:
background: url(fondo1.gif) top left repeat padding-box content-box;
Ejemplos de background-origin y background-clip.
La página del siguiente enlace muestra varios elementos a los que se les han aplicado estas propiedades:
Propiedades background-origin y background-clip
En la siguiente página veremos cómo crear esquinas redondeadas para los elementos de bloque.
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