Здравствуйте, уважаемые пользователи!
Наверняка, некоторые из вас замечали, что на разных сайтах используются практически однотипные тени в блоках, панели навигации и прочих контейнерах, плюс - минус пара пикселей в сторону прозрачности. Я проанализировал ряд популярных сайтов, как наших, так и зарубежных, и попытался собрать максимально приближенные параметры используемых теней в одну большую коллекцию (библиотеку). Надеюсь, кому-нибудь пригодится. Основная цель проекта - облегчить работу начинающим веб-дизайнерам и разработчикам в создании приятного и современного дизайна. Возможно и опытные дизайнеры почерпнут для себя что-нибудь интересное.
Библиотека будет удобна тем, кто еще не успел особо углубиться в верстку, но хочет создать красивые тени на кнопках, блоках и т.д.. Таким образом вы сможете упростить работу с блоками и сократить время подбора css теней в генераторе.
Box-shadows.css - это коллекция простых и приятных css теней (box-shadow) для ваших проектов. В роли основного используется короткий класс
.bShadow. Сейчас коллекция насчитывает более 45 актуальных вариантов теней с номером, а так же три самостоятельных класса
.bShadow,
.bShadow-light и
.bShadow-inset. Они отлично подходят для использования в таблицах, для содержимого домашних страниц, контейнеров, навигации и других блоков вашего сайта.
Пресекая ряд вопросов, сразу поясню, почему используются числа, а не имена или классы типа
bShadow-01040-00.
Коллекция не использует самостоятельные имена, как это сделано в animate.css, так как для данного проекта это немного не приемлемо. Тень блоков увеличивается по нарастающей, с различными отклонениями, а за счет последовательности чисел можно подобрать оптимальный для себя вариант, не заучивая отдельные имена. Это значительно упрощает работу с коллекцией. На сайте встроена функция предпросмотра, с возможностью подбора цвета вашего фона и блока.
Еще у коллекции есть ряд других возможностей, например, использование hover эффекты, с плавным переключением между тенями.
По умолчанию, сайт написан на английском. Для тех, кто еще не в совершенстве владеет этим языком (например, такие как я) имеется переключатель на русский язык)). Также, на сайте проекта есть инструкция по использованию и генератор, в котором вы можете собрать и сгенерировать собственный набор стилей из выбранных вами классов и использовать его на своем сайте.
Попробуйте поэкспериментировать. Это действительно интересная работа.
Желаю вам приятного пользования и творческих успехов.
Нужно ваше мнение, замечания и, возможно, предложения по улучшению проекта.
GitHub ·
Сайт ·
Twitter