Viendo las diversas páginas que protestaron contra SOPA, encontré un efecto de linterna interesante en makarras.org.
Utilizaban unas sombras para el título que cambiaban con la posición del cursor y un efecto de linterna hecho con degradados de CSS 3 que también seguía el cursor.
El efecto de la linterna me pareció muy curioso y lo he replicado con una imagen de fondo PNG.
Utilizaban unas sombras para el título que cambiaban con la posición del cursor y un efecto de linterna hecho con degradados de CSS 3 que también seguía el cursor.
El efecto de la linterna me pareció muy curioso y lo he replicado con una imagen de fondo PNG.
El código
<div id="foco" class="foco">Rechaza SOPA</div>
<style type="text/css">
.foco {
z-index:9999999;
text-align:center;
font-size:50px;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:url('IMAGEN') center center no-repeat;
}
</style>
<script type="text/javascript">
window.addEventListener('load',function(event) {
document.getElementById('foco').addEventListener('mousemove', function(event){
this.style.backgroundPosition = (event.clientX-2048)+'px '+(event.clientY-2048)+'px';
}, false);
document.getElementById('foco').addEventListener('click', function(event){
this.style.display = 'none';
}, false);
},true);
</script>
La imagen
La imagen es un cuadrado negro de 4096x4096 píxeles con un degradado circular transparente en el centro de unos 500px de diámetro.Se puede utilizar directamente o empotrarla codificándola a su representación base-64.
Hace unas semanas, publicamos una herramienta online para convertir archivos, textos y urls a base-64. Puedes utilizarla en el siguiente enlace: http://www.treeweb.es/Herramientas/base64
Hace unas semanas, publicamos una herramienta online para convertir archivos, textos y urls a base-64. Puedes utilizarla en el siguiente enlace: http://www.treeweb.es/Herramientas/base64
Demo
Puedes encontrar la demostración del funcionamiento en ShareCode: http://www.treeweb.es/ShareCode/71f066762619a43652c9cf3bdff321bd/