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

Общие вопросы по 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

Аватара пользователя

vyaceslav
Сообщения: 10
Зарегистрирован: 05 фев 2018, 07:35
Репутация: 0
Благодарил (а): 2 раза

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

Сообщение vyaceslav » 05 фев 2018, 08:45

:O

  • Поделитесь ссылкой

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