Коллекция теней от CSS свойство box-shadow

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

Материал разместил

iMadeas

Войдите:

• Отправить