Верстка \ Статьи по верстке

Использование Google API для доступа к переменным шрифтов

От автора: веб-сайт Google Fonts является отличным ресурсом, и, учитывая постоянно растущий интерес к переменным шрифтам, часто возникает вопрос, будут ли Google Fonts иметь переменные шрифтов, и если да, то как мы будем их использовать?

Продолжить чтение

Верстка \ CSS 3

Интеллектуальные пользовательские свойства с новым API Houdini

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

Продолжить чтение

Верстка \ CSS 3

CSS Grid меняет наше представление о структуре контента

От автора: любой, кто хоть немного занимался созданием веб-сайтов, знает, что div — это важный строительный блок для управления макетами. HTML5 представил новые семантические элементы, и хотя они являются фантастическим дополнением к языку, они немного похожи на гарнир в супе div.

Продолжить чтение

Верстка \ CSS 3

Проблемы с закругленными кнопками

От автора: хотя плоские, минимальные интерфейсы были в моде в течение большей части десятилетия, чисто прямоугольные кнопки не так распространены, как вы думаете. Такие дизайнеры, как я, часто «закругляют» углы, которые могут сделать интерактивный элемент менее привлекательным для клика.

Продолжить чтение

Верстка \ CSS 3

CSS Grid: Введение с примерами

От автора: я помню, как впервые изучал CSS, и как я был рад узнать о display float и inline, которые позволяют размещать элементы, как нам нужно. Интересно, как бы я отреагировал, если бы в то время была доступна система двумерного макета? На самом деле, даже сейчас я взволнован этим, потому что это меняет все: как способ написания CSS, так и способ, которым мы пишем разметку. С помощью CSS Grid проще, чем когда-либо, создавать адаптивные, динамические и независимые от исходного формата макеты.

Продолжить чтение

Верстка \ CSS 3

Липкое позиционирование без JavaScript (благодаря CSS position: sticky)

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

Продолжить чтение

Верстка \ HTML&CSS

Как создать стильную таблицу прайсов с липким заголовком

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

Продолжить чтение

Верстка \ CSS 3

CSS Quickies: CSS-переменные - или как легко создать «светлую / темную» тему

От автора: что такое CSS Quickes? Я спросил в своем любимом сообществе в Instagram: «Какие свойства CSS сбивают вас с толку?» В «CSS Quickies» я подробно объясняю одно свойство CSS. Это свойства, которые просят пояснить члены.

Продолжить чтение

Верстка \ CSS 3

Как удалить неиспользуемый CSS

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

Продолжить чтение