Блок цитаты

Поделюсь с читателями пузыриками цитаты.

Любой из них можно подогнать "под себя" в любимом фоторедакторе.

Нафига он нужен, смотрите демку:

Умная мысль
Если ничто другое не помогает, прочтите, наконец, инструкцию!

Варианты простых пузыриков:

С человечком:

Текст накладывается с помощью контейнеров и стилей:
html

<div id="bubble">
<div id="bubf">
<u>Умная мысль</u>
Если ничто другое не помогает, прочтите, наконец, инструкцию!</div>
</div>

css

<style>
#bubble { 
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQBVj2T-QaMGVcXdG5BUQKc1E9lVbhwe3SWZtvY4qldRO7v3mF-NZouagOF1HaS22uPgpV9E0FZqoOqbO3xl1QA8ru1Jg4xBYzeSHcdcXvWfzUIqdl_YmqZ9n3V73ZqCqaKCGXHcDfaY/s1600/bubble2.gif");
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: no-repeat;
background-size: auto;
display: block;
height: 73px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
margin-top: 0px;
width: 550px;
padding: 10px;
 }

#bubf { 
color: #ffffff;
font-size: 12px;
 }
u { 
text-decoration: underline;
 }
</style>

Размеры и положение картинки подгоняем в стилях через height, width и background-size. 

Положение надписи через padding и padding-top.

Размеры шрифта и цвет через font-size и color.

Шрифт можно сменить на Google Web Fonts, огромном хостинге веб-шрифтов.

Например, нужен шрифт Jura. Идём сюда, выбрали шрифт, получаем ссылку

<link href='http://fonts.googleapis.com/css?family=Jura' rel='stylesheet' type='text/css'>

Ставим её либо на страницу/виджет, либо в /head.
В блок css, после font-size, добавляем:

font-family: 'Jura', sans-serif;