Веб-мастеру на заметку. Болтающийся кот на чистом CSS
На codepen.io наткнулся на забавную анимацию средствами CSS по адресу https://codepen.io/davidkpiano/pen/Xempjq . У меня нет на компьютере программы для записи видео, поэтому я запустил эмулятор Android, там запустил браузер, в нем зашел на нужный адрес и средствами Android Studio сделал видео. Вот такой я извращенец, сорри
когда коту делать нехуй он яйца лижет на веревке болтается
Gyazo Gif в помощь, уважаемый. ;)
Я мог бы скриншотами кроткую гифку сделать..
Как быстро написать слайдер на JS?
Во многих сайтах и программах уже давным — давно используются такие элементы взаимодейтсвия пользователем, как «Слайдер», по сути это одна большая фотография которую можно переключать с помощью стрелочек или по нажатию на клавиши. Удобно когда на экране мало места, а показать множество фотографий нужно.
Как же создать вот такой слайдер?
Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.
1. Пишем структуру
4. Заполняем объект
Пишем структуру
Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».
Пишем стили
Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.
Пишем скрипт
Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.
Заполняем объект
Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ' ' », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.
У нас есть рабочий и очень простенький слайдер для переключения фотографий, которые мы заполняем в объект. Все это работает без сбоев и хорошо.
Продолжение поста «Генератор градиентов и палитры по картинкам»
Прошло 3 месяца с первого поста про мой проект — Gradients.app, он про цвета и градиенты.
Расскажу про изменения и обновления за это время.
Вращение градиента
Вращение градиента появилось в мини-карточке, на подробной странице и при генерации нового градиента. Выбирайте нужный угол поворота и скачивайте градиент под выбранным углом. В мини-карточках градиент скачивается в размере 1920 на 1080 px.
Новый вид страницы градиента
Пользователь может задать размер градиента самостоятельно или выбрать уже готовые размеры. Максимальный размер градиента — 2000 на 2000 px. Изображение градиента скачивается если на него нажать.
Добавление градиента в общую ленту
Зарегистрированные пользователи могут добавить свои градиенты в общую ленту.
Сгенерируйте градиент → сохраните в профиль → перейдите в мои градиенты → отправьте в общую ленту.
Пользователю придёт письмо о добавлении в общую ленту и ссылка на градиент.
Генерация градиентов без грязных переходов
Случайная генерация градиентов теперь красивая, не появляются грязные переходы, а цвета рассчитываются по HSL модели.
Появился инструмент смешивания цветов
Можно выбрать до 4х цветов и два режима смешивания RGB и HSL.
Просто про режимы RGB и HSL:
Смешивая синий и желтый в RGB вы получите серый цвет, а в режиме HSL зеленый. В RGB между синим и желтым на цветовом круге серый цвет поэтому их сложение его и даст, а в HSL получится дуга т.к. цвета на разном уровне.
Появился генератор оттенков
Выбирайте цвет и количество оттенков от 3 до 36. Оттенки генерируются в сторону белого, серого и черного цвета.
Набор сочетаний цвета текста и фона
На мини-карточках есть цвет фона, текста и их контраст, чем он выше тем читаемость лучше.
Можно отсортировать наборы по контрасту, времени и просмотрам.
На подробной странице сочетания добавлен заголовок, абзац текста со всеми буквами алфавита и различные начертания шрифта.
Генерация сочетаний цвета текста и фона
К наборам добавил генерацию и для пользователей.
Пользователь может сгенерировать все цвета случайно или каждый по отдельности. Под цветами добавлены подсказки читаемости для заголовков и обычного текста по стандартам WCAG.
Огромное спасибо за комментарии в предыдущем посте, я всё записал и уже что-то добавил.
Буду рад критике и советам.
Генератор градиентов и палитры по картинкам
Делюсь своим проектом Gradients.app, занимаюсь им в свободное время и очень жду замечаний и предложений. Проект может пригодиться дизайнерам и иллюстраторам — тут про цвета и градиенты.
Набор градиентов
На сайте можно скачать градиенты разных размеров в PNG, скопировать цвета по отдельности и CSS-коды градиентов. Градиенты сортируются по цветам, скачиваниям и дате. Градиентов на сегодня 87, добавляю их самостоятельно, если у вас есть классные сочетания — буду рад их добавить.
Можно провалиться внутрь карточки градиента, там будет больше информации и разные размеры для скачивания. Для веб-дизайнера есть CSS-код градиента, а для иллюстраторов — цвета в RGB, CMYK, HEX и HSL.
Генератор градиентов
Можно делать градиенты самим: подбирать цвета, смотреть разные сочетания. Есть возможность выбрать от 1 до 5 цветов, скачивать в FHD, копировать CSS-код и рандомно менять цвета всего градиента или по отдельности.
Наборы палитр
Потом я добавил на сайт ещё один раздел — цветовые схемы. Загрузил картинки в разных стилях, с разными палитрами. Эти палитры можно использовать для оформления сайтов, графического дизайна или даже дизайна интерьеров.
Схемы можно отфильтровать по цветам и скопировать HEX-код каждого цвета палитры. На подробной странице схемы цвета применяются к небольшому web-шаблону: блоки, кнопки и другие элементы раскрашиваются под выбранную палитру.
Генератор палитры по фото
Ещё можно загрузить любую картинку или фотографию и определить палитру на ней. Изображение разбивается на 10 основных цветов. Есть подробные блоки с яркими, приглушенными, темными, светлыми и противоположными цветами. У всех цветов можно скопировать HEX-код.
Проект переведен на английский и частично на китайский язык.
Буду рад критике и идеям, может что-то вышло неудобно и непонятно.
Как без пиратства и покупки платного ПО пользоваться макетами Adobe XD
Формат файла Adobe XD представляет из себя архив, который содержит описание структуры макеты в виде JSON структуры, графических растровых и векторных файлов использованных при создании макета.
Стандартный метод — открыть в программе Adobe XD — нужна программа купленная за деньги (подписка).
Использовать сервис-конвертор XD2SKETCH.COM — за деньги (подписка или платное разовое использование).
Программу-сервис Avocode — за деньги.Кроме того, некоторые программы работают только в среде Mac OS (Sketch - только MAC OS или веб-приложение)
И тому подобное.
Чтобы открыть макет Adobe XD бесплатно, можно воспользоваться бесплатной программой-сервисом Photopea — в этом случае видны все параметры объектов макета и даже доступ к CSS значениям реализован удобнее чем в Photoshop. А вот реализация извлечения растровых объектов из макета, для внедрения в вёрстку, немного подкачала, на мой вкус.
Чтобы получить объекты из файла Adobe XD, достаточно открыть его как Zip-архив, например с помощью архиватора 7-Zip. В результате получим несколько папок с ресурсами JSON, XML, и папкой с растровыми объектами: «resources».
Содержащиеся там файлы будут без расширений, но это решается просто переименованием, с добавлением соответствующего расширения. Если есть сомнения в том, какое расширение необходимо, достаточно открыть файл в программе Notepad++ или в другом тактовом редакторе. У файлов формата PNG в первой же строчке будет «‰PNG». У SVG-файлов будет так же видна вся XML структура присущая SVG-файлам.
Итого, файл макета открыт в Photopea — данные CSS доступны для переноса. Папочка с графикой для вставки в вёрстку — готова.
Кроме того, из Photopea можно сохранить в PSD, который открывается некоторыми бесплатными просмотровщиками и редакторами.