Градиент блока с закругленными уголками

Общие вопросы по HТМЛ, CSS и phpbb3 от пользователей форума
Ответить
Аватара пользователя
Fox
Администратор
Сообщения: 248
Зарегистрирован: 16 июн 2013, 11:10
Репутация: 4
Пол: Мужской
Поблагодарили: 7 раз
Контактная информация:

Градиент блока с закругленными уголками

Сообщение Fox » 25 июл 2014, 23:24

В данном уроке рассмотрим как можно заменить фон (картинку) блока на градиент css.

Демо страница - static.php?p=demo-gradient-block
Изображение

Код блока html.
<div class="gradient-block">
 Заголовок раздела.
</div>
Код css.
.gradient-block {
  background-image: linear-gradient(to bottom, #FBF893 20%, #4C6FFC);
  border: 1px solid #000;
  border-radius: 7px;
  padding: 7px;
  font-weight: bold;
}
background-image: linear-gradient(to bottom, #FBF893 20%, #4C6FFC); - фон
border: 1px solid #000; - рамка
border-radius: 7px; - закругление углов

Все очень просто, таким способом мы можем избавится от графического оформления на сайте и значительно увеличить скорость загрузки страниц.
Выбрать более подходящий цвет для градиента вы можете здесь - index.php?page=2

/

Ответить

Вернуться в «Вопросы от пользователей»