От автора: вертикальный ритм (Vertical Rhythm) – важная концепция в веб-дизайне. Она способна собрать дизайн воедино и сделать элементы на странице единообразными. Раньше невозможно было менять в CSS Vertical Rhythm на разных размерах экрана, потому что у нас не было подходящих инструментов. Сейчас такая возможность есть, благодаря CSS calc и пользовательским свойствам. Статья объясняет, как это сделать.

Читать далее →

От автора: Thierry Blancpain – бренд-дизайнер, работает в Informal Inquiry в Нью-Йорке, является сооснователем Grilli Type, семейсива шрифта Swiss. Статья применима ко всем веб-шрифтам, однако в качестве примеров концепций используются шрифты Grilli Type, в частности те, которые демонстрируют функции OpenType.

Читать далее →

От автора: CSS переменные (или Custom Properties) – большое достижение для front end разработчиков. Технология переносит мощь переменных в CSS, что сокращает повторения, улучшает читаемость и делает код более гибким. В отличие от переменных в CSS препроцессорах, CSS переменные являются частью DOM. У этого есть много преимуществ. По факту, это переменные Sass и LESS на стероидах. В этой статье я быстро расскажу вам о том, как работает эта новая технология.

Читать далее →

От автора: CSS Grid – отличный инструмент разметки для сайтов, заточенных под контент с длинными фрагментами текста. CSS Grid имеет огромную ценность для множества стандартных макетов UI. В этой статье я расскажу, как с помощью CSS Grid улучшить макеты приложения, которые должны подстраиваться и адаптироваться под взаимодействия пользователя и изменение условий, чтобы ваши панели всегда правильно скролились.

Читать далее →

От автора: история о том, как я выявил и решил проблему с производительностью в веб-приложении React. Я отлаживал много медленных программ, но никогда в вебе. Это была отличная возможность поэкспериментировать с инструментами и повысить свои навыки. Как выяснилось, моя проблема тяжело поддавалась анализу, но благодаря инструментам производительности Chrome, ручного профилирования и тщательного научного подхода я смог найти решение, и оптимизация CSS была произведена.

Читать далее →

От автора: схлопывание отступов CSS — это то, что упоминается в каждой первой или второй главе каждой книги по CSS. Когда я давным-давно начинал изучать таблицы стилей, я конечно, читал и об этом. Эти воспоминания немного затерлись, поэтому пришло время освежить мои знания, давайте начнем!

Читать далее →

От автора: примеры того, как вы можете использовать CSS или JavaScript для работы с длинными строками текста. Если вы когда-нибудь имели дело с блогом, то понимаете всю боль, связанную с тем, как оформить длинные заголовки статьи. Комбинация длинных слов, больших размеров шрифта и нереального количества пробелов заставляют дизайнеров тихо рыдать в сторонке.

Читать далее →

От автора: недавно я увидел весёлую анимацию, в которой использовались hover эффекты, на сайте Grover и просто был поражён нею. Когда вы наводите курсор на кнопку «Подписаться», там отображается цветной градиент, который следует за движениями курсора. Идея довольно простая, но в результате получается кнопка, которая отличается от остальных, и на которую просто невозможно не нажать.

Читать далее →

От автора: как браузер отображает шрифты, и для чего нужны резервные стеки. Синтаксис CSS для их настройки. Работа с отдельными символами — об этом в статье.

Читать далее →

От автора: настраиваемые сайты. Я уверен, вы имели с ними дело и раньше. Настройка сайта дает пользователю возможность адаптировать его. Как будто пользователи могут им управлять. Ниже приведён наш базовый пример.

Читать далее →