Liquid Tooltips with Shadows

Последнее время у меня довольно часто спрашивают, как сделать с помощью блоков тянущиеся тултипы/модальные окна с прозрачными элементами. Не поленюсь показать еще разок.

Нарезка макета

В результате нарезки должны получить 4 уголка, 4 фона для заливки границ и 2 фона для градиента в серединке нашего тултипа.

Разметка

HTML:

<div class="tooltip">
    <div class="tooltip-top">
        <div class="tooltip-tl"></div>
        <div class="tooltip-t"></div>
        <div class="tooltip-tr"></div>
    </div>
    <div class="tooltip-middle">
        <div class="tooltip-l">
            <div class="tooltip-r">
                <div class="tooltip-body">
                    <div class="tooltip-body-t">
                        <div class="tooltip-body-b"><img src="images/tooltip-i.png" width="33" height="33" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tooltip-bottom">
        <div class="tooltip-bl"></div>
        <div class="tooltip-b"></div>
        <div class="tooltip-br"></div>
    </div>
</div>

CSS:

.tooltip {}
	.tooltip img {
		float: left;
		padding: 2px 7px 2px 2px;}
	.tooltip-top {
		padding: 0 10px;
		position: relative;}
		.tooltip-tl {
			background: url(../images/tooltip-tl.png) 0 0 no-repeat;
			height: 10px;
			left: 0;
			position: absolute;
			top: 0;
			width: 10px;}
		.tooltip-t {
			background: url(../images/tooltip-t.png) 0 0 repeat-x;
			height: 10px;}
		.tooltip-tr {
			background: url(../images/tooltip-tr.png) 0 0 no-repeat;
			height: 10px;
			position: absolute;
			right: 0;
			top: 0;
			width: 10px;}
	.tooltip-middle {}
		.tooltip-l {background: url(../images/tooltip-l.png) 0 0 repeat-y;}
		.tooltip-body {
			color: #fff;
			font: 10px Verdana, Geneva, sans-serif;
			padding: 0 10px;}
			.tooltip-body-t {background: #383838 url(../images/tooltip-body-t.png) 0 0 repeat-x;}
				.tooltip-body-b {
					background: url(../images/tooltip-body-b.png) 0 bottom repeat-x;
					overflow: hidden;
					padding: 0 3px 2px;}
		.tooltip-r {background: url(../images/tooltip-r.png) right 0 repeat-y;}
	.tooltip-bottom {
		padding: 0 10px 0 28px;
		position: relative;}
		.tooltip-bl {
			background: url(../images/tooltip-bl.png) 0 0 no-repeat;
			height: 18px;
			left: 0;
			position: absolute;
			top: 0;
			width: 28px;}
		.tooltip-b {
			background: url(../images/tooltip-b.png) 0 0 repeat-x;
			height: 18px;}
		.tooltip-br {
			background: url(../images/tooltip-br.png) 0 0 no-repeat;
			height: 18px;
			position: absolute;
			right: 0;
			top: 0;
			width: 10px;}

Живой пример