От автора: люди любят давать названия различным вещам, а разработчики обожают сокращения. И вот мы здесь, и перед нами все эти правила именования и методики CSS: BEM, SMACSS, PointNorth, ITCSS, OOCSS, Title CSS, Idiomatic CSS, AtomicDesign, SUIT CSS, Kickoff CSS,и т.д.

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

От автора: сейчас модуль Flexbox является, возможно, САМЫМ новым и модным инструментом для построения разметки макетов. Почти невероятные возможности Flexbox адаптироваться под доступное пространство вызвали у многих из нас сильное удивление. Однако есть и другие решения. Во многих случаях я находил более простые решения, используя часто игнорируемые CSS свойства для отображения таблиц.

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

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

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

От автора: Идея следующая: показывать столько горизонтальных пунктов меню, сколько помещается по ширине страницы, и добавлять переключатель пользовательского интерфейса для отображения всех остальных пунктов. Мне нравится такая идея. Зачем скрывать все за переключателем, когда есть место для отображения наиболее важных пунктов? Варианты того, как это должно выглядеть и работать, могут быть разными. Давайте посмотрим на некоторые примеры!

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

От автора: Отзывчивая разметка макета (наподобие интернет-магазина) с анимацией элементов сетки, которая происходит при открытии контента.

Сегодня мы хотели бы поделиться с вами примером простой разметки макета с анимацией сетки. Отзывчивая разметка имеет боковую колонку (сайдбар) и элементы сетки, к которым при клике будет применяться анимация, расширяющая их контентную область.

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

От автора: Скорее всего, вы уже знакомы с данным свойством. Например, большинство браузеров, по умолчанию, задают с помощью данного свойства подчеркивание у ссылок (text-decoration: underline;), которое мы можем отменить вот так: text-decoration: none;.

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

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

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

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

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

От автора: в данной обучающей статье я рассмотрю два подхода, позволяющих определить, поддерживаются ли браузером определенные CSS возможности или нет. В первом подходе используется инструмент Modernizr, популярная JavaScript библиотека, а во втором – директива @support, подающее надежды CSS решение.

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

От автора: Простой шаблон, в котором используется CSS свойство background-attachment для создания эффекта фиксированного фона. Иногда вам не нужно писать какой-то ненормальный JavaScript код, чтобы создать креативные и хорошо выглядящие эффекты. Сегодня в центре нашего внимания всего одно CSS свойство — background-attachment. Вы можете зафиксировать фон в рамках области просмотра (background-attachment: fixed;).

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

От автора: Смелая реализация второстепенного меню, которое плавно появляется поверх основного меню. Сегодня мы расскажем о простом и полезном приеме: второстепенная навигация плавно выдвигается вниз, заменяя собой ссылки основного меню.

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