Форум

madeas · #1 (**permalink**) 24.05.2018, 17:47

Здравствуйте, уважаемые пользователи!

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

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

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

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

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

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

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

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

GitHub · Сайт · Twitter

ruslan_mart · #2 (**permalink**) 25.05.2018, 14:06

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

j0hnik · #3 (**permalink**) 27.05.2018, 21:32

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

madeas · #4 (**permalink**) 28.05.2018, 16:12

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

рони · #5 (**permalink**) 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 · #6 (**permalink**) 28.05.2018, 20:43

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

madeas · #7 (**permalink**) 29.05.2018, 09:47

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

рони · #8 (**permalink**) 29.05.2018, 09:55

madeas,
ок!

madeas · #9 (**permalink**) 30.05.2018, 11:39

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

madeas · #10 (**permalink**) 01.06.2018, 11:38

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

Обсуждение

Форум

Справочник

Discord чат

Курсы javascript