Як створити словесний пузир на CSS3 без картинок

Оригінал: sitepoint.com/pure-css3-speech-bubbles

Переклад: Влад Мержевич

Перші словесні пузирі без картинок вже не потребують JavaScript та складних CSS-рішень. CSS3 дозволяє створювати цікаві дизайни, що працюють у всіх браузерах, з використанням лише HTML та CSS3 коду.

Для створення пузиря використовується лише один 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;
}

Для створення треугольного вказівника пузиря використовуємо властивість 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; 
}

Інші ефекти можливі за допомогою псевдоелементів. Детальну демонстрацію та код можна знайти на цій сторінці.