---
title: "Кроссбраузерные рандомные JS+CSS облака на странице"
description: "Как-то бороздил просторы хабра и наткнулся на забавный пост про генерацию облаков. Натолкнуло на мыс..."
author: "fors"
published: "2013-07-04T01:33:01+00:00"
modified: "2013-07-04T01:48:18+00:00"
locale: "ru"
canonical_url: "https://yvision.kz/post/krossbrauzernye-randomnye-js-css-oblaka-na-stranice-351720"
markdown_url: "https://yvision.kz/post/krossbrauzernye-randomnye-js-css-oblaka-na-stranice-351720/markdown"
site_name: "Yvision.kz"
---

# Кроссбраузерные рандомные JS+CSS облака на странице

> Как-то бороздил просторы хабра и наткнулся на забавный пост про генерацию облаков. Натолкнуло на мыс...

Как-то бороздил просторы хабра и наткнулся на забавный пост про генерацию облаков. Натолкнуло на мысль попробовать самому сделать на простом js. Без наворотов и прочего. Банальной тенью на маленьком круглом объекте типа точки. И таких штук 30 в несколько слоёв в рандомных позициях.

Итого [пример и код](http://codepen.io/fors/full/lewjz).

Работает во всех браузерах. Даже в IE6.

Правда, в момент генерации проц прилично нагружается. Для этого примера данные прожорливости проца примерно такие: FireFox совсем не заметно (1-2%), Chrome кушает примерно 10%, Opera и IE ~33% в среднем. Основной загруз из-за теней. Зависит еще от размера шрифта - чем больше шрифт, тем крепче думает.

---

Source: [https://yvision.kz/post/krossbrauzernye-randomnye-js-css-oblaka-na-stranice-351720](https://yvision.kz/post/krossbrauzernye-randomnye-js-css-oblaka-na-stranice-351720)