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

Установка:

Добавляем на сайт библиотеку 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>
</div>

Информация

</div>

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

.material-background-layer {
	position:relative;
	overflow: hidden;
	margin: 20px 0;
}
#material-background {
	height: 400px;
}
.material-background-text {
	position: absolute;
	z-index: 999999;
	max-width: 600px;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%); 
	text-align: center;
	background:rgba(0,0,0,0.3);
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 12px 18px rgba(0, 0, 0, 0.1);
	padding: 20px 30px;
}	
@media screen and (max-width: 767px) {
	.material-background-text-fon {
		width: 100%;
	}
}

.material-background-layer {

position:relative;

overflow: hidden;

margin: 20px 0;

}

#material-background {

height: 400px;

}

.material-background-text {

position: absolute;

z-index: 999999;

max-width: 600px;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

text-align: center;

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

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 12px 18px rgba(0, 0, 0, 0.1);

padding: 20px 30px;

}

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

.material-background-text-fon {

width: 100%;

}

Автор скрипта: James Williams