От автора: довольно часто возникает необходимость показать дополнительную информацию при наведении на изображение. Например, сделать подпись для фото в блоге, или в интернет-магазине при наведении на фото товара показать краткое описание товара. В данном уроке мы с вами рассмотрим, как реализовать вывод информации по наведению на изображение с интересным эффектом перевертывания.
Как я произвел удаление 250 КБ неиспользуемых стилей CSS с помощью PurgeCSS
От автора: удаление неиспользуемых стилей CSS в ряде случаев бывает просто необходимым. Я большой поклонник utility-first CSS. После ряда экспериментов на протяжении многих лет, это то, что я нашел самым лучшим, самым удобным и масштабируемым способом написания CSS на сегодняшний день.
От автора: шесть лет назад, если бы вы спросили меня, как я использовал трансформацию и псевдо-контент, я бы сказал вам «не использовал». Теперь я использую их сотни раз в крупных проектах, и я не могу представить проекта любого размера в последние годы, когда я не использовал эти инструменты — псевдоэлементы CSS и transform — для достижения визуальных эффектов, анимаций и гибких решений макета.
От автора: существует множество инструментов, которые помогут вам удалить из проекта «неиспользуемые CSS». Не проходит и недели, чтобы я не сталкивался с тем, что кто-то делится или продвигает подобный инструмент. На некоторых разработчиков это действует. Я забочусь о производительности, и я знаю, что уменьшение размеров файлов — это хорошо для производительности. В самом деле. Уверен, у нас есть CSS, который не используется в наших таблицах стилей. Если мы удалим его, это победа в производительности. Да, это было бы здорово. Нам стоит автоматизировать этот процесс. Нууууу, не уверен.
Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts
От автора: я не думаю, что это часто встречаемая болезнь или что-то подобное, но я видел, как это делали несколько раз и даже настаивали на этом. Вот, что я имею в виду…
Центрирование CSS: Самый крутой новый способ и самый крутой старый
От автора: это не полное руководство по центрированию. Это всего лишь небольшое наблюдение за старым и новым. Одна из самых сложных вещей, связанных с центрированием CSS — это когда вам нужно центрировать вещи как по вертикали, так и по горизонтали, и вы не знаете ширины или высоты того, что вы центрируете. Вертикальное центрирование представляет дополнительную сложность.
Новые (и старые) единицы CSS, о которых вы никогда не слышали
От автора: в последнее время JavaScript развивается стремительными темпами, но не похоже, что другие технологии утратят свое значение. CSS тоже развивается, и хотя Houdini, вероятно, станет новым прорывом в CSS-разработке, он, к сожалению, далеко не полностью принят. Таким образом, у нас есть обычная процедура регулярных совещаний экспертов, которые производят новые спецификации и т. д. Они работают не так быстро, как TC39, но все же.
От автора: за последние несколько лет CSS Layout резко изменился, как и способ разработки интерфейса наших сайтов. Теперь у нас есть реальный выбор с точки зрения методов компоновки, которые мы используем в CSS для разработки наших сайтов, а это значит, что нам часто приходится выбирать, какой подход принять. В этой статье я расскажу о различных методах макета, которые вам доступны, объясняя основы того, как они используются и для чего они используются.
От автора: несколько лет назад я написал короткую статью про специфичность CSS, близость элементов и обратные псевдоклассы. Все в ней по-прежнему актуально, но у меня есть некоторые обновления.
Более простая реализация скроллинга с помощью CSS position: sticky
От автора: мы много писали о скроллинге здесь на The Pudding. Мы рассмотрели все, начиная со сравнения библиотек и заканчивая адаптивными передовыми методами и глубоким рассмотрением Scrollama. Но всегда есть место для улучшения. Одной из самых заметных попыток реализации прокрутки является липкий графический шаблон, благодаря которому графический элемент сначала «застывает» на несколько этапов прокрутки, а затем переходит к другому состоянию. В этом посте мы сосредоточимся на самом простом решении, которое мы придумали, с использованием CSS position sticky.
Все права защищены © 2026
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения
2018-07-16