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++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 28
Visitas el mes pasado: 64
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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.
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;
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;
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.
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).
La página del siguiente enlace muestra varios ejemplos en los que se ha utilizado la propiedad background-size.
La propiedad border-origin indica el punto de origen desde el cual se posiciona la imagen de fondo. hay tres posibles valores:
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:
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;
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.
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