Создаём словесный пузырь на CSS3, без использования изображений

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

CSS3 начинает менять нашу жизнь к лучшему. Теперь можно создать симпатичный словесный пузырь, который работает во всех браузерах, использует единственный элемент HTML, несколько строк кода CSS3, без картинок и без всякого JavaScript.
Изображение
Чтобы вам было проще, начну с рассмотрения HTML. Требуется один элемент, так что я использовал тег <p>

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

<p class="speech">SitePoint Rocks!</p>
Вначале добавляем стиль рамки.

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

p.speech {
	position: relative;
	width: 200px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}
Здесь ничего сложного нет. Единственное важное свойство это position: relative, оно необходимо для указателя словесного пузыря. Также нужны вендорные префиксы Mozilla и Webkit для border-radius и box-shadow, чтобы они работали во всех браузерах. IE8 и ниже покажет квадратные уголки и без тени, но рамка всё равно будет видна.
Изображение
Теперь нам нужно создать треугольный указатель пузыря. Чтобы не прибегать к изображениям мы можем использовать свойство border для создания любого типа треугольника. В качестве краткого объяснения изучим элемент с широкими разноцветными границами.
Изображение
Если уменьшить ширину и высоту нашего элемент до нуля, а затем использовать границы разной толщины, то мы увидим как появляются разные треугольники.
Изображение
Для указателя нашего словесного пузыря мы можем использовать одноцветную верхнюю и левую границу с прозрачной правой и нижней границей.
Изображение
Но как мы свяжем эти свойства border с нашим элементом? К счастью, можно использовать псевдоэлементы :before и :after для создания ещё двух пунктов содержания. Так что.

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

p.speech:before { 
	content: ' '; 
	position: absolute; 
	width: 0; 
	height: 0; 
	left: 30px; 
	top: 100px; 
	border: 25px solid; 
	border-color: #666 transparent transparent #666; 
}
Треугольник располагается внизу нашего пузыря. Кстати, не пытайтесь добавить тень к этому элементу, она будет показана вокруг прозрачных границ, а не видимого треугольника.
Изображение
Теперь надо удалить часть этого треугольника. Мы можем позиционировать маленький белый треугольник поверх серого для достижения такого эффекта.

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

p.speech:after { 
	content: ' '; 
	position: absolute; 
	width: 0; 
	height: 0; 
	left: 38px; 
	top: 100px; 
	border: 15px solid; 
	border-color: #fff transparent transparent #fff; 
}
Наш словесный пузырь на чистом CSS3 без картинок завершён.
Изображение
На деле мы можем использовать псевдоэлементы :after и :before для создания разных эффектов. Например, пузырь c мыслями может быть создан двумя пунктами содержания скруглёнными до окружности.

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

p.thought {
    position: relative;
    width: 130px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #fff;
    border: 8px solid #666;
    -webkit-border-radius: 58px;
    -moz-border-radius: 58px;
    border-radius: 58px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
}
p.thought:before, p.thought:after {
	left: 10px;
    top: 70px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 8px solid #666;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
}
p.thought:after {
    width: 20px;
    height: 20px;
    left: 5px;
    top: 100px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
}
Изображение

В демо использовано сразу два вида пузыря, поэтому коды немного отличается:

HTML структура:

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

<p class="bubble thought">I think…</p>
<p class="bubble speech">SitePoint Rocks!</p>
CSS:

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

p.bubble {
       position: relative;
       width: 200px;
       height: 100px;
       text-align: center;
       line-height: 100px;
       margin: 60px auto;
       background-color: #fff;
       border: 8px solid #666;
       -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
       border-radius: 30px;
       -webkit-box-shadow: 2px 2px 4px #888;
       -moz-box-shadow: 2px 2px 4px #888;
       box-shadow: 2px 2px 4px #888;
}

p.thought {
       width: 130px;
       line-height: 100px;
       -webkit-border-radius: 108px;
       -moz-border-radius: 108px;
       border-radius: 108px;
}

p.bubble:before, p.bubble:after {
       content: ' ';
       position: absolute;
       width: 0;
       height: 0;
}

p.speech:before {
       left: 30px;
       top: 100px;
       border: 25px solid;
       border-color: #666 transparent transparent #666;
}

p.speech:after {
       left: 38px;
       top: 100px;
       border: 15px solid;
       border-color: #fff transparent transparent #fff;
}

p.thought:before, p.thought:after {
       left: 10px;
       top: 70px;
       width: 40px;
       height: 40px;
       background-color: #fff;
       border: 8px solid #666;
       -webkit-border-radius: 28px;
       -moz-border-radius: 28px;
       border-radius: 28px;
}

p.thought:after {
       width: 20px;
       height: 20px;
       left: 5px;
       top: 100px;
       -webkit-border-radius: 18px;
       -moz-border-radius: 18px;
       border-radius: 18px;
}
Автор: Craig Buckler
Перевод: Влад Мержевич
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.

Похожие темы