HTML&CSS

HTML vs Body в CSS

В статье автор анализирует разницу между элементами HTML и BODY с точки зрения CSS. Рассмотрено несколько примеров, когда глобальные стили лучше применять к html, а когда к body.

Эффект parallax на чистом CSS

Реализация parallax на JavaScript имеет ряд недостатков: рассинхронизация с процессом рендеринга, модификация DOM при прокрутке страницы и т.д. Кейт Кларк предлагает интересный способ реализации параллакса на чистом CSS.

Основы позиционирования фона в CSS

Применение фоновых изображений к элементам — это одна из наиболее часто используемых возможностей CSS. Свойство background-position используется для указания позиции фонового изображения, именно оно детально рассматривается в статье.

Отключение возможности выделения текста в CSS

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

Более удобные выпадающие меню

Проблема выпающих многоуровневых меню довольно стара, но до сих пор актуальна. В статье Крис Койер рассматривает несколько способов улучшить выпадающие меню и сделать их более удобными.

Модальное окно на чистом CSS

Интересный способ реализации модального окна на чистом CSS с помощью псевдо-класса :target. Этот пример интересен не только как академическая демонстрация псевдо-класса :target, но и вполне может использоваться в реальном проекте.

Освоение flexbox для современных веб-приложений

В статье приведено несколько практических примеров применения flexbox, а также описана поддержка flexbox браузерами. Если ваше приложение требует поддержки только современных браузеров — вы можете найти что-то полезное.

Как сделать анимированное плавающее меню

В статье описан простой способ создания анимированного плавающего меню. Такое меню при прокрутке страницы всегда остается "под рукой" и, в то же время, не занимает слишком много пространства.

Display: inline-block

Для того, чтобы элементы на странице располагались друг за другом, можно использовать свойство display:inline-block. В статье рассматривается, как использовать inline-block и как справиться с проблемами, которые он вызывает.
1 2 3