Главная

Рубрика «псевдоэлементы»

Магия CSS на практике: советы по вёрстке от гика

2024-06-25 в 9:00, admin, рубрики: css, ruvds_статьи, верстка, лайфхаки, псевдоклассы, псевдоэлементы, радиокнопки, центрирование, чекбоксы

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

Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня я расскажу:

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

Читать полностью »

Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое

2014-01-18 в 10:28, admin, рубрики: css, CSS-анимации, CSS-трансформации, Блог компании Нордавинд, Веб-разработка, псевдоэлементы

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

Быстрое изменение состояния посреди анимации

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

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }

  /* Keep off state for a short period */

  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:

Трюки с CSS анимациями: мгновенные изменения, отрицательные задержки, анимация transform origin и другое
Читать полностью »