Los Carteles que flotan con CSS

Los Carteles que flotan

Buenas, ahora un tutorial sobre un cartel de texto que da buenas expectativas y curiosidad de como obtenerlo, hay muchas formas de fijar carteles en una página web; pueden ser simples o sofisticados pero, todos ellos se basan en el uso de la misma propiedad CSS: position: fixed que hace justamente eso, fijar una etiqueta de tal modo que queda siempre en la misma posición.

Esa posición se establece indicando el valor de cuatro posibles propiedades: left top right y bottom donde top:0; left:0; es el ángulo superior izquierdo de la ventana del navegador y bottom:0; right:0; es el ángulo inferior derecho.

Dado que esa posición depende del tamaño de la ventana, es posible que en monitores con resoluciones de pantalla muy grandes, el cartel se muestre "muy lejos"; eso suele resolverse con JavaScript pero, si uno no quiere complicarse, basta establecer la posición utilizando porcentajes como left: 50%.

Su le puede añadir cualquier contenido, texto - descripción, tablas, enlaces, videos ... Siempre y cuando aya un enlace de cerrar.

Comienza pegando los estilos, puedes cambiarlos y adaptarlos a tu gusto:

<style> #fijo { background-color: #678; border: 1px solid #234; bottom: 20px; color: #FFF; font-size: 16px; outline: 1px solid #CCC; padding: 10px; position: fixed; left: 50%; text-align: center; text-shadow: 1px 1px 1px #000; width: 300px; z-index: 1; } #fijo a { /* depende de la imagen a usar */ display: block; float: right; height: 35px; width: 35px; } </style>

Y por ultimo incorporando el Html de este:

<div id="fijo"> <a href="javascript:void(0);" onclick="document.getElementById('fijo').style.display='none';"> <img src="URL_IMAGEN" /> </a> <p> ....... el contenido ....... </p> </div>

El resultado visible en la entrada, /yo le edite el color y la posición/ →.

1.  ¿Te gusto? → Síguenos en nuestra redes sociales
2. Si tienes dudas, comenta todas serán respondidas.

Dale me gusta :d a este gran post  

¡Compártelo!

Tweet