Рубрика «Дизайн сайта»

CMS WordPress

Фирмы, занимающиеся разработкой сайтов, обычно создают индивидуальную CMS лишь в особых разработках, когда задача нестандартна и сложна. А когда задача обыденна, эти же фирмы применяют уже готовые решения,

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

Для добавления изображения на веб-страницу применяется элемент <img>, его атрибут src определяет путь к графическому файлу, который обычно хранится в формате PNG или JPEG. Также для <img> необходимо указать обязательный атрибут alt, он устанавливает альтернативный текст, который описывает содержание картинки.

Как добавить рамку к изображению при наведении?

Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover, как показано в примере 1.

Пример 1. Добавление рамки

<!DOCTYPE html>
<html>
 <head>
  <meta 

Как добавить рамку к изображению?

Для добавления рамки к изображению применяется стилевое свойство border, которое следует добавить к селектору img. В качестве значения одновременно указывается толщина рамки, её стиль и цвет. Например, для создания сплошной рамки толщиной два пикселя красного цвета необходимо записать border: 2px

Как добавить скруглённые уголки к картинке?

Чтобы получить изображение не с прямыми, а со скруглёнными уголками, к селектору img следует добавить свойство border-radius со значением, определяющим радиус скругления. В примере 1 этот радиус задан как 10 пикселей. К каждому <img> для наглядности добавлена рамка, которая повторяет контур изображения.

Как задать ширину изображения?

Ширина картинки задаётся с помощью атрибута width элемента <img>. Достаточно указать только ширину, высоту же браузер изменит автоматически, исходя из пропорций картинки (пример 1).

Пример 1. Атрибут width

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина</title>
 </head>
 <body>
  <img src="image/spam.jpg" alt="Спам" width="500">
 

Как отразить изображение?

Для отражения изображения или другого элемента, в том числе текста, применяется свойство transform и функция scale(). Хотя исходно эта функция предназначена для изменения масштаба элемента, отрицательное значение -1 позволяет сделать отражение.

Варианты такие:

  • transform: scale(-1, 1) — отражение по горизонтали;

Как повернуть изображение?

Для поворота изображения применяется свойство transform с функцией rotate(), внутри которой указываем угол поворота. В табл. 1 показаны разные варианты поворота картинки со значением угла.

Табл. 1. Углы поворота
Как повернуть изображение? Как повернуть изображение? Как повернуть изображение? Как повернуть изображение?
Исходное изображение rotate(90deg) rotate(180deg) rotate(-90deg)

В примере 1 показано добавление картинки со

Как размыть изображение?

Для размытия картинок применяется свойство filter с функцией blur(), внутри которой пишется радиус размытия. Чем больше значение, тем сильнее будет размыта картинка. Минимальное значение равно нулю, при этом никакого размытия не происходит. При значении, скажем, 5px, происходит размытие изображения и

Как сделать картинку резкой?

Когда размер изображения увеличивается, то повышается и количество пикселей, но поскольку они никак не появятся из ниоткуда, то браузеру приходится добавлять их самостоятельно. При уменьшении изображения, наоборот, сокращается количество пикселей и лишние браузер удаляет. Построение картинки нового размера на основе