Цветные шрифты
На Google Fonts выходит партия цветных шрифтов.
Среди них иконочные по типу эмоджи (https://fonts.google.com/noto/specimen/Noto+Color+Emoji), несколько поддерживающих латиницу (https://fonts.google.com/specimen/Bungee+Spice
https://fonts.google.com/specimen/Nabla ) и ряд из них - арабские алфавиты.
COLRv1 являются векторными, что, конечно, позволяет масштабировать без пикселизации изображения.
Среди особенностей: возможности изменения цветовых схем шрифта, добавление градиента и изменение ширины / высоты / толщины букв.
Источник: https://material.io/blog/color-fonts-are-here
#полезности
На Google Fonts выходит партия цветных шрифтов.
Среди них иконочные по типу эмоджи (https://fonts.google.com/noto/specimen/Noto+Color+Emoji), несколько поддерживающих латиницу (https://fonts.google.com/specimen/Bungee+Spice
https://fonts.google.com/specimen/Nabla ) и ряд из них - арабские алфавиты.
COLRv1 являются векторными, что, конечно, позволяет масштабировать без пикселизации изображения.
Среди особенностей: возможности изменения цветовых схем шрифта, добавление градиента и изменение ширины / высоты / толщины букв.
Источник: https://material.io/blog/color-fonts-are-here
#полезности
Google Fonts
Noto Color Emoji - Google Fonts
Noto Color Emoji is an open source font that has you covered for all your emoji needs, including support for the latest Unicode emoji specification. It features
👍3
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Валидаторы
2. Цветные шрифты
3. Timeline на jquery
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend разработчик
3. Frontend developer Lanit
Лучшие дизайн вакансии @job_webdesign:
1. Графический дизайнер
2. UX/UI дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Валидаторы
2. Цветные шрифты
3. Timeline на jquery
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend разработчик
3. Frontend developer Lanit
Лучшие дизайн вакансии @job_webdesign:
1. Графический дизайнер
2. UX/UI дизайнер
#лучшеезанеделю
👍2
Почему rem лучше, чем px в 2025 году?
Когда вы задаёте размеры в px, вы игнорируете предпочтения пользователя — например, масштаб текста в настройках браузера.
А вот rem (root em) — это единица, зависящая от базового размера шрифта (html { font-size: 16px } по умолчанию).
Пример:
.button {
padding: 1rem 2rem;
font-size: 1.25rem;
}
Преимущества rem:
— Легко масштабировать весь интерфейс
— Лучше для доступности
— Удобно поддерживать консистентность
👉 Используйте rem для отступов, размеров шрифта и элементов. А px — разве что для границ и теней.
#полезности
Когда вы задаёте размеры в px, вы игнорируете предпочтения пользователя — например, масштаб текста в настройках браузера.
А вот rem (root em) — это единица, зависящая от базового размера шрифта (html { font-size: 16px } по умолчанию).
Пример:
.button {
padding: 1rem 2rem;
font-size: 1.25rem;
}
Преимущества rem:
— Легко масштабировать весь интерфейс
— Лучше для доступности
— Удобно поддерживать консистентность
👉 Используйте rem для отступов, размеров шрифта и элементов. А px — разве что для границ и теней.
#полезности
👍5👨💻2
Какая единица соответствует 1% ширины окна браузера?
Anonymous Quiz
15%
em
10%
rem
60%
vw
11%
vh
5%
Посмотреть ответы
🔥4👍2
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Влияние CSS на доступность
2. scrollbar-gutter
3. Почему rem лучше, чем px в 2025 году?
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend разработчик
3. Junior Frontend Developer
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI дизайнер
2. Web-дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Влияние CSS на доступность
2. scrollbar-gutter
3. Почему rem лучше, чем px в 2025 году?
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend разработчик
3. Junior Frontend Developer
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI дизайнер
2. Web-дизайнер
#лучшеезанеделю
👍2
CSS Вопрос:
Как правильно задать градиент бордеру (рамке) элемента?
Как правильно задать градиент бордеру (рамке) элемента?
Anonymous Quiz
21%
border-image: linear-gradient(...);
19%
border-color: linear-gradient(...);
44%
border: 1px solid linear-gradient(...);
8%
border-gradient: linear-gradient(...);
8%
Посмотреть ответы
👍1