#23074D ▶ #CC5333 / Градиенты CSS / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3, 4, 5

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

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

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

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

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

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

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

Рейтинг: 4.2 / 5 - 6 голосов

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

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

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

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

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

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

Добавлено: 2018-01-12 в 11:43

Метка: 1566149476

⇄ ⇅

<!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 #23074D ▶ #CC5333 | BootstrapTema</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link href="https://bootstraptema.ru/plugins/2016/remodal/remodal.css" rel="stylesheet">
<link href="https://bootstraptema.ru/plugins/2016/remodal/remodal-default-theme.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2016/remodal/remodal.js"></script>
</head>
<body>
<style>
body{
background: #23074D;
background: -webkit-linear-gradient(to top, #CC5333, #23074D);
background: linear-gradient(to top, #CC5333, #23074D);
}
.topgradient{
background: #23074D;
background: -webkit-linear-gradient(to top, #CC5333, #23074D);
background: linear-gradient(to top, #CC5333, #23074D);
}
.rightgradient{
background: #23074D;
background: -webkit-linear-gradient(to right, #CC5333, #23074D);
background: linear-gradient(to right, #CC5333, #23074D);
}
.bottomgradient{
background: #23074D;
background: -webkit-linear-gradient(to bottom, #CC5333, #23074D);
background: linear-gradient(to bottom, #CC5333, #23074D);
}
.leftgradient{
background: #23074D;
background: -webkit-linear-gradient(to left, #CC5333, #23074D);
background: linear-gradient(to left, #CC5333, #23074D);
}
a{text-decoration:none !important}pre{border:1px solid #666;padding:0 5px 18px 9px}a{opacity:.1;color:#999;font-size:200%;cursor:pointer}a:hover{opacity:1;color:#3a2453}.container div,body{width:100%;height:100vh}@media(min-width:576px){a{font-size:400%}}@media(min-width:768px){a{font-size:600%}}@media(min-width:992px){a{font-size:800%}}@media(min-width:1200px){a{font-size:1000%}}
</style>

<div class="remodal" data-remodal-id="totop" aria-labelledby="modalTitle" aria-describedby="modalDesc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<h4>To Top</h4>
<pre><code>
background: #23074D;
background: -webkit-linear-gradient(to top, #CC5333, #23074D);
background: linear-gradient(to top, #CC5333, #23074D);
</code></pre></div>

<div class="remodal" data-remodal-id="toright" aria-labelledby="modalTitle" aria-describedby="modalDesc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<div>
<h4>To Right</h4><pre><code>
background: #23074D;
background: -webkit-linear-gradient(to right, #CC5333, #23074D);
background: linear-gradient(to right, #CC5333, #23074D);
</code></pre></div></div>

<div class="remodal" data-remodal-id="tobottom" aria-labelledby="modalTitle" aria-describedby="modalDesc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<div>
<h4>To Bottom</h4><pre><code>
background: #23074D;
background: -webkit-linear-gradient(to bottom, #CC5333, #23074D);
background: linear-gradient(to bottom, #CC5333, #23074D);
</code></pre></div></div>

<div class="remodal" data-remodal-id="toleft" aria-labelledby="modalTitle" aria-describedby="modalDesc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<div>
<h4>To Left</h4><pre><code>
background: #23074D;
background: -webkit-linear-gradient(to left, #CC5333, #23074D);
background: linear-gradient(to left, #CC5333, #23074D);
</code></pre></div></div>

</body>
</html>

BootstrapTema

#23074D ▶ #CC5333

Скриншот

Подробнее

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

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

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