Как сделать картинку через css

Существует несколько способов создания изображений с помощью CSS. Рассмотрим несколько примеров.

1. Использование свойства background

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

.round {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

2. Использование свойства box-shadow

Другой способ — использование свойства box-shadow. Если определить только цвет тени, размер и расположение будущей фигуры, то создадим простейшее изображение. Например, чтобы создать круглую кнопку с зеленым фоном и тенью, можно написать следующий код:

.button {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.5); 
}

3. Использование псевдоэлементов before и after

Третий способ — использование псевдоэлементов before и after и задание им размеров и стилей для создания нужной фигуры. Например, чтобы создать круглый див с голубым фоном и белой рамкой, можно написать следующий код:

.round {
  position: relative;
  width: 100px;
  height: 100px;
}
.round:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: blue;
  border: 2px solid white;
}

Таким образом, используя CSS, можно создавать разнообразные изображения и элементы дизайна для веб-страниц.