JMiur [E]

Fokus es un script interesante aunque el resultado final dependerá mucho de la página donde se quiera utilizar, tanto de su color de fondo como de la forma en que está estructurada. Lo que hace es resaltar cualquier cosa que uno haya seleccionado, cubriendo el resto de la página con una cierta opacidad.

Justamente, es esa opacidad lo que hace que el resultado sea variable porque está pensada para fondos claros y no posee opciones de configuración aunque, si se quiere, se podría modificar el script, buscando esta línea y colocando allí el color a utilizar en formato rgba():

v.fillStyle="rgba( 0, 0, 0, "+t+" )";
Por ejemplo, si quisierámos que fuera una opacidad en blanco, sería:
v.fillStyle="rgba( 255, 255, 255, "+t+" )";

El script no utiliza librería así que puede agregarse en cualquier sitio aunque, como usa la etiqueta canvas, no se verá en versiones inferiores de Internet Explorer. Lo podemos descargar desde github y basta agregarlo antes de </head>


REFERENCIAS:lab.hakim

7 comentarios:

Magoplup  

Da un toque especial me gusta :)

Responder
Graciela de Palomas  

Queda rebonito :)

Responder
Don Choky  

Hola, que tal. ¿Podria ayudarme con algo? Estoy tratando de acomodar la cabcera de este blog (http://eltecblog.blogspot.mx/), pero por mas que he buscado en el codigo, no encuentro la linea donde pueda modificarlo. Intente con otras, pero sigue quedando ese espacio en la izquierda.

JMiur  

El blog al que haces referencia no es público así que no puedo verlo.

Don Choky  

Ups! Jaja perdon. Ya esta, ahora es publico

http://eltecblog.blogspot.mx/

JMiur  

OK. Ahí se ve que es un widget; el común de Blogger llamado header.

<div class='logo'>
EL WIDGET DEBE ESTAR POR ACA
</div>

y tienes una regla de estilo en el CSS que agrega un margen a ese div:

.logo {
margin-left: 25px;
.......
}

quitando eso, la imagen se moverá a la izquierda pero, falta uno mas ya que en al etiqueta IMG de esa imagen dice:

style="display: block; padding-top: 0px; padding-left: 15px;"

o sea, que hay que quitar esos 15 pixeles eliminado los dos paddings (el de cero no hace falta)

Si no ves o no puedes editar esa etiqueta IMG, basta colocar esta regla en el CSS para que se sobrescriba:

#header-inner img {padding: 0 !important;}



Don Choky  

¡¡Es usted un verdadero genio!! Muchas gracias. Estudiare mas CSS para ya no molestar tanto jeje.

¡¡Que pase un feliz año nuevo!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR