Con la finalidad de captar la atención de usuarios
con ilustraciones detrás de textos, modificaremos fondos avanzados con imagen
en documentos CSS. Algunos creadores de páginas de internet pasan largas horas
para realizar ajustes a imágenes con la finalidad de unir varias y obtener la
deseada. Por este motivo, identificaremos las etiquetas de CSS para mostrar varias
imágenes en una sola instrucción.
La propiedad para definir fondos CSS
es background, tiene gran utilidad al
momento de agregar vistosidad a páginas web.
Ella permite aplicar diferentes valores por separado como color, image, repeat, position y
attachment, aunque también podemos definirlos en una misma instrucción, por
petenecer a la clasificación shorthand de
este lenguaje. Con esta propiedad es posbile definir los valores blue, repeat, center y fixed en diferentes instrucciones, o todos
en la misma línea como se muestra en la siguiente ilustración:
061-01_0707_ilu01.
Propiedad shorthand de background
Con el lenguaje CSS es posible
especificar múltiples fondos, es decir, interponer uno sobre otro con el fin de
crear diseños profesionales. Para ello, especificaremos en background-image todas las ubicaciones, además, agregaremos valores
de repetición y posicionamiento en el mismo orden, con la finalidad de lograr
pulcritud. En el siguiente ejemplo tenemos tres imágenes con el mismo logo, sin
repetirse y con diferentes tonos:
061-01_0707_ilu02.
Creación correcta de múltiples fondos
- En el
primero, la esta ubicada en la parte de abajo.
- En la
segunda, esta ubicada a la izquierda.
- En la
tercera, se muestra a la derecha y arriba.
Existe una consideración
importante a tomar el cuenta cuando se definen múltiples imágenes. Sin una
posición específica de cada una, al definir la primera imagen es mostrada de
primero por el navegador web, y las
siguientes debajo. Por este motivo, en el siguiente ejemplo, solo se ve el logo
en negro, los demás están detrás.
061-01_0707_ilu03.
Creación incorrecta de múltiples fondos
Debido al avance de CSS, la
especificación de múltiples imágenes se simplifica debido a que pertenece a la
clasificación shorthand descrita
anteriomente. Para ello:
- Definimos
la propiedad background.
- Agregamos
las ubicaciones de las imágenes.
- Especificamos
la condición de repetición en el mismo orden.
- Delimitamos
la posición para cada imagen.
Gracias a ello, con solo una instrucción,
aplicamos nueve valores a un elemento de bloque.
061-01_0707_ilu04.
Creación simplificada de múltiples fondos
Keynotes
- La propiedad para definir fondos CSS es background, tiene gran utilidad al
momento de agregar vistosidad a páginas web.
Ella permite aplicar diferentes valores por separado como color, image, repeat, position y
attachment, aunque también podemos definirlos en una misma instrucción, por
petenecer a la clasificación shorthand de
este lenguaje.
- Con el lenguaje CSS es posible especificar
múltiples fondos, es decir, interponer uno sobre otro con el fin de crear
diseños profesionales. Para ello, especificaremos en background-image todas las ubicaciones, además, agregaremos valores
de repetición y posicionamiento en el mismo orden.
- Debido al avance de CSS, la especificación
de múltiples imágenes se simplifica debido a que pertenece a la clasificación shorthand descrita anteriomente.
RetoDefine una propiedade de background según la clasificación shorthand. Agrega cuantro imágenes
diferentes y sigue las recomendaciones oficiales de CSS.
¡Comparte el resultado final del
reto en tu vKontact y solicita a tus compañeros una sugerencia de
optimización!
Tiempo disponible: entre 15 y 30
minutos.
CierreAl utilizar la propiedad de modificación de fondos avanzados
con imagen en documentos CSS, optimizamos el tiempo al momento de realizar
ajustes a imágenes, con la finalidad de unir varias de ellas y obtener la deseada.
Con paciencia, creatividad y organización creamos páginas web pulcras, con ilustraciones llamativas detrás de textos, a fin
de captar la atención de usuarios.
