Las pegatinas (o cinta) son las imágenes que se colocan en la parte superior izquierda o la derecha superior, y por lo general tienen un rango de forma angular. Hay 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 mantener la posición de desplazamiento, incluso cuando la ventana del navegador.
Si no quiere depender de servicios tales como QuickRibbon.com , pero usted quiere construir una cinta alrededor de usted, aquí hay tres pasos simples a seguir.
1. Creamos la imagen
En primer lugar, creamos la imagen que desea colocar en uno de la derecha o izquierda. La imagen de abajo, de 163 × 163 píxeles, ecostruita a la esquina superior izquierda.
Para hacer la superposición efecto completo debe elegir, al guardar, un formato que soporta transparencia, como el GIF o PNG.
2. El código HTML
contenitore, che useremo puoi per posizionare l'immagine nell'angolo: Nos salvó la imagen que se puede poner en nuestras páginas, etiquetas envolviendo la img en un div contenedor, que va a utilizar para colocar la imagen a la:
1 |
Si nuestras pegatinas deben tener una relación, podemos hacer uso de las etiquetas de map para definir un área sensible, que no es rectangular. Las pegatinas se muestra en esta muestra, de hecho, tienen una forma oblicua y la transparencia destaca los contornos perfectamente. Por lo tanto, sería inapropiado hacer clic en un área vacía con sólo añadir una etiqueta a flujo alrededor de la imagen. Luego se utiliza la siguiente sintaxis:
1 2 |
definisce le coordinate del nostro ribbon. El atributo coords etiqueta de area define las coordenadas de nuestras cintas.
3. CSS
Vamos a agregar las definiciones de los estilos que le permitirá a nuestros adhesivos colocados en la página adecuada:
1 2 3 4 5 6 7 8 9 10 11 | {Div.ribbon absolute ; position: absolute; 0px ; left : 0px ; top: 0px; izquierda: 0px; 163px ; width : 163px ; height: 163px; ancho: 163px; 0 ; padding : 0 ; margin: 0; padding: 0; visible ; overflow: visible; none ; float: none; 10000 } z-index: 10000} {Div.ribbonimg 0 ; padding : 0 ; margin : 0 ; frontera: 0; padding: 0; margin: 0; none } background-image: none} |
in fixed : Si queremos que la cinta de permanecer "pegado" a la de vídeo, incluso si nos desplazamos por la ventana, solo cambia el absolute estilo de position en la fixed :
1 2 3 4 5 6 7 8 | {Div.ribbon fixed ; position: fixed; 0px ; left : 0px ; top: 0px; izquierda: 0px; 163px ; width : 163px ; height: 163px; ancho: 163px; 0 ; padding : 0 ; margin: 0; padding: 0; visible ; overflow: visible; none ; float: none; 10000 } z-index: 10000} |
, fino a poco tempo fa non era supportato da tutti i browser. Nota: el tipo
fixed, en el estilo deposition, hasta hace poco, no fue apoyada por todos los navegadores. Para hacer el efecto, de hecho, se vio obligado a usar una función javascript que, a intervalos regulares, controla el flujo de los contenidos de cualquier ventana y vuelva a colocar la cinta de modo que daba la impresión de que siguen siendo sustancialmente inmóvil. Afortunadamente, hoy en día, además de una versión antigua de Internet Explorer, todos los navegadores compatibles con el tipofixed.
[...] Cómo lo hice: Cómo crear una etiqueta de cinta en 3 pasos publicado en post gráficos relacionados: Creación de la interfaz de un sistema operativo con jQuery [...]
[...] ¿Te gustaría hacer una cinta con los gráficos personalizados que usted puede hacer esto utilizando divs y css. En este excelente post sobre Undolog se explicará paso a paso cómo hacerlo. Si utiliza un formato de imagen. Png [...]