#BC4E9C ▶ #F80759 / Градиенты CSS / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Градиенты CSS

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 2540

Количество символов:

Посмотрели: 1674 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.0 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: #BC4E9C, градиент, linear-gradient, #F80759, Gradient, градиент фона

Поделился: BootstrapТема

Добавлено: 2017-12-11 в 11:53

Метка: 1566150140

⇄ ⇅

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1">
<title>Gradient #BC4E9C ▶ #F80759 | BootstrapTema</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2017/j-s-p/jQuery-svg-popup-min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/j-s-p/jQuery-svg-popup-min.js"></script>
</head>
<body>
<style>
body{
background: #BC4E9C;
background: -webkit-linear-gradient(to right, #F80759, #BC4E9C);
background: linear-gradient(to right, #F80759, #BC4E9C);

}
.topgradient{
background: #BC4E9C;
background: -webkit-linear-gradient(to top, #F80759, #BC4E9C);
background: linear-gradient(to top, #F80759, #BC4E9C);
}
.rightgradient{
background: #BC4E9C;
background: -webkit-linear-gradient(to right, #F80759, #BC4E9C);
background: linear-gradient(to right, #F80759, #BC4E9C);
}
.bottomgradient{
background: #BC4E9C;
background: -webkit-linear-gradient(to bottom, #F80759, #BC4E9C);
background: linear-gradient(to bottom, #F80759, #BC4E9C);
}
.leftgradient{
background: #BC4E9C;
background: -webkit-linear-gradient(to left, #F80759, #BC4E9C);
background: linear-gradient(to left, #F80759, #BC4E9C);
}
.svg-popup-content{max-width:92%}pre{border:1px solid #666;padding:0 5px 18px 9px}p{opacity:.1;color:#999;font-size:200%;cursor:pointer}p:hover{opacity:1;color:#3a2453}.container div,body{width:100%;height:100vh}@media(min-width:576px){p{font-size:400%}}@media(min-width:768px){p{font-size:600%}}@media(min-width:992px){p{font-size:800%}}@media(min-width:1200px){p{font-size:1000%}}
</style>

<div id="totop"><div class="svg-popup-content"><h4>To Top</h4><pre><code>
background: #BC4E9C;
background: -webkit-linear-gradient(to top, #F80759, #BC4E9C);
background: linear-gradient(to top, #F80759, #BC4E9C);
</code></pre></div></div>

<div id="toright"><div class="svg-popup-content"><h4>To Right</h4><pre><code>
background: #BC4E9C;
background: -webkit-linear-gradient(to right, #F80759, #BC4E9C);
background: linear-gradient(to right, #F80759, #BC4E9C);
</code></pre></div></div>

<div id="tobottom"><div class="svg-popup-content"><h4>To Bottom</h4><pre><code>
background: #BC4E9C;
background: -webkit-linear-gradient(to bottom, #F80759, #BC4E9C);
background: linear-gradient(to bottom, #F80759, #BC4E9C);
</code></pre></div></div>

<div id="toleft"><div class="svg-popup-content"><h4>To Left</h4><pre><code>
background: #BC4E9C;
background: -webkit-linear-gradient(to left, #F80759, #BC4E9C);
background: linear-gradient(to left, #F80759, #BC4E9C);
</code></pre></div></div>

BootstrapTema

#BC4E9C ▶ #F80759

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0