Efecto Spotlight CSS3 utilizando un rectángulo redondeado con degradados

Estoy escribiendo un tutorial interactivo para una aplicación web que pretende resaltar las diversas partes de la interfaz de usuario. El tutorial pretende destacar una parte a la vez y decirle al usuario cómo interactuar con ella. Probablemente hayas visto algo similar en las aplicaciones para teléfonos inteligentes.

Para el CSS específico que podría usarse para destacar una interfaz existente, la mejor solución que he encontrado es usar algo como esto, que es solo un div en la parte superior de la interfaz existente que permite resaltar las partes:

https://web.archive.org/web/20120414095101/http://svay.com/experiences/css3-spotlight

Sin embargo, el radial-gradient CSS solo permite círculos y elipses, lo cual es extraño para los elementos de la interfaz del usuario que generalmente son rectangulares. ¿Hay alguna manera de lograr el mismo efecto pero con rectangularjs redondeados (el área atenuada es todo lo que está fuera del rectángulo)?

Vals dio una excelente respuesta y me dio una gran pista para descubrir una forma simple de obtener exactamente lo que quería. Este efecto se puede lograr con una sombra de recuadro insertada más una ventana regular, y tiene el beneficio adicional de que la caja de reflector solo necesita reposicionarse para resaltar un área en particular en lugar de volver a dibujar un degradado de CSS.

Aquí está el código:

 .overlay { position: absolute; left: 50px; top: 50px; width: 200px; height: 200px; border-radius: 20px; box-shadow: 0px 0px 4px 10px rgba(0,0,0,0.5) inset, 0px 0px 0px 1000px rgba(0,0,0,0.5) } 

Uno puede ajustar los parámetros para hacer que el borde del degradado sea más suave o más dramático, y cuánto se enfoca en el reflector.

Mira lo siguiente:

  • Demostración de JSFiddle
  • Ejemplo de uso en un paquete de tutoriales ( código )

Puedes hacer eso con gradientes, pero lograr el rectángulo redondeado será difícil.

Una forma más fácil es simplemente usar la sombra de la caja

 .overlay { position: absolute; left: 50px; top: 50px; width: 200px; height: 200px; border-radius: 20px; box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.5); } .overlay:after { content: ''; position: absolute; left: -25px; top: -25px; right: -25px; bottom: -25px; border: solid 1px gray; border-radius: 25px; box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.6); } 

De esta manera, las esquinas redondeadas son fáciles. He establecido un pseudo elemento para hacerlo más elegante; de esta forma obtienes 2 niveles de transparencia. Podrías elaborarlo más usando el pseudo elemento restante, y también con una sombra insertada.

manifestación

un enfoque alternativo usando gradientes (sin esquinas redondeadas, pero no es un mal efecto de todos modos):

 .overlay2 { position: absolute; left: 40px; top: 50px; width: 200px; height: 200px; border-radius: 40px; border: solid 1px gray; background-image: linear-gradient(90deg,white,transparent 25%, transparent 75%, white), linear-gradient(0deg,white,transparent 25%, transparent 75%, white); background-size: 100% 50%, 50% 100%; box-shadow: 0px 0px 0px 1000px white; } 

demo2

Esta es la solución que no es CSS3. La solución utiliza un fondo png de fondo negro de transparencia del 10%, el foco se agrega como imagen abajo.

HTML

 
de tuin der lusten

JavaScript

 var darkRight, darkLeft, darkBottom, darkTop, darkMiddle, containerHeight, containerWidth; $(function(){ containerWidth = $(".spotlightContainer").width(); containerHeight = $(".spotlightContainer").height(); darkTop = $(".darktop"); darkBottom = $(".darkbottom"); darkLeft = $(".darkleft"); darkRight = $(".darkright"); darkMiddle = $(".darkmiddle"); darkTop.height(100-50); darkBottom.height(containerHeight-100-50); darkLeft.width(100-50); darkRight.width(containerWidth-100-50); setSpotlight(100, 100); $(".spotlightContainer").on("mousemove", function(e){ setSpotlight(e.pageX, e.pageY); }); }); var setSpotlight = function(pageX, pageY){ var radius = 100; darkMiddle.height(radius*2); if(pageX < radius){ pageX = radius; } else if (pageX > containerWidth -radius){ pageX = containerWidth -radius; } darkTop.height(pageY-radius); darkBottom.height(containerHeight-pageY-radius); darkLeft.width(pageX-radius); darkRight.width(containerWidth-pageX-radius); } 

CSS

 html, body{ width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } div{ margin: 0 0 0 0; padding: 0 0 0 0; border: 0; } body{ overflow: hidden; } .dark{ background: url("/images/darkcover.png"); } .darktop{ width: 100%; height: 100%; } .darkbottom{ width: 100%; height: 0px; } .darkmiddle{ height:0px; width: 100%; } .darkmiddle div{ float: left; height: 100%; } .darkleft{ width: 200px; } .darkright{ width: 200px; } .spotlight{ width: 200px; background: url("/images/spotlight.png"); background-size: cover; } .spotlightContainer{ width: 100%; height: 100%; z-index: 500; position: fixed; } .spotlightContainer .imageContainer, .spotlightContainer .darkCover{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .spotlightContainer .imageContainer{ max-height: 100%; max-width: 100%; width: 100%; } 

La imagen del reflector

imagen de foco que se mueve con el mouse

Probé esto y funciona en todos los navegadores de escritorio modernos e IE7 +.

Escribí un pequeño complemento jQuery que crea cuatro div y lo coloca alrededor de su zona / elemento.

Incluso si no es la respuesta que desea no rechazar, es una primera idea para su script futur.

 var element = $("#element1").intro(); $("#element1").click(function() { element.intro('moveTo', $("#element2"), 500); }); 

http://jsfiddle.net/DoubleYo/DQ6jj/