Mejor que Pure CSS3: sombras realistas y complejas con Shine.js

Gracias a CSS3 existen varias posibilidades para aplicar sombras a los elementos. Tenemos texto, así como sombras de elementos, e incluso existe un filtro de sombra. Desafortunadamente, todas las sombras de CSS3 se limitan a simples sombras paralelas, donde puede definir su color, su desenfoque, el desplazamiento y el tamaño. La nueva biblioteca de JavaScript ofrece muchas más funciones que le permiten crear sombras mucho más realistas y complejas con Shine.js.

produciendo sombras

brillo.js por Benjamin Bojko y Naim Sheriff llega sin más dependencias. Ningún otro JavaScript, en primer lugar, ningún jQuery, nada. Esta autonomía hace que sea perfectamente fácil de integrar en cualquier proyecto. Una vez que la herramienta se incrustó en el encabezado de su documento, puede comenzar a invocar sombras en casi cualquier cosa que contenga su página.

var noupeshadow = new Shine(document.getElementById("headline"));

Usando „Shine()“ siempre definimos una nueva instancia. Además de adjuntar un elemento, varios parámetros son opcionales para ser definidos. Tenemos un parámetro de configuración disponible para diseñar el aspecto de nuestra futura sombra.

var noupeshadow_config = new shinejs.Config({
  numSteps: 10,
  offset = 0.25,
  blur: 100,
  opacity: 0.5,
  shadowRGB: new shinejs.Color(255, 0, 0)
});
var noupeshadow = new Shine(document.getElementById("headline"), noupeshadow_config);

En el ejemplo anterior, usamos „shinejs.Config()“ para definir una sombra que se entregará a la instancia de „Shine()“ como su segundo parámetro. Como puede ver, hay varias formas de ajustar el aspecto de la sombra. „Shine.js“ luego genera las sombras usando las propiedades CSS3 „text-shadow“ para, bueno, sombras de texto y „shadow“ para sombras de elementos. A través de «numSteps» establecemos el número de sombras que se aplicarán al elemento dado. La regla general, obviamente: cuantas más sombras apliques, más compleja se vuelve la impresión de la sombra. A través de „offset“ definimos el desplazamiento, a través de „blur“ el – lo adivinaste – desenfoque. El parámetro «opacity» tiene efectos directos sobre la opacidad y «shadowRGB» se ocupa del color, que se define a través de su propia instancia de «shinejs.Color()».

Colocación de la fuente de luz

Lo especial de «shine.js» es que puede definir fuentes de luz individuales para cada sombra según sus coordenadas x e y.

noupeshadow.light.position.x = 500;
noupeshadow.light.position.y = 10;
noupeshadow.light.intensity = 1;

Cuanto mayores sean los valores de las coordenadas, más larga será la sombra. Además de „light.position.x“ y „light.position.y“ para las definiciones de coordenadas mencionadas, „light.intensity“ controla – bueno – la intensidad de la luz. Cuanto mayor sea su valor, más fuerte será la sombra.

Ejemplo para nuestro hermano alemán «Dr. Web Magazin»

Para aplicar la fuente de luz a la sombra definida, necesitamos volver a dibujar la sombra a través de «dibujar ()».

noupeshadow.draw();

Aplicar sombras a elementos (en lugar de texto)

Por defecto, las sombras se aplicarán al texto. Para lograr esto, encerramos las letras usando el elemento „“. Cada uno de estos elementos puede tener su propio prefijo de clase, es decir, opcionalmente. Si lo hace, puede agregar más CSS individualmente.

var noupeshadow = new Shine(document.getElementById("headline"), noupeshadow_config, "prefix");

Si no desea aplicar la sombra a un texto, también puede apuntar a cualquier elemento. Para lograr esto, adjuntamos „boxShadow“ a la instancia de „Shine()“ como su cuarto parámetro.

var noupeshadow = new Shine(document.getElementById("headline"), noupeshadow_config, "prefix", "boxShadow");

Recuerde, si no agrega explícitamente „boxShadow“, siempre leerá „textShadow“, incluso si no lo aplicó.

Soporte y licencia del navegador

Shine.js se ejecuta en todos los navegadores compatibles con «text-shadow» y «shadow», lo que significa que la mayoría absoluta funcionará. No hay riesgo de usar la biblioteca. Shine.js se ofrece bajo la licencia MIT. Puede usarlo de forma gratuita para proyectos comerciales y privados por igual.

(dpe)