Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Коллекция css теней (https://javascript.ru/forum/project/73876-kollekciya-css-tenejj.html)

madeas 24.05.2018 17:47

Коллекция css теней
 
Здравствуйте, уважаемые пользователи!

Наверняка, некоторые из вас замечали, что на разных сайтах используются практически однотипные тени в блоках, панели навигации и прочих контейнерах, плюс - минус пара пикселей в сторону прозрачности. Я проанализировал ряд популярных сайтов, как наших, так и зарубежных, и попытался собрать максимально приближенные параметры используемых теней в одну большую коллекцию (библиотеку). Надеюсь, кому-нибудь пригодится. Основная цель проекта - облегчить работу начинающим веб-дизайнерам и разработчикам в создании приятного и современного дизайна. Возможно и опытные дизайнеры почерпнут для себя что-нибудь интересное.

Библиотека будет удобна тем, кто еще не успел особо углубиться в верстку, но хочет создать красивые тени на кнопках, блоках и т.д.. Таким образом вы сможете упростить работу с блоками и сократить время подбора css теней в генераторе.

Box-shadows.css - это коллекция простых и приятных css теней (box-shadow) для ваших проектов. В роли основного используется короткий класс .bShadow. Сейчас коллекция насчитывает более 45 актуальных вариантов теней с номером, а так же три самостоятельных класса .bShadow, .bShadow-light и .bShadow-inset. Они отлично подходят для использования в таблицах, для содержимого домашних страниц, контейнеров, навигации и других блоков вашего сайта.

Пресекая ряд вопросов, сразу поясню, почему используются числа, а не имена или классы типа bShadow-01040-00.
Коллекция не использует самостоятельные имена, как это сделано в animate.css, так как для данного проекта это немного не приемлемо. Тень блоков увеличивается по нарастающей, с различными отклонениями, а за счет последовательности чисел можно подобрать оптимальный для себя вариант, не заучивая отдельные имена. Это значительно упрощает работу с коллекцией. На сайте встроена функция предпросмотра, с возможностью подбора цвета вашего фона и блока.

Еще у коллекции есть ряд других возможностей, например, использование hover эффекты, с плавным переключением между тенями.

По умолчанию, сайт написан на английском. Для тех, кто еще не в совершенстве владеет этим языком (например, такие как я) имеется переключатель на русский язык)). Также, на сайте проекта есть инструкция по использованию и генератор, в котором вы можете собрать и сгенерировать собственный набор стилей из выбранных вами классов и использовать его на своем сайте.

Попробуйте поэкспериментировать. Это действительно интересная работа.
Желаю вам приятного пользования и творческих успехов.

Нужно ваше мнение, замечания и, возможно, предложения по улучшению проекта.

GitHub · Сайт · Twitter

ruslan_mart 25.05.2018 14:06

madeas, понравилось. Даже если это не будет востребовательно, то в любом случае - очень хорошая работа для портфолио.

j0hnik 27.05.2018 21:32

Думаю что будет актуально для новичков, особенно у которых плохо с воображением.

madeas 28.05.2018 16:12

ruslan_mart,
Спасибо. Постепенно дополняю. Уже 53 тени. Надеюсь, что штука полезная, особенно с генератором.
j0hnik,
Ну, она и рассчитана на мало опытных или тех, кто не очень разбирается (не хочет заморачиваться) в построении теней. Хотя, мне кажется, что и опытные тоже могут оттуда что-то для себя найти и применить в работе.

рони 28.05.2018 16:41

madeas,
зачем ползунок скролла на начальном экране, если "скролла нет"? overflow: hidden; надо ставить на body, а не на #overlay
возможный вариант
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
html, body {
     height: 100%;
}
#overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(73deg, #3369E7, #47c9e5);
    z-index: 100;
}
.info button {
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    font-weight: bold;
    padding: 1em 2em;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin: 1em auto;
    opacity: 0.7;
    outline: none;
    -webkit-appearance: button;
    cursor: pointer;
}
.info button:hover {
    opacity: 1;
}
body.overlay {
   overflow: hidden;
}
body.overlay #overlay{
    display: block;
}

</style>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
         document.querySelector('.info button').addEventListener("click",
         function() {
            document.body.classList.remove("overlay")
         } );
     });
  </script>
</head>

<body  class="en overlay">
<div id="overlay"><div class="info"><button type="button">get started!</button></div></div>

</body>
</html>

madeas 28.05.2018 20:43

рони,
да я как-то не ставил эту задачу, но мысль интересная, спасибо.

madeas 29.05.2018 09:47

рони,
не стал ничего выдумывать, сделал по примеру. Действительно получше стало. Спасибо.

рони 29.05.2018 09:55

madeas,
ок!

madeas 30.05.2018 11:39

Update:
добавлен «Box-shadow CSS Generator»
Выполнен он простенько, поскольку не является основным направлением проекта.
Генератор можно использовать для пополнения коллекции своими стилями. Нажав кнопку «save and add the next», вы можете создать еще несколько классов. Затем скопировать полученные стили и вставить в свой файл или созданный на сайте min.css.
Особая благодарность рони за помощь!

madeas 01.06.2018 11:38

Нужна помощь в работе с подключением npm к репозиторию на гитхабе.
Для получения публикации на cdnjs необходимо "200 stars/watchers on GitHub or 800 downloads/month on npm registry". Пытаюсь понемногу увеличивать обороты. А то так и будет ссылка висеть на гитхаб как cdn :D :(

Обсуждение


Часовой пояс GMT +3, время: 18:28.