Как изменить цвет кнопки?

Для изменения цвета фона и текста кнопки используем, соответственно, свойства background и color, добавляя их к селектору button, как показано в примере 1. Пример 1. Цветные кнопки <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопки</title> <style> button { background: #008EB0; /* Синий цвет фона */ color: #fff; /* Белый цвет текста */ border: none; /* Убираем рамку […]

Как изменить вид нажатой кнопки?

Чтобы пользователь понимал, что его щелчок по кнопке сработал, в момент щелчка меняют вид самой кнопки. Для этого используется псевдокласс :active, который добавляется к селектору button. Стилевые правила для этого селектора определяют вид нажатой кнопки (пример 1). Пример 1. Использование :active <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> <style> button { border: 2px solid #e34761; /* […]

Как запретить изменение размеров ?

В правом нижнем углу текстового поля <textarea> есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля. Рис. 1. Вид текстового поля Вид уголка в браузерах может различаться, но его функция остаётся одинаковой — если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea […]

Как сделать, чтобы фон не повторялся?

По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой по всему элементу. Такое поведение не всегда требуется, часто картинка используется для стилизации и должна выводиться только один раз. Для этого к свойству background-repeat добавляется значение no-repeat, как показано в примере 1. Пример 1. Фон веб-страницы <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Фон</title> <style> body […]

Как сделать фоновую картинку на всю ширину?

Для изменения размеров фоновой картинки используется свойство background-size. Значение 100% масштабирует изображение на всю доступную ширину, при этом высота будет задана автоматически, исходя из пропорций картинки (пример 1). Пример 1. Использование background-size <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ширина фона</title> <style> body { background-image: url(/example/image/shark.jpg); /* Адрес картинки */ background-size: 100%; /* Ширина картинки */ } […]

Как сделать фон полупрозрачным?

Для создания цветного фона разной степени прозрачности применяется свойство background или background-color, в качестве значения указывается функция rgba(), в которой цвет задаётся четырьмя параметрами: красная, зелёная, синяя составляющая цвета и уровень прозрачности. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности. Чтобы полупрозрачность элемента была заметна, под него следует подложить фоновую […]

Как сделать градиентный фон на веб-странице?

Для создания градиентов предназначена функция linear-gradient(), которая добавляется к свойству background или background-image. background: linear-gradient(#9A5044, #E8D9A9); Без указания дополнительных параметров градиент получается вертикальным, первое значение указывает цвет сверху, второе — снизу. Браузер уже сам делает плавный переход между указанными цветами. Чтобы сделать градиент в виде фона веб-страницы, background с linear-gradient() следует добавить к селектору body. Однако […]

Как размыть фоновую картинку?

За размытие содержимого элемента, включая картинки, отвечает функция blur(), которая применяется к свойству filter. Эта функция размывает всё на своём пути, поэтому сперва надо изолировать фоновое изображение и уже затем использовать filter. Для этого создадим псевдоэлемент через ::before и к нему добавим фон через background и размытие через filter. При этом псевдоэлемент требуется зафиксировать чтобы […]

Как задать цвет фона и текста веб-страницы?

Для изменения цвета фона всей веб-страницы применяется свойство background-color (или универсальное background), которое добавляется к селектору body, а для цвета текста используется свойство color, как показано в примере 1. Пример 1. Изменение цвета фона <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цвет фона</title> <style> body { background-color: #0A3542; /* Цвет фона */ color: #FFF; /* Цвет текста […]

Как добавить две фоновые картинки к одному элементу?

Браузеры позволяют добавлять к элементу произвольное число фоновых изображений, перечисляя параметры каждого фона через запятую. Достаточно воспользоваться универсальным свойством background и указать для него вначале один фон, а через запятую второй. Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали. […]