03 Основные свойства стилей

Это основные параметры, определяющие стили, которые могут применяться к большинству элементов в Редакторе Bubble. В них входят границы, фоны, тени, шрифты и т.д. Данные параметры включены в Стили.

Размеры (Dimensions)

Данные параметры управляют размером и позиционированием выбранного элемента.

Ширина (Width)

Определяют ширину выбранного элемента в пикселях.

Высота (Height)

Определяют высоту выбранного элемента в пикселях. Данная высота подбирается автоматически, если для элемента или его содержимого установлена настройка "Stretch to fit content"/"Растягивать, чтобы вместить содержимое". В таком случае введенная высота будет минимальной для данного элемента.

Слева (Left)

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

Сверху (Top)

Определяет положение по вертикали в пикселях относительно верхней границы элемента, в котором содержится данный элемент. Это может быть группа, всплывающее окно или страница.

Угол поворота (Rotation angle)

Поверните выбранный элемент, введя значение в данное поле. Данный параметр выражается в градусах.

Тени (Shadows)

Данные параметры определяют тень выбранного элемента.

Стиль теней (Shadow style)

Выберите один из параметров: None (Нет), Outset (Внешняя), Inset (Внутренняя), чтобы задать тень для выбранного элемента. Inset устанавливает тень внутри элемента. Outset устанавливает тень снаружи элемента.

Горизонтальный выступ (Horizontal offset)

Задает положение горизонтальной тени. Допускаются отрицательные значения.

Вертикальный выступ (Vertical offset)

Задает положение вертикальной тени. Допускаются отрицательные значения.

Радиус размытия тени (Shadow Blur radius)

Задайте расстояние размытия тени в пикселях. Чем больше число тем сильнее размывается тень. Маленькое число означает более узкую тень.

Радиус распространения тени (Shadow spread radius)

Положительные значения будут расширять и увеличивать тень, отрицательные - будут сжимать тень. Если не задано, значение будет 0 (тень будет того же размера, что и элемент).

Цвет тени (Shadow color)

Определяет цвет тени.

Подсказка: Поэкспериментируйте с прозрачностью цвета.

Настройки шрифта (Font options)

Данные настройки определяют стиль текста.

Шрифт (Font)

Выбирает шрифт, который будет применен к выбранному элементу. Вы можете выбрать из сотен шрифтов библиотеки Google Fonts.

Размер шрифта (Font Size)

Введите размер шрифта в пикселях.

Полужирный (Bold)

Делает текст темнее и толще

Курсив (Italic)

Делает текст курсивным

Подчеркнутый (Underline)

Подчеркивает текст. Это полезно для условного форматирования. Например, когда на ссылку наводится курсор.

Выравнивание текста (Text Alignment)

Выравнивает текст. Можно выбрать один из параметров: Left (по левому краю), Center (по центру) и Right (по правому краю).

Цвет текста (Font Color)

Определяет цвет текста.

Цвет текста-заглушки (Placeholder color)

Выберите цвет, которым будет написана заглушка у поля ввода.

Тень шрифта (Font Shadow)

Данные параметры добавляют к тексту тень.

Отображать тень текста (Show text shadow)

Поставьте галочку, чтобы отображать тень текста.

Горизонтальный выступ (Horizontal offset)

Задает положение горизонтальной тени. Допускаются отрицательные значения.

Вертикальный выступ (Vertical offset)

Задает положение вертикальной тени. Допускаются отрицательные значения.

Радиус размытия тени шрифта (Font Shadow Blur Radius)

Задайте расстояние размытия тени в пикселях. Чем больше число тем сильнее размывается тень. Маленькое число означает более узкую тень.

Цвет тени шрифта (Font shadow Color)

Определяет цвет тени.

Подсказка: Поэкспериментируйте с прозрачностью цвета.

Настройки шрифта (Font options)

Данные настройки определяют интервалы в тексте

Интервал между словами (Word spacing)

Задайте расстояние в пикселях между словами.

Междустрочный интервал (Line spacing)

Задайте высоту строки в пикселях.

Интервал между буквами (Letter spacing)

Задайте расстояние в пикселях между буквами.

Границы (Borders)

Данные параметры определяют границы элементов.

Задавать границы по отдельности (Define each border independently)

Поставьте здесь галочку, если хотите настраивать границы по отдельности.

Стиль границы (Border style)

Выберите стиль границы. Можно выбрать один из параметров: None (Нет), Solid (Непрерывная), Dotted (Точками), Dashed (Пунктирная), Double (Двойная), Groove (Паз), Ridge (Гребень), Inset (Вставка) and Offset (Выступ).

Округление границы (Border roundness)

Задайте радиус границы в пикселях.

Ширина границы (Border Width)

Задайте ширину границы в пикселях

Цвет границы (Border color)

Выберите цвет границы

Подсказка при наведении (Tooltip on hover)

Отображаемый текст (при наведении) (Tooltip text (on hover))

В данном поле задается текст, который отображается в браузере при наведении курсора на выбранный элемент. Технически, данный параметр устанавливает атрибут title для выбранного элемента.

Отступ (Padding)

Данные параметры позволяют задать расстояние от границы до самого содержимого элемента.

Вертикальный отступ (Vertical padding)

Вертикальное расстояние в пикселях от верхней границы до содержимого элемента.

Горизонтальный отступ (Horizontal padding)

Горизонтальное расстояние в пикселях от левой границы до содержимого элемента.

Центрировать текст по вертикали (Center the text vertically)

Поставьте здесь галочку, чтобы центрировать текст по вертикали.

Фон (Background)

Данные опции определяют фон элементов: цвет, изображение и т.д.

Стиль фона (Background style)

Выберите стиль фона, который будет применен к элементу. Доступные опции: None (Нет), Flat color (Сплошной цвет), Gradient (Градиент) и Image (Изображение).

Цвет фона (Background Color)

Выберите цвет фона элемента.

Стиль градиента (Gradient style)

Выберите стиль градиента - Linear (Линейный) или Radial (Радиальный).

Направление градиента (Gradient direction)

Выберите направление градиента: Top (Сверху), Left (Слева), Bottom (Снизу), Right (Справа) или Custom (Пользовательское).

Градус градиента (Direction degrees)

Введите значение от 0 до 360, которое будет определять направление градиента.

Форма градиента (Gradient shape)

Задайте форму градиента. Это может быть Ellipse (Эллипс) или Circle (Круг).

Основание градиента (Gradient base)

В данном выпадающем меню выберите область экрана, в которой будет находиться основание градиента. Доступные варианты: Closest-side (Ближняя сторона), Closest-corner (Ближний угол), Farthest-side (Дальняя сторона), and Farthest-corner (Дальний угол).

Положение центра по оси X в процентах (X center position (%))

Задайте расположение центра градиента по горизонтали. 50% - расположит градиент в центре элемента.

Положение центра по оси Y в процентах (Y center position (%))

Задайте расположение центра градиента по вертикали. 50% - расположит градиент в центре элемента.

Начальный цвет (Starting color)

Выберите начальный цвет градиента.

Конечный цвет (Ending color)

Выберите конечный цвет градиента.

Промежуточный цвет (Intermediate color)

Выберите опциональный промежуточный цвет градиента. Если поле пустое, промежуточного цвета не будет.

Фоновое изображение (Background image)

Загрузите или задайте динамическое изображение. Если хотите, можете выбрать изображение из бесплатной библиотеки Bubble.

Центрировать изображение (Center the image)

Располагает изображение в центре элемента.

Сделать ширину изображения равной родительскому элементу (Make image as wide as parent element)

Если элемент шире, чем выбранное изображение, то размер изображения автоматически изменится, чтобы закрыть весь элемент.

Обрезать изображение, чтобы соответствовать размеру элемента (Crop the image to fit the element size)

В адаптивном режиме активация данной опции позволит обрезать фоновое изображение так, чтобы заполнить весь фон элемента без искажения изображения.

Размножить изображение по вертикали (Repeat the image vertically)

Если высота изображения меньше, чем высота элемента, размножает элемент по вертикали.

Размножить изображение по горизонтали (Repeat the image horizontally)

Если ширина изображения меньше, чем ширина элемента, размножает элемент по горизонтали.

Цвет фона, если изображение отсутствует (Background color if empty)

При использовании динамического изображения загрузка может занять несколько миллисекунд. В это время будет отображаться фон выбранного цвета. По умолчанию прозрачный.