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: 62

Visitas el mes pasado: 126

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 (III)

Más propiedades de fondos

imagen css3

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.

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:


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:


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.

Esquinas redondeadas



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