На волне постов со шрифтами. Шрифт по мотивам Властелина колец - TolkienCyr
Когда то давно наткнулся на этот шрифт по мотивам Властелина Колец, понравился. Кириллица поддерживается.
Когда то давно наткнулся на этот шрифт по мотивам Властелина Колец, понравился. Кириллица поддерживается.
Всех приветствую)
Встала перед выбором курсов по веб-дизайну, вариантов масса, программа примерно одинаковая, кого выбрать совсем не знаю.
Отсутствие опыта не дает распознать настоящего профессионала среди экспертов.
Порекомендуйте пожалуйста проверенные курсы)
Привет, дорогие друзья дизайнеры! Я занимаюсь версткой и хочу пополнить свое портфолио действительно интересными работами.
Если у вас есть классные макеты в Фигме, которые хотели бы жить в сети, то буду рада поработать над их версткой.
Что получаете вы:
🔸 рабочий сайт в сети с вашим дизайном, для максимально наглядного представления его Вашим клиентам
🔸обязательное указание на авторство - в каждом проекте будет ссылка на ваши сети с указанием, кто задизайнил эту красоту))
Ну и обоюдный профит для нас обоих – возможность предложить клиенту комплексную услугу: дизайн+верстка.
Кому интересно, пишите, обсудим детали (на самом деле я первый раз задумала такое сотрудничество, поэтому буду рада замечаниям, предложениям и комментариям)))
Идея моя, верстка тоже будет моя, тег - моё, соответственно 👌
Да я только переучился к плюсам слева. Только матюкал способ сохранить.
Вы вернулись к прежнему дизайну.
Спасибо. Пингвин жипег
Привет, Пикабу!
Расскажу, что нового появилось на моём проекте Gradients.app. Он про работу с цветом, палитрами и градиентами. 1 пост и 2 пост по проекту.
Color picker или инструмент пипетка
Вы можете загрузить изображение и наведением курсора определить цвета на ней. Выбранные цвета можно объединяются в палитру. Нажав на выбранный цвет вы получаете его код в HEX и RGB, а по нажатию на код, значение копируется в буфер. Можно удалить лишний цвет двойным кликом по кругу на картинке.
Средний цвет изображения
После загрузки изображения скрипт проходит по её пикселям и вычисляет средний цвет всей фотографии. Фон это и есть средний цвет, вверху HEX код этого цвета и ссылка на подробную информацию об этом цвете: разные цветовые системы, комбинации с текстом, оттенки и д.р. Расскажу об этом чуть ниже.
Конвертер цветов
Выбираете нужный цвет на панели цветов и он сразу меняется в форматах HEX, RGB, CMYK, HLS и HSV. Но можно и поменять значения цвета в любой его системе и он тоже поменяется везде. Можно подобрать случайный цвет нажав на кнопку.
Часто приходилось менять форматы по рабочим делам, а открывать фотошоп или консоль браузера не всегда удобно и быстро. В других онлайн конвертерах не меняет всё сразу, надо выбрать из какого формата переводить цвет и эти переключения бесили.
Краткая информация о цвете
https://gradients.app/ru/color/4929b4 в конце ссылки стоит hex код, можно сразу вписывать ссылку в адресную троку или менять на страницу. Ниже скриншоты страницы.
В первой части разные системы цветов и температура цвета.
Небольшое количество оттенков выбранного цвета. Светлые, тёмные и серые.
Цветовые сочетания (цветовой круг) и контрасты с разными цветам
Из новинок это всё.
Очень хочется узнать ваше мнение, что хорошо, а что неудобно и плохо.
Если будет интересно, сделаю пост про внутрянку проекта, разные статисти и метрики, как развивался и т.д.
P.S. вдруг кто-то из вас может помочь с переводом на другие языки или проверить текущие переводы, это было бы очень круто.
Большое спасибо!
В последние пять лет в интерфейсном дизайне появилось понятие тёмной темы: это когда фон делают тёмным, а текст — светлым. Это полезно в телефонах для энергосбережения и чтения с экрана ночью. Ну и просто красиво.
Сегодня мы добавим на страницу переключатель тёмной и светлой темы с помощью CSS.
Не только про CSS, но и про другие штуки из области Front-end мы рассказываем тут
Автопереключение тёмной темы
Современные браузеры умеют определять, что на телефоне или компьютере включена тёмная тема. Для этого разработчики используют такой медиазапрос:
@Media screen and (prefers-color-scheme: dark) {}
Если на устройстве используется тёмная тема, то CSS выполнит всё, что написано в фигурных скобках. В нашем случае нам нужно сделать тёмный фон и светлый текст:
Добавим этот код в стили на странице, и задача решена: мы получили поддержку тёмной темы. Если в настройках устройства переключить тему обратно на светлую, то сайт тоже получит белый фон.
Посмотреть на автопереключение темы на странице проекта.
Ручное переключение темы
Медиазапросы — это хорошо, но иногда нужно поставить принудительный переключатель темы, чтобы не зависеть от настроек устройства. Например, если нужно отладить тёмную тему, когда у вас на компьютере работает светлая тема.
Чтобы не создавать с нуля страницу, поступим так: создадим копию главной страницы нашего учебного сайта и добавим туда переключатель, который заставит тему смениться.
Настраиваем стили
Единственное, что нам нужно добавить в стили — это два класса: для светлой и тёмной темы:
Первый класс устанавливает чёрный фон и белый цвет текста, а второй, наоборот, — белый фон и чёрный текст. Цвета здесь можно указывать любые и для любых элементов, а мы для простоты остановимся на двух.
Внешне страница никак не поменяется — мы ещё не применили эти стили. Чтобы это сделать, надо поработать с остальными элементами, например добавить id к тегу <body> — по нему мы будем обращаться к содержимому всей страницы:
<body id="main">
Добавляем переключатель
Чтобы мы могли менять светлую тему на тёмную и обратно, добавим простой переключатель. Сделаем его в виде абзаца и добавим его сразу после строки поиска:
<p id="select" onclick="darkLight()" style="cursor: help;">Включить тёмную тему</p>
Вот что здесь происходит:
<p id="select» ← указываем id переключателя, чтобы потом получить доступ к нему из скрипта;
onclick="darkLight ()» ← говорим, что должно произойти при нажатии: вызываем функцию darkLight ();
style="cursor: help;»> ← меняем внешний вид курсора при наведении на переключатель;
Включить тёмную тему</p> ← текст надписи.
Переключатель появился на странице, но пока ничего не переключает. Исправим это в скрипте.
Пишем скрипт
Мы указали в свойствах переключателя, что при нажатии нужно выполнить функцию darkLight () — значит, нам нужно добавить её в рабочий скрипт.
Чтобы не зависеть от работы других скриптов и не лезть в их код, сделаем новый js-файл dark.js и положим в него такой код:
Последнее, что осталось сделать, — подключить скрипт в конце HTML-страницы:
<script type="text/javascript" src="dark.js"></script>
Теперь у нас появилась поддержка тёмной темы с моментальным переключением:
Посмотреть на работу переключателя на странице проекта.
Что дальше
Этот способ работает только на одной странице, и после перезагрузки тему нужно переключать заново. В следующий раз сделаем апгрейд — научим сайт запоминать настройки и применять их ко всему сайту. А ещё подружим автопереключение с надписью на переключателе.