Уроки по тегу «CSS3»
Создание журнальной верстки в несколько колонок было проблематичным с использованием CSS. С приходом стандарта CSS3 появился новый модуль — CSS Multi-column Layout, который дал возможность создавать колонки с автоматическим переносом контента. Изучим возможности модуля CSS Columns и ограничения, которые накладываются при таком способе стилизации текста
Формы — важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Изучим, как создаются формы, добавляются текстовые поля, поля для выбора, списки и кнопки. Затронем тему доступности форм для людей с ограниченными возможностями
Одноцветный фон или изображение — не единственный способ добавить стили для блока. Художник и дизайнеры, для создания фона, нередко используют градиенты — плавные переходы одного цвета в другой. В этом уроке научимся создавать линейные и радиальные градиенты. С помощью градиентов и хитрости изучим создание резких переходов между цветами, а также узнаем о цветовом круге и как, с его помощью, находить сочетания цветов для градиентов
Списки — неотъемлемая часть текста. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В этом уроке изучим доступные виды списков в HTML, потренируемся во вложенности списков и затронем тему стилизации маркеров списка
Какие CSS свойства влияют на размеры элементов при отображении на странице? Вспомним понятие блочной модели и изучим работу свойств margin, padding и border для установки внешних/внутренних отступов и видимых границ элемента. Познакомимся со свойством box-sizing, с помощью которого изменяется стандартное поведение блочной модели
Как и в реальном мире, в мире верстки используются единицы измерения для обозначения размеров элементов, отступов, размера текста и так далее. В этом уроке познакомимся с базовыми единицами измерения и их взаимосвязи с элементами на сайте. Изучим понятие относительных и абсолютных единиц и выявим разницу между единицами em и rem
Работа с контентом — базовая часть при создании проекта. За красивыми анимациями, блоками и картинками скрывается контент. За ним приходит пользователь на сайт или открывает приложение. В этом уроке кратко рассмотрим темы, которые будут изучаться на протяжении курса
Слышали фразу «Поиграйся со шрифтами»? Настало время этим заняться. Учимся подключать шрифты с помощью CSS, управлять размером текста, оформлением и устанавливать межстрочные интервалы. В конце урока изучим обобщенное свойство font, с помощью которого можно установить сразу 6 разных стилей текста
При работе со стилями довольно часто сталкиваются с необходимостью стилизовать не только конкретные элементы, такие как таблицы, списки, текст, медиаэлементы, формы. Порой нужно также стилизовать и блоки, внутри которых они находятся. Для этого можно установить фон для блока с контентом, а как это сделать, с помощью свойства background, узнаем в этом уроке. Изучим свойства для установки цвета, изображения, научимся позиционировать фон и устанавливать его размеры
Таблицы — один из самых неудобных элементов в HTML. Для их создания используется много тегов, а небольшие ошибки могут испортить настроение. В этом уроке последовательно, шаг за шагом, изучим создание простых и сложных таблиц, разберемся, откуда могут возникать ошибки и как их не допускать. К концу урока вы сможете смело создавать таблицы и перестать их бояться
Знакомимся с целями и задачами курса CSS: Трансформации
Поговорим о возможности наклонения HTML-элементов с использованием функции skew свойства transform
Поговорим о трехмерном пространстве и чем оно отличается от двухмерного
Учимся использовать изученные ранее трансформации в трехмерном пространстве
Изучаем работу функции translate и учимся перемещать объекты на странице с ее помощью
Изучаем масштабирование HTML-элементов с использованием функции scale свойства transform
Учимся вращать объекты с помощью функции rotate
Изучим, как работает светлая и темная тема в Bootstrap
Узнаем, как подключить только нужные файлы Bootstrap и убрать код, который не нужен
Изучим работу Utility API в Bootstrap. Создадим новую утилиту и изменим уже существующую