Categoría: Css
Parece estar de moda eso de poner una pequeña imagen flotante fija, a la derecha o izquierda del blog. No hay duda de que queda bien, y es bastante llamativo, idóneo si quieres transmitir alguna información o enlace a tus lectores.
Tan solo debes buscar o diseñar una imagen adecuada, utilizar un poco de CSS, y ya tienes tu imagen flotante.
Imagen flotante con CSS
Debes colocar el siguiente código antes de la etiqueta </head>, cambiando evidentemente "enlace" e "imagen", por las direcciones correspondientes.
<a href="enlace" style="position: fixed; top: 350px; right: 0px; display: scroll;">
<img src="imagen" />
</a>
Obtendrás una imagen más o menos centrada en la parte derecha de la pantalla, ejemplo:
Puedes modificar la altura aumentando o disminuyendo el valor del parámetro top.
Posición de la imagen flotante
Es posible configurar la posición de la imagen flotante a tu gusto, variando algunos parámetros.
Tomando como referencia el código anterior:
- Parte Superior: Cambia el valor del parámetro top: 350px; por top: 0px;
- Parte Inferior: Quita el parámetro top: 350px; y sustitúyelo por bottom: 0px;
- Parte Izquierda: Cambia el parámetro right: 0px; por left: 0px;
Aviso: El único inconveniente es que para versiones antiguas de IE, verán la imagen flotante justo encima de la cabecera del blog, ya que no reconocen la propiedad "fixed".
Si bien es posible imprimir un artículo de una página web, normalmente al intentarlo, lo que ocurrirá es que se imprimirá toda la página incluyendo los elementos innecesarios, como el menú.
Pero esto tiene una sencilla solución, basta con añadir una hoja de estilos CSS, orientada exclusivamente para imprimir.
Hoja CSS para Imprimir
La hoja de estilos se invoca en el <head>, desde un documento externo:
<link rel="stylesheet" href="estilos.css" type="text/css" />
La idea es crear otra hoja de estilos CSS para imprimir, añadiendo la propiedad media="print".
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Modificar CSS
Ahora, hay que modificar la nueva hoja, para eliminar todas las propiedades que no correspondan al artículo, que es lo que interesa mostrar.
Para ocultar un elemento hay que usar la propiedad "display : none".
#menu {display: none!important}
No olvides usar la regla !important para que tenga prioridad sobre la otra hoja de estilos.
También puedes hacer visible la URL de los enlaces con la siguiente propiedad:
a:after {content: " [" attr(href) "] "!important;}
Se verá así: MirarPorMirar [http://www.mirarpormirar.com/]
Además, recomiendo aumentar el tamaño de la fuente, la anchura de los artículos para que ocupe toda la página, e incluso el color de la fuente para que gaste menos tinta.
Botón para Imprimir
Ahora recurrimos al JavaScript para colocar un botón que permita al usuario imprimir un determinado artículo.
Código del botón
<a href="#" onclick="window.print(); return false;">
<img src="imagen.png" />
</a>
Vista previa
Puedes previsualizar los resultados sin necesidad de tener que imprimir, para ello, mediante el navegador Firefox, haz clic en Archivo / Vista Preliminar.
¿Es útil conocer el funcionamiento de los colores usados en CSS?, porque bien pensado podríamos utilizar alguna herramienta online, Photoshop, o simplemente consultar una página como Html Color Codes.
La verdad es que en algunas ocasiones es más cómodo establecer un color manualmente, por ejemplo un color primario, o si tras elegir un color determinado quieres oscurecerlo o aclararlo un poco. Y bueno dado que este sistema de colores es realmente simple, creo que vale la pena conocerlo.
Colores RGB o RVA
Los códigos de colores RGB o RVA, están representados por 3 pares de caracteres Hexadecimales (De 0 a 9 y de A hasta F), pudiendo llegar a obtener más de 16 millones de colores distintos.
Rojo, Verde y Azul (#000000), cada par es un color primario, que va desde 00 hasta FF. El primer caracter de cada par equivale a la intensidad y el segundo al color.
Todos los demás colores se obtienen aumentando los valores de estos 3 pares, por ejemplo los colores primarios se obtienen aumentando tan solo uno de los pares.
- #FF0000
- #00FF00
- #0000FF
Lógicamente combinando los 3 colores primarios obtenemos el color blanco y mediante la ausencia de cualquiera de los tres colores obtenemos el negro.
- #FFFFFF
- #000000
Además, mediante las distintas combinaciones de 2 primarios, obtenemos colores tales como Amarillo, Magenta o Cyan.
- #FFFF00
- #FF00FF
- #00FFFF
A partir de ahí, tan solo debemos realizar diferentes combinaciones para ir obteniendo el resto de los colores secundarios y terciarios.
- #FF8800
- #880000
- #8800FF
- #888888
Aclarar u oscurecer un color
Añadiéndole un poco más de complejidad al asunto, podemos aclarar u oscurecer un determinado color aumentando o disminuyendo el primer carácter de cada uno de los pares.
Oscurecer un color
- #8F0000
- #4F0000
- #2F0000
- #0F0000
Aclarar un color
- #8F0000
- #BF0000
- #DF0000
- #FF0000
El ejemplo está hecho con un color primario, sin embargo ocurre lo mismo con cualquier otro color, variando el primer caracter de cada par (#00 00 00), obtenemos distintas tonalidades de ese mismo color.
Categorías
Archivos
Blogroll
Enlázanos
Si te gusta MirarPorMirar, puedes poner un enlace en tu web o blog.