La etiqueta (o cinta) son las imágenes que se colocan en la parte superior derecha o izquierda, y, a menudo forman una fascia ángulo. Existen varios tipos, desde simples imágenes estáticas a las películas de Flash más espectaculares. A veces se construyen con el fin de permanecer en su posición incluso cuando se desplaza el contenido de la ventana del navegador.
Si no quiere depender de servicios como QuickRibbon.com, pero queremos construir una cinta alrededor de usted, aquí hay 3 simples pasos a seguir.

1. Creamos la imagen

En primer lugar creamos la imagen que desea colocar en uno de la derecha o la izquierda. La imagen de abajo, de 163x163 pixels, ecostruita la esquina superior izquierda.

Para hacer el efecto de la pista de superposición debe elegir, cuando se guarda, un formato que apoya la transparencia, como GIF o PNG.

2. HTML

Nos salvó la imagen que se puede insertar en nuestras páginas, envolviendo la etiqueta img en un contenedor div que vamos a usar la posición de la imagen en la esquina:

Si nuestra etiqueta debe tener un enlace, podemos usar el map etiqueta para definir un punto caliente que no es rectangular. La etiqueta en este ejemplo, de hecho, tienen una forma sesgada y transparencia destaca perfectamente los contornos. Por lo tanto, sería impropio que le permiten hacer clic en un área en blanco, simplemente añadiendo una etiqueta a eje central de la imagen. Luego utilice esta sintaxis:

Las coords atributo de la area etiqueta define las coordenadas de nuestra cinta.

3. la CSS

Ahora agregue las definiciones de los estilos que permitirá a nuestros adhesivos colocados en la página correcta:

Si queremos que la cinta de permanecer "pegados" a la de vídeo, incluso si el desplazamiento, simplemente cambia la position estilo absolute en fixed

Nota: El tipo fixed en la position hasta hace poco, no fue apoyada por todos los navegadores. Para el efecto, de hecho, se vio obligado a utilizar una función de JavaScript que, a intervalos regulares, controlaba el flujo de contenidos de cualquier ventana y reemplazar la cinta de una manera que daba la impresión de ser esencialmente inmóvil. Afortunadamente, hoy en día, con alguna versión antigua del Explorer, todos los navegadores compatibles con el tipo fixed

Post relacionados

• Web2.0: Gran Paradiso Firefox 3.0 y Apollo (2)
• Web 2.0: Adobe está tratando de Apolo? (2)
• jQuery: los bordes redondos en las imágenes para la superposición (1)
• Muy corto truco: la forma de los elementos en la página, incluso en IE5 (3)
• Código Snipplr 2.0: fragmentos (Snipp) de código útil (0)

Fue útil esta información?:

Cargando ...