Back to top

CSS

Синтаксис и способы подключения каскадных таблиц стилей (CSS) на веб-страницы. Управление фоном HTML-элементов с помощью свойств семейства background. Задание границ HTML-элементов с помощью блоковой модели и свойств margin, padding, border, width и height. Позиционирование элементов на странице с помощью CSS-свойства position в сочетании со свойствами top, right, bottom и left. Перекрывание элементов. Плавающие элементы. Создание анимационных эффектов на основе CSS-свойств transition и animation.

Анимированный фон загрузки на CSS

Рассмотрим принцип создания на CSS визуального эффекта движущегося фона, как на кнопке ниже. Так, чтобы анимированный фон задавался присвоением CSS-класса loading-bg. Для создания эффекта задействуем псевдоэлемент :after и CSS-анимацию свойства transform с помощью CSS-функции translateX() и правила @keyframes.

27 ноября 2020

CSS-анимация

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

4 марта 2016

Позиционирование элементов на странице

Размещение элементов на странице определяется с помощью CSS-свойства position в сочетании со свойствами top, right, bottom и left. Свойство position определяет способ позиционирования, а свойства top, right, bottom и left задают отступы в различных направлениях.

24 ноября 2015

Блоковая модель (box model)

Блоковая модель — это одна из важнейших концепций каскадных таблиц стилей (CSS), которая позволяет задавать границы элементов на экране и расстояния между ними.

6 октября 2015

Синтаксис CSS

Каскадные таблицы стилей (от англ. Cascading Style Sheets, CSS) — это язык, определяющий стиль или визуальное оформление веб-страниц, в т.ч. расположение HTML-элементов на экране, цвета текста и фона, шрифты и многое другое.

2 октября 2015

Свойство background

Каскадные таблицы стилей позволяют устанавливать самые разнообразные фоны практически для любых элементов веб-страниц. Для этого используются следующие CSS-свойства семейства background:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
2 октября 2015