Page 56 - Сила CSS3 Освой новейший стандарт

56 • Глава 2. Облачка с текстом

данных, которые приходилось загружать каждому пользователю, и это снижало ско-
рость загрузки страниц. Даже если вы применяли сценарии динамического создания
скругленных углов, не создавая и не встраивая изображения вручную, все равно вы
своими руками увеличивали число файлов для загрузки пользователями и умень-
шали производительность страниц. И все это ради банальных скругленных углов!

Создание овалов и окружноСтей С помощью СвойСтва bordEr-radIuS
Если вы хотите, чтобы облачка с текстом имели овальную форму, а не форму прямоуголь-
ников со скругленными углами, для этого нужно определить углы не как дуги окружности,
а как эллиптические дуги. Эллиптическая дуга, в отличие от дуги окружности, немного
спрямлена — просто вспомните, как выглядит овал. Для того чтобы задать скругление угла
по эллиптической дуге, укажите два значения, разделив их косой чертой, примерно так:
border-radius: 50px/20px. (В Safari 3 и 4 используется нестандартный синтаксис, без косой
черты, и два значения разделяются простым пробелом.) Предыдущие значения описывают
сглаженную эллиптическую кривую, вытянутую на 50 пикселов по горизонтали, но только
на 20 пикселов по вертикали. Для всех углов можно указать разные значения. Подробнее
об этом рассказывается на веб-сайте http://css-tricks.com/snippets/css/rounded-corners.
Чтобы создать окружность, сначала определите поле с одинаковыми значениями width
и height; используйте единицы изменения em, а не пикселы, для того чтобы размер поля
автоматически подстраивался под увеличивающиеся блоки текста. Затем для каждого угла
укажите значение свойства border-radius, вполовину меньшее значения width/height. На-
пример, для поля шириной и высотой 10 em используйте значение border-radius, равное
5 em. Еще больше примеров вы найдете на веб-сайте http://blog.creativityden.com/the-
hidden-power-of-border-radius-2.

С другой стороны, в CSS3 для создания скругленных углов достаточно всего-навсего
добавить в один блок div еще одну строку кода, например: border-radius: 10px.
Никакой дополнительной разметки, никаких изображений, никакого JavaScript.
Разумеется, с учетом непрерывного совершенствования CSS3 и внедрения в браузе-
рах поддержки новых спецификаций в реальном мире все становится чуть сложнее.
Однако по сравнению с другими подходами, это совершеннейшие пустяки.

У вас все так же должен быть открыт файл speech-bubble_start.html. Отредактируйте
правило blockquote, добавив следующий код:
blockquote {
margin: 0 0 0 112px;
padding: 10px 15px 5px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-top: 1px solid #fff;
background-color: #A6DADC;
word-wrap: break-word;
}

www.trk.kg