Создаём простое облако с помощью CSS3

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Создаём простое облако с помощью CSS3

CabinetAdmin 04 фев 2013, 16:53 Сообщение

Изображение


Успокаивающие облака созданные исключительно с помощью CSS3. Вся форма облаков формируется с помощью одного тега и создается с помощью псевдо-элементов :after и :before.

Html структура:

Код: Выделить всё

<div id="cloud"><span class="shadow"></span></div>


Здесь у нас два элемента: <div> это и есть само облако и <span> это небольшая тень, расположенная под облаком.

CSS:

Код: Выделить всё

#cloud { width: 350px; height: 120px; background: #f2f9fe; background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; position: relative; margin: 120px auto 20px; } #cloud:after, #cloud:before { content: ''; position: absolute; background: #f2f9fe; z-index: -1 } #cloud:after { width: 100px; height: 100px; top: -50px; left: 50px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } #cloud:before { width: 180px; height: 180px; top: -90px; right: 50px; border-radius: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; } .shadow { width: 350px; position: absolute; bottom: -10px; background: #000; z-index: -1; box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }


Ну и само собой, в IE облако будет выглядеть так:
Изображение
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость