Случайные геометрические фоны

Установка:

Добавляем на сайт библиотеку jQuery, CSS и JS файлы:

<link rel="stylesheet" href="/css/material-background-styles.css">
<script src="/js/material-background-scripts.js"></script>

1 2	<link rel="stylesheet" href="/css/material-background-styles.css"> <script src="/js/material-background-scripts.js"></script>

Скачать: material-background-styles.css
Скачать: material-background-scripts.js

Создаем контейнер, в котором будет показан фон:

<div id="material-background"></div>

1	<div id="material-background"></div>

И подключаем скрипт:

$(function() {
	materialBackground.start();	
});

$(function() {

materialBackground.start();

});

Пример 1:

Этот пример встроен фреймом, где фон генерируется на всю страницу.

Обновить фон Открыть во весь экран

Пример 2:

Данный генератор можно использовать и для блока, а поскольку нам не пригодится просто красивый фон, сделаем этот блок информативным.

atuin

Скрипт Material-Background генерирующий случайные фоны для блока или всей страницы

Обновить фон

HTML этого примера

<div class="material-background-layer">
	<div id="material-background"></div>
	<div class="material-background-text">
		<div class="material-background-text-fon">	
			Информация
		</div>
	</div>
</div>

Информация

</div>

CSS этого примера

.material-background-layer {
	position:relative;
}
#material-background {
	height: 400px;
	margin:12px 0;
}
.material-background-text {
	position:absolute;
	z-index: 999999;
	height: 100%;
	width: 100%;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}	
.material-background-text-fon {
	background:rgba(0,0,0,0.3);
	padding: 20px 30px;
	text-align: center;
	width: 50%;
}
@media screen and (max-width: 767px) {
	.material-background-text-fon {
		width: 100%;
	}
}

.material-background-layer {

position:relative;

}

#material-background {

height: 400px;

margin:12px 0;

}

.material-background-text {

position:absolute;

z-index: 999999;

height: 100%;

width: 100%;

top: 0;

display: flex;

align-items: center;

justify-content: center;

}

.material-background-text-fon {

background:rgba(0,0,0,0.3);

padding: 20px 30px;

text-align: center;

width: 50%;

}

@media screen and (max-width: 767px) {