Верстка \ CSS 3

Простая CSS анимация с помощью @keyframes

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

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

Верстка \ CSS 3

CSS селекторы: специфичность

От автора: представьте специфичность в виде оценки или степени, которая решает, какие стили применить к элементу. Универсальный селектор (*) имеет низкую специфичность. Селектор id – высокую. Родительские селекторы типа p img и дочерние селекторы типа .panel > h2 имеют более высокую специфичность, чем типовые селекторы p, img и h1.

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

Верстка \ CSS 3

Улучшаем читаемость CSS с помощью пользовательских свойств

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

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

Верстка \ CSS 3

Создание доступных чекбоксов и радиокнопок на чистом CSS

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

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

Верстка \ CSS 3

Как создать hover эффект на чистом CSS, привязанный к направлению курсора

От автора: несколько уроков по созданию hover эффектов на чистом CSS, привязанных к направлению курсора. Уроки предназначены для тех, кто имеет хотя бы базовые знания HTML и на продвинутом уровне знают CSS/SASS.

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

Верстка \ CSS 3

Как работает функция calc()

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

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

Верстка \ CSS 3

Простое использование CSS Grid

От автора: возможно, вы слышали о CSS Grid, так давайте попробуем его. Может быть, вы не знали, с чего начать. Как учить CSS Grid? Rachel сделала замечательную серию демонстраций по Grid. Как только вы изучите основы, вам будет сложно понять, где использовать сетки. На днях я игрался с сетками и наткнулся на довольно простой пример

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

Верстка \ CSS 3

Обратный порядок элементов с помощью CSS Flexbox

От автора: CSS становится все более мощным инструментом. Мы почти дошли до той точки, когда порядок HTML элементов на странице не будет важен с точки зрения отображения. С помощью CSS сейчас можно создавать любые макеты, маленькие и большие. Забудем про семантику и доступность, на днях я думал, а можно ли инвертировать отображаемый порядок элементов только с помощью CSS. Раньше для этого нужно было менять DOM.

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

Верстка \ CSS 3

Свойство overflow-wrap

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

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

Верстка \ CSS 3

Псевдоклассы CSS: :not и :target

От автора: статья является выдержкой из нашей книги CSS мастер за авторством Tiffany B. Brown. Книгу можно купить в магазинах по всему миру или приобрести цифровую версию. Ранее в этой главе мы уже говорили, что псевдоклассы позволяют задавать стили на основе информации, которую невозможно получить из дерева документа и на которую нельзя сослаться с помощью простых селекторов. К ним относятся логические и лингвистические псевдоклассы типа :not и :lang(), а также псевдоклассы, срабатывающие на пользовательские события, типа :hover и :focus.

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