Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.05.2018, 18:47
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 217

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

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

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

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

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

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

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

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

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

GitHub · Сайт · Twitter

Последний раз редактировалось madeas, 24.05.2018 в 18:51.
Ответить с цитированием
  #2 (permalink)  
Старый 25.05.2018, 15:06
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,917

madeas, понравилось. Даже если это не будет востребовательно, то в любом случае - очень хорошая работа для портфолио.
Ответить с цитированием
  #3 (permalink)  
Старый 27.05.2018, 22:32
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,386

Думаю что будет актуально для новичков, особенно у которых плохо с воображением.
Ответить с цитированием
  #4 (permalink)  
Старый 28.05.2018, 17:12
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 217

ruslan_mart,
Спасибо. Постепенно дополняю. Уже 53 тени. Надеюсь, что штука полезная, особенно с генератором.
j0hnik,
Ну, она и рассчитана на мало опытных или тех, кто не очень разбирается (не хочет заморачиваться) в построении теней. Хотя, мне кажется, что и опытные тоже могут оттуда что-то для себя найти и применить в работе.
Ответить с цитированием
  #5 (permalink)  
Старый 28.05.2018, 17:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,037

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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.05.2018, 21:43
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 217

рони,
да я как-то не ставил эту задачу, но мысль интересная, спасибо.
Ответить с цитированием
  #7 (permalink)  
Старый 29.05.2018, 10:47
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 217

рони,
не стал ничего выдумывать, сделал по примеру. Действительно получше стало. Спасибо.
Ответить с цитированием
  #8 (permalink)  
Старый 29.05.2018, 10:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,037

madeas,
ок!
Ответить с цитированием
  #9 (permalink)  
Старый 30.05.2018, 12:39
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 217

Update:
добавлен «Box-shadow CSS Generator»
Выполнен он простенько, поскольку не является основным направлением проекта.
Генератор можно использовать для пополнения коллекции своими стилями. Нажав кнопку «save and add the next», вы можете создать еще несколько классов. Затем скопировать полученные стили и вставить в свой файл или созданный на сайте min.css.
Особая благодарность рони за помощь!
Ответить с цитированием
  #10 (permalink)  
Старый 01.06.2018, 12:38
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 217

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

Обсуждение
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как задать фиксированые оступы элементов, не нарушая структуру css vuler Общие вопросы Javascript 1 02.11.2015 08:44
карта css после сборки kuzroman Сборка проекта, утилиты 3 07.10.2015 17:51
Встраиваем шрифт внутрь css sovsem-nub (X)HTML/CSS 0 26.09.2015 21:17
JQuery CSS анализатор javascript jQuery 2 15.08.2010 21:27
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 11:58