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

Важное замечание. Для текстовых облачков используется свойство CSS3 border-radius. Оно отлично работает в браузере Firefox при использовании -moz-border-radius и в браузерах Safari и Chrome при использовании -webkit-border-radius, но не работает в браузере Internet Explorer до 8 версии включительно, в нем текстовые облачка выглядят, как обычные блоки.

Демонстрация работы – Скачать исходный код

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

HTML 

Как обычно, в коде HTML не сложно разобраться. Скопируйте следующий код и повторите его, чтобы продлить разговор.

<div class="reporter">
  <p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div class="reporter-ico">
  <img src="images/reporter.png" alt="" />
</div>
<div class="interviewee">
  <p>Nam condimentum. Cras eros nisl, ...</p>
</div>
<div class="interviewee-ico">
  <img src="images/interviewee.png" alt="" />
</div>

Это было не так уж сложно, не правда ли? Теперь давайте украсим этот код HTML с помощью CSS3.

CSS3 

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

.reporter { width:450px; float:right; background-color:#000018; color:#D8D8D8; font-style:italic; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
  background-image:url(../images/glow.png); background-position:top center; background-repeat:no-repeat; text-align: justify; }

float:right — блок репортера всплывает вправо, чтобы получилось смещение вправо-влево, которое придаст ощущение настоящего разговора.

-moz-border-radius:5px — закругленные углы.

background-position:top center — у блока есть цвет фона и фоновое изображение. Фоновое изображение, glow.png, расположено по центру сверху и не повторяется, что создает эффект интересного свечения сверху.

text-align: justify — это свойство используется для равномерного расположения текста слева и справа.

.reporter-ico { clear:both; float:right; width:100px; background-image:url(../images/reporter-balloon.png); background-repeat:no-repeat; }

width:100px — у этого блока фиксированная ширина, чтобы он всплывал вправо.

background-image:url — облачко установлено фоновым изображением.

background-repeat:no-repeat — нам не нужно повторять изображение. Оно будет показано один раз.

.interviewee { width:450px; clear:both; background-color:#304860; color:#D8D8D8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
  background-image:url(../images/glow.png); background-position:top center; background-repeat:no-repeat; text-align: justify; }

Здесь нет ничего необычного, все как у класса .reporter. Разница в том, что у .interviewee курсивный шрифт, другое фоновое изображение и нет свойства всплывания вправо.

Заставляем блоки всплывать правильно 

Иногда бывает трудно добиться правильного всплывания блоков. Если забыть выровнять всплывающие блоки, расположение в браузере может выглядеть очень странно. Так как блок reporter всплывает вправо, нам придется установить отступ для всплывающих блоков, чтобы все работало правильно.

Сделаем это, добавив следующий код в CSS:

.clear { clear:both; }

И добавим отталкивающий блок сразу за блоком reporter-ico.

<br class="clear" />

И это все. Мы также добавили выровненный по центру класс sent-item для передаваемых изображений.

Заключение 

Выглядит мило, не так ли? К сожалению, как мы уже говорили, предыдущие версии браузера Internet Explorer не поддерживают эти эффекты полностью, так что это не может быть полностью универсальным решением для всех браузеров. Вы также можете изменить изображение glow.png, если не хотите, чтобы был эффект свечения, например, на четкую границу.

Демонстрация работы – Скачать исходный код

Надеемся, вам понравился этот урок, и вы узнали из него что-то новое.

Автор урока Marco Kuiper

Перевод — Дежурка

Смотрите также:

• Создание 8 эффектных стилей оформления списков
• Поворачивающийся рекламный щит с использованием только CSS
• Создание подсвечивающихся блоков с использованием CSS3