Информация [CSS] Урок 4: Создаем баннеры

[Николай Винсент]

Как сделать баннеры с помощью CSS (например: для групп пользователей на форумах)​

Цели урока:​

• Научиться делать баннеры со своим изображением
• Научиться делать баннеры самостоятельно

Итак, приступим!​

В CSS, чтобы сделать баннер с изображением на фоне, в свойстве background надо прописать url() и в скобках указать прямую ссылку на изображение.
Что бы сделать баннер, используя только CSS, без картинок, можно использовать несколько свойств, такие как: margin, padding, color, background-color/background-gradient, border-radius и другие на своё усмотрение.

Перейдем к коду!​

Для баннера картинкой, можно просто сделать так:

.namebanner {
  background: url(ссылка)
 }

Вместо namebanner вставляем своё название баннера (можно хоть какое)
Для своего баннера можно использовать свойства перечисленные выше
Объясню каждое из этих свойств:
margin – внешний отступ от элемента. Проще говоря, расстояние от других элементов (других баннеров, текстов, блоков и тд.)
padding – внутренний отступ. Задает расстояние текста от границ.
color – цвет текста
background-color – цвет фона
background-gradient – фон градиент
border-radius – скругляет углы
Итак, создадим овальный баннер, с красным текстом и сине-фиолетовым градиентом

.oval.banner {
  color: #ff0000;
  background: linear-gradient(50deg, #dd00ff 45%, #0000ff 100%);
  border-radius: 100px;
  padding: 10px;
  margin: 5px;

Добавим немного практики:​

Создайте баннер с красно-черным градиентом, скругленными на 15 пикселей углами и жёлтым текстом.

автор урока: Николай Винсент ​