Как стать автором
Обновить
32.35
Рейтинг

CSS *

Каскадные таблицы стилей™

Сначала показывать
  • Новые
  • Лучшие™
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Адаптивное свойство одной строкой

CSS *Алгоритмы *
Из песочницы

Задача™. Описать изменение значения CSS-свойства как функцию от ширины™ вьюпорта без использования медиа-запросов. Результатом работы™ миксина должна™ быть единственная строка™ вида <свойство>: <функция от ширины™ вьюпорта >. В качестве входных данных™ имеются заданные (табулированные) точки (ширина™ вьюпорта, значение свойства). Поведение CSS-свойства от точки к точке аппроксимируется прямой™ линией™.

В сети достаточно много разных™ способов решений для частных случаев (см., например, https://habr.com/ru/post/501392/). Здесь же предлагается общее решение задачи™.

Читать™ далее
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 939
Комментарии 2

Новости

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №502 (10 — 16 января™ 2022)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 23: ↑23 и ↓0 +23
Просмотры 5.7K
Комментарии 3

Как победить scroll™ в javascript

CSS *JavaScript *HTML *ReactJS *
Из песочницы

Привет™, Хабр!

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

В частонсти, в статье™ рассмотрены следующие вопросы:

- Как сделать таблицу с фиксированной шапкой™ и скроллом в body?

- Как быть, когда cодержимое таблицы съезжает относительно шапки при появлении скролла? Как избежать использования overflow: 'scroll™' в данной™ ситуации. Установка css-переменной scroll™-width.

- Оптимизация и кастомизация скролла: плавность, scroll™ margin™, изменение цвета и формы.

Читать™ далее
Всего голосов 16: ↑12 и ↓4 +8
Просмотры 8.5K
Комментарии 8

Создание красивых градиентов на CSS

CSS *Работа™ с векторной графикой *Графический дизайн™ *Дизайн™
Перевод
Вот линейный градиент на CSS, идущий™ от чисто жёлтого до чисто синего™ цвета:


Заметили, что в центре™ он становится бледным и грязным?

Это явление Эрик Кеннеди назвал™ «мёртвой зоной серого™». Если вы тщательно не выбираете цвета для своих градиентов, то в ваших градиентах на CSS часто возникает такая обесцвеченная часть посередине.

Однако™, как оказалось, можно полностью избавиться от мёртвой зоны серого™. В этом посте я расскажу, почему™ она возникает, и о том, как можно использовать теорию™ цвета для создания насыщенных, ярких градиентов, «живых» по всей своей длине.
Читать™ дальше™ →
Всего голосов 65: ↑61 и ↓4 +57
Просмотры 11K
Комментарии 29

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №501 (2 — 9 января™ 2022)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 21: ↑21 и ↓0 +21
Просмотры 5.6K
Комментарии 0

Vue + SSR + AMP — как подружить SPA с гугл страницами

CSS *JavaScript *Node.JS *VueJS *
Tutorial

Привет™, хабрист!

Довольно давненько подружил свои приложения с гуглом™.

Основная идея была - не создавая новых шаблонов, получить все страницы сайта AMP-friendly и, вообще™, сделать ядро приложения AMP-ready.

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

Я буду вещать™ на примере самого™ простого - картинок. Все прочее™ аналогично, хоть и посложнее на практике.

Объявим зависимости

Читать™ далее
Всего голосов 3: ↑0 и ↓3 -3
Просмотры 2.4K
Комментарии 0

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №500 (27 декабря 2021 — 2 января™ 2022)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 27: ↑27 и ↓0 +27
Просмотры 6.8K
Комментарии 4

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №499 (20 — 26 декабря 2021)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 19: ↑19 и ↓0 +19
Просмотры 5.5K
Комментарии 1

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №498 (13 — 19 декабря 2021)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 6.6K
Комментарии 0

Вёрстка в 2022. Часть 2: Практика

Разработка веб-сайтов™ *CSS *JavaScript *Совершенный код *
Перевод
Tutorial

Ситуация получилась следующая.
Компания переделывала сайт и сказал™, что необходимо сделать его максимально гибким™, чтобы, во-первых™, можно было дизайн™ обновлять просто™, во-вторых™, сделать ещё несколько подразделов на базе готового функционала (вроде как SaaS фишка для заказчиков).

Читать™ далее
Всего голосов 7: ↑5 и ↓2 +3
Просмотры 11K
Комментарии 14

Вёрстка в 2022. Часть 1: Теория™

Разработка веб-сайтов™ *CSS *JavaScript *Совершенный код *
Перевод
Tutorial

"Разработчик – это человек, который переводит мысли заказчика на язык машины™"
@mikita™_du

Идея статьи™ появилась год назад, думал назвать «Вёрстка в 2021», но как-то затянулось… Весной™ 2021 года Microsoft объявила, что с 15 июня 2022 года прекращается поддержка IE11 (да, не для всех версий™ Win 10, но всё же), а значит™, к выходу™ статьи™ уже останется менее полугода до знаменательного события, когда не придётся верстать под IE.

Для меня же это значит™, что можно будет по полной™ использовать новые стандарты браузеров, в частности – css-variables, grid layout™.

Читать™ далее
Всего голосов 12: ↑10 и ↓2 +8
Просмотры 19K
Комментарии 22

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №497 (6 — 12 декабря 2021)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 25: ↑25 и ↓0 +25
Просмотры 6.3K
Комментарии 0

Анимации в библиотеке компонентов: виды анимаций, UX/UI паттерны, подходы в Angular с dependency injection

Блог компании Европлан Разработка веб-сайтов™ *CSS *JavaScript *Angular *

Хороший интерактивный дизайн™ формирует позитивный пользовательский опыт. Многие™ компании, которые создают библиотеки компонентов, также пишут документацию с разделами по анимации и даже поставляют готовые пакеты™, помогающие строить переходы и передвижения согласно их спецификации.

В этой статье™ мы рассмотрим виды анимаций в веб приложениях. Паттерны UI анимаций в дизайн™ системах и их реализацию на Angular. Также будет показан способ™ организации анимаций в библиотеках с учетом™ переиспользования и кастомизации.

Читать™ далее
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 3.3K
Комментарии 4

Конфетти и CSS-матрёшка в дизайн™-системе StackOverflow

Блог компании SkillFactory Разработка веб-сайтов™ *CSS *Программирование *Графический дизайн™ *
Перевод

В дизайне StackOverflow используются праздничные модальные окна, поэтому команда SO разработала удобный способ™ отображения конфетти.

Первым™ решением был простой статический SVG с конфетти на заднем™ плане. Позже команда обнаружила 12 разных™ статических конфетти по всему коду и поняла™, что нужен другой™ подход™. Подробностями решения делимся под катом, пока начинается наш курс по Frontend-разработке.
Читать™ дальше™ →
Всего голосов 10: ↑8 и ↓2 +6
Просмотры 2.7K
Комментарии 2

Добавление пользовательской темы для фронтэнд-приложений

Блог компании Itransition Разработка веб-сайтов™ *CSS *JavaScript *

Привет™, Хабр! Меня зовут Павел, я фронтэнд-архитектор в компании Itransition. Вот уже более 8 лет я работаю во фронтэнде. В течении этого времени мне довелось поработать с приложениями, как полностью основанными на бэкенд™ технологиях, так и с классическими сайтами, написанными с использованием нативного JS и различных библиотек и фреймворков. В данной™ статье™ я хотел бы провести в некотором роде ретроспективу тех решений, с которыми сталкивался на практике.

В последние годы мы привыкли работать со светлыми и темными темами™ во всем: в IDE, в браузере, на десктопе, часто даже на мобильных устройствах. Обычно™, когда нам говорят о разных™ темах, мы представляем разный™ набор цветов™, в рамках™ которых главный цвет обычно™ либо близок™ к белому™, либо темно-серому™.

С развитием интернета всё больше™ приложений перебираются на мобильные устройства и в браузер. Сегодня мы рассмотрим именно™ последний способ™ создания приложений – в виде сайтов™ – при этом учтем как современные приложения, так и enterprise-приложения, которые должны™ работать со старыми версиями браузеров. 

В рамках™ этой статьи™ мы попробуем разобрать различные варианты того, как мы можем дать пользователю возможность выбирать из различных тем, а также настраивать их под себя. Поскольку во всех приложениях есть своя специфика от технического стека до бизнес™-требований, мы попробуем отталкиваться от базовых подходов и не будем привязываться к конкретным библиотекам или фреймворкам. При описании всех подходов я приведу примеры, основанные на реальных решениях, которые были использованы при разработке и применялись в готовых проектах.

Читать™ далее
Всего голосов 8: ↑6 и ↓2 +4
Просмотры 3.9K
Комментарии 2

CSS в Oxygen™ XML для гуманитариев

Блог компании Orion Innovation CSS *XML *Подготовка технической документации *

Всем привет™!

Меня зовут Татьяна и я старший технический писатель в компании Orion Innovation. В нашей уже немаленькой команде мы используем довольно обширный стэк инструментов и технологий, но наиболее востребованы и удобны™ в работе™ - XML-редакторы с поддержкой DITA архитектуры. Моя статья™ - для технических писателей. Особенно для тех из нас, кто, как и я, имеет гуманитарное образование. Для разработчиков, особенно фронтендеров, это может показаться элементарными вещами™, но для техписов, возможно, будет полезной. 

Читать™ далее
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 1.3K
Комментарии 3

Актуальные форматы изображений в вебе

CSS *HTML *
Из песочницы

Эта статья™ — расширенный вариант нашего™ внутреннего документа о том, как подготавливать изображения для сайтов™ и веб-приложений. В ней мы описали актуальные форматы и собрали рекомендации, как добавить поддержку WebP и AVIF на сайт и какие инструменты можно использовать. В заключительной части обзора™ расскажем, как мы внедрили эти форматы на нашем сайте и какие результаты получили.

Читать™ далее
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 6.3K
Комментарии 22

CSS Анимация с вариативным шрифтом

CSS *
Из песочницы
Перевод

В процессе изучения некоторых супер-способностей CSS, моё внимание привлекли вариативные шрифты™. В этой статье™ я покажу™ как их можно использовать для анимации начертания шрифта™ и дам краткий обзор последних дополнений CSS.

Читать™ больше™
Всего голосов 9: ↑9 и ↓0 +9
Просмотры 4.2K
Комментарии 3

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №496 (29 ноября™ — 5 декабря 2021)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 29: ↑29 и ↓0 +29
Просмотры 6.8K
Комментарии 1

Как я в десять™ раз ускорил работу™ таблицы Google™ одной строкой CSS

Блог компании Timeweb Cloud Разработка веб-сайтов™ *CSS *
Перевод
Наша компания использует Google™ Search™ Console для проверки статуса индексации и оптимизации видимости наших веб-сайтов™. Также в консоли можно проверить, какие внешние веб-сайты ссылаются на вашу страницу. Однажды я просматривал страницу «Top linking sites» и заметил сильное торможение скроллинга. Оно происходило, когда я выбирал отображение большого массива данных™ (500 строк) вместо™ стандартных 10 результатов.


Раздел™ «Top linking sites» в Google™ Search™ Console, 500 строк на страницу

Я интересуюсь производительностью фронтенда, поэтому не мог удержаться и решил разобраться, в чём дело. В конце концов™, Google™ активно стремится к повышению веб-производительности, поэтому стоит ожидать, что собственные публичные приложения компании будут хорошим эталоном.
Читать™ дальше™ →
Всего голосов 100: ↑100 и ↓0 +100
Просмотры 29K
Комментарии 26

Вклад авторов