Коллекция css теней
Здравствуйте, уважаемые пользователи!
Наверняка, некоторые из вас замечали, что на разных сайтах используются практически однотипные тени в блоках, панели навигации и прочих контейнерах, плюс - минус пара пикселей в сторону прозрачности. Я проанализировал ряд популярных сайтов, как наших, так и зарубежных, и попытался собрать максимально приближенные параметры используемых теней в одну большую коллекцию (библиотеку). Надеюсь, кому-нибудь пригодится. Основная цель проекта - облегчить работу начинающим веб-дизайнерам и разработчикам в создании приятного и современного дизайна. Возможно и опытные дизайнеры почерпнут для себя что-нибудь интересное. Библиотека будет удобна тем, кто еще не успел особо углубиться в верстку, но хочет создать красивые тени на кнопках, блоках и т.д.. Таким образом вы сможете упростить работу с блоками и сократить время подбора css теней в генераторе. Box-shadows.css - это коллекция простых и приятных css теней (box-shadow) для ваших проектов. В роли основного используется короткий класс .bShadow. Сейчас коллекция насчитывает более 45 актуальных вариантов теней с номером, а так же три самостоятельных класса .bShadow, .bShadow-light и .bShadow-inset. Они отлично подходят для использования в таблицах, для содержимого домашних страниц, контейнеров, навигации и других блоков вашего сайта. Пресекая ряд вопросов, сразу поясню, почему используются числа, а не имена или классы типа bShadow-01040-00. Коллекция не использует самостоятельные имена, как это сделано в animate.css, так как для данного проекта это немного не приемлемо. Тень блоков увеличивается по нарастающей, с различными отклонениями, а за счет последовательности чисел можно подобрать оптимальный для себя вариант, не заучивая отдельные имена. Это значительно упрощает работу с коллекцией. На сайте встроена функция предпросмотра, с возможностью подбора цвета вашего фона и блока. Еще у коллекции есть ряд других возможностей, например, использование hover эффекты, с плавным переключением между тенями. По умолчанию, сайт написан на английском. Для тех, кто еще не в совершенстве владеет этим языком (например, такие как я) имеется переключатель на русский язык)). Также, на сайте проекта есть инструкция по использованию и генератор, в котором вы можете собрать и сгенерировать собственный набор стилей из выбранных вами классов и использовать его на своем сайте. Попробуйте поэкспериментировать. Это действительно интересная работа. Желаю вам приятного пользования и творческих успехов. Нужно ваше мнение, замечания и, возможно, предложения по улучшению проекта. GitHub · Сайт · Twitter |
madeas, понравилось. Даже если это не будет востребовательно, то в любом случае - очень хорошая работа для портфолио.
|
Думаю что будет актуально для новичков, особенно у которых плохо с воображением.
|
ruslan_mart,
Спасибо. Постепенно дополняю. Уже 53 тени. Надеюсь, что штука полезная, особенно с генератором. j0hnik, Ну, она и рассчитана на мало опытных или тех, кто не очень разбирается (не хочет заморачиваться) в построении теней. Хотя, мне кажется, что и опытные тоже могут оттуда что-то для себя найти и применить в работе. |
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,
ок! |
Update:
добавлен «Box-shadow CSS Generator» Выполнен он простенько, поскольку не является основным направлением проекта. Генератор можно использовать для пополнения коллекции своими стилями. Нажав кнопку «save and add the next», вы можете создать еще несколько классов. Затем скопировать полученные стили и вставить в свой файл или созданный на сайте min.css. Особая благодарность рони за помощь! |
Нужна помощь в работе с подключением npm к репозиторию на гитхабе.
Для получения публикации на cdnjs необходимо "200 stars/watchers on GitHub or 800 downloads/month on npm registry". Пытаюсь понемногу увеличивать обороты. А то так и будет ссылка висеть на гитхаб как cdn :D :( Обсуждение |
|
рони,
спасибо, я решил вообще убрать ссылки на гитхаб, пока не будет файлов c cdnjs. Пока придется скачивать или генерировать свой файл. |
Подкорректировал страничку. Визуально стала более приятной и понятной
Пополнил коллекцию. Релиз 1.0.3 |
Обновление 1.0.4 https://github.com/madeas/box-shadows.css
- дополнение классов с тенями - новая, более удобная группировка - улучшение генератора теней |
Проект на стадии получения ссылки на cdnjs. С npm пакетом пока не разобрался как следует, но начало уже положено. Надеюсь, переформирую проект и можно будет использовать для разработки приложений.
рони, есть вопрос по вашему скрипту. Может быть получится как-то подправить? Искал альтернативные варианты, более удачного не нашел. |
:dance: Добавлена функция оценки теней :victory: Эта функция позволит определять степень полезности и применения каждого класса.
Коллекция css теней уже содержит самые красивые тени, используемые на многих популярных сайтах, в числе которых algolia, stripe, vkontakte и bootstrap. |
Если у вас есть предложения или дополнения, присоединяйтесь |
|
madeas,
почему нет 100% в кнопке наверх? :) в файле https://madeas.github.io/box-shadows/js/selects.js есть использование пустого селектора строка 15, зачем?! |
madeas,
Вот это уже прилично выглядит по сравнению с первой версией. |
рони,
как нет? есть :)  а селектор применялся для внутренней тени, но сейчас за ненадобностью не используется, просто убирать не стал. |
Цитата:
|
madeas,
https://madeas.github.io/box-shadows/js/scrollup.js строка 51 defaultScroll = Math.round($windowObj.scrollTop()); |
рони,
подправил, спасибо. j0hnik, спасибо за комментарий. первый опыт - куча косяков)) |
Ребята, планирую сделать редизайн. Функционал останется прежним.
Сделал небольшой ролик с локального. Что скажете? |
еще можно добавить autoprefixer (https://autoprefixer.github.io/ru/), с выбором вендора и кол-во последних версий браузера... ну и текст в окошечке отформатировать )
|
Для box-shadow уже не нужны префиксы
|
Обновлен дизайн сайта и немного изменен функционал. Надеюсь, только в положительную сторону.
Кому не трудно, примите участие в разовом опросе. |
| Часовой пояс GMT +3, время: 10:28. |