3 minute read
Fondos
Un elemento multimedia que hemos usado mucho en este libro, es la imagen de fondo en las páginas; para ello, usamos una propiedad de estilo como: background-image: url("fondos/bordea.png");, que igual puede servir para
establecer el fondo de un párrafo (<p>) o de una división (<div>). Inicialmente, presentamos el método para generar el fondo de dos páginas (como las que estás viendo) y, al final, un ejemplo de un fondo en un párrafo.
Advertisement
El método, permite que tengamos la imagen completa cubriendo las dos páginas, es un método fácil y rápido de utilizar. Nuestro libro tiene páginas de un tamaño de 640×825 pixeles, lo que implica que debemos tener una imagen de 1280×825 pixeles21 . Dado el tamaño de la página es posible usar una imagen un poco menor (a escala), por ejemplo 1040×670 pixeles o 1024×660 (80% del tamaño real), igual el método la ajusta al tamaño real.
Para la página de la izquierda, se usa el siguiente código al inicio de la página:
<div class= "page" style=
21
No es necesario ser tan precisos, igual sirven imágenes con dimensiones mayores, lo importante es que el fondo final capture la esencia o lo más importante de la imagen.
Observa que se declara el tamaño real de las dos páginas, la posición a la izquierda y un borde nulo, en nuestra página no usamos el borde nulo, pues la línea divisoria da una mejor apariencia al libro; no obstante, eres libre de ponerla o no.
Para la página de la derecha, se usa el siguiente código al inicio de la página:
<div class= "page" style=
Para el siguiente párrafo, hemos usado:
<p style= "background-image: url('fondos/tierra.jpg'); color:white; padding:1em; border-radius:5px;">
Es importante que uses imágenes que no tengan restricciones de derechos de propiedad intelectual. La imagen de fondo para esta página, la hemos descargado desde https://free-images.com/ y el tipo patrón desde thepatternlibrary.com/.
Otra alternativa es usar imágenes tipo patrón, más pequeñas en dimensiones y peso. En este párrafo estamos usando una imagen de 80×67 pixeles, incluyendo en el estilo la propiedad: background-size:80px 67px;.
Imágenes de fondo en párrafos
Podemos poner imágenes de fondo en un párrafo, usando un estilo en la etiqueta, como el siguiente: style= "height:
350px; background-size: 540px 350px; backgroundimage: url('imagenes/fondo.jpg'); backgroundrepeat: no-repeat; color: white; padding: 1em; border-radius: 15px; text-shadow: 4px 4px 8px #00f; padding-top: 225px;" .
AliquamAliquam dolordolor arcu, arcu, efficiturefficitur sedsed malesuadamalesuada eget, eget, ultriciesultricies eueu odio. odio. IntegerInteger pharetra,pharetra, puruspurus aa venenatisvenenatis vehicula, vehicula, exex leo vehicula tellus, mattis interdum ante risus auctor nibh. leo vehicula tellus, mattis interdum ante risus auctor nibh. QuisqueQuisque inin vestibulumvestibulum purus.purus. SedSed sedsed imperdietimperdiet sem, sem, vitae hendrerit sapien. vitae hendrerit sapien.
Es posible usar fondos sin necesidad de incorporar imágenes, como el que se muestra en la siguiente página.
Fondo de página usando degradados con el siguiente estilo:
<div class= "page"
style=
Los degradados CSS permiten mostrar transiciones suaves entre dos o más colores especificados. Existen dos tipos de degradados: lineales y radiales. En este apartado nos ocuparemos de los degradados lineales.
Para un fondo de página con un degradado lineal, observa el siguiente video:
El video, también, explica cómo diseñar las imágenes de fondo en párrafos.
Imágenes flotantes en párrafos
Este párrafo tiene insertada una imagen al principio del párrafo. Se trata del logotipo de GNU. GNU es un acrónimo recursivo que significa “GNU is Not Unix ” (GNU No es Unix). GNU es un proyecto de software libre iniciado por Richard Stallman en 1984. La imagen debe “flotar” a la izquierda y el texto debe fluir a su derecha.
El código usado es el siguiente:
<p><img style=
También, podemos usar imágenes con la clase image _ expand.
Este párrafo tiene insertada una imagen a la derecha del párrafo. Se trata del logotipo de GNU. GNU es un acrónimo recursivo que significa “GNU is Not Unix ” (GNU No es Unix). GNU es un proyecto de software libre iniciado por Richard Stallman en 1984. La imagen debe “flotar” a la derecha y el texto debe fluir a su izquierda.
<p><img style=
