Всем привет! Вам когда-нибудь нужно было делать тени для текста или блока? Если вы занимаетесь версткой, то, думаю, да. Сегодня я расскажу про сервис, который может немного облегчить выбор нужной вам тени - shine.js .

Библиотека shine.js. Делаем динамические тени.

Всем привет! Вам когда-нибудь нужно было делать тени для текста или блока? Если вы занимаетесь версткой, то, думаю, да. Сегодня я расскажу про сервис, который может немного облегчить выбор нужной вам тени - shine.js.

Это не просто сервис, но еще и библиотека.

Перейдите по ссылке:

bigspaceship.github.io/shine.js/

Чтобы скачать данную библиотеку, опуститесь ниже и используйте Bower

bower install shine

Или просто скачайте zip архив.

Подключите скрипт:

<script src="path/to/shine.min.js"></script>

Инстциируйте shine.js

var shine = new Shine(document.getElementById('my-shine-object'));

Измените позицию света

window.addEventListener('mousemove', function(event) {
  shine.light.position.x = event.clientX;
  shine.light.position.y = event.clientY;
  shine.draw();
}, false);

Особенности:

  • Динамическая позиция света
  • Настриваемые тени
  • Нет зависимости от библиотек, AMD совместим
  • Используются тени для текста или для блока, исходя из контента
  • Работает в браузерах, поддерживающих textShadow или boxShadow, автоматически дописываются префиксы, если нужно

Вот такая простая, но полезная библиотека shine.js. Устанавливайте и пользуйтесь на здоровье! Спасибо за внимание и удачи!